Refactoring Javascript is a common task for the developer. Today I invite Fred Lawler to give us some pointer.
Fred’s branch – https://github.com/fredlawl/Design-Code/blob/review/assets/js/functions.js
Fred on Twitter: https://twitter.com/LTSuperbus
Fred on Github: https://github.com/fredlawl
– – –
This video was sponsored by the DevTips Patron Community – https://www.patreon.com/DevTips
Listen to Travis’ Podcast – http://www.travandlos.com/
Get awesomeness emailed to you every thursday – http://travisneilson.com/notes
You should follow DevTips on Twitter – https://twitter.com/DevTipsShow
Original source
20 responses to “Refactoring Javascript with Fred Lawler (Design + Code Series Appendix)”
Holy cow! That guy was typing without touching the keyboard @ 21:15
Is that considered to be functional programming in javascript that Fred was doing here? I mean all these modularity things. Because I was watching learncode.academy videos on modular javascript from OOP side and he modularizes the code into objects, whereas Fred just put everything into function scope. What is the difference?
I'm getting an error with this, thrown by the (jQuery); bit at the end
says jquery is not defined
what's going on here? I typed his code exactly as shown
Never trust someone who uses the paper theme.
Any reason for not turning it in to the Class (OOP) instead ?
Wow!!!
I learn so much from this video…
Thanks Travis for your all videos,
and bring us Hotshots like Fred and others!
Tnx Tnx Tnx!!!!
wow… Fred is… just… wow… i am speechless
please let him make tutorial series about JS… please…
Mad Props
Hey Fred, those are great JS tips! I wish I could learn/improve my JS by taking a class from you. :]
Pretty good video. Would love more frontend JS/Jquery tutorials from this channel. The "this" portions of this video were a bit confusing, but good overall.
You remind me of Pantera's singer Phil Anselmo
Good idea to check the jQuery documentation because .toggleClass has been deprecated
Great Demonstration.
This video is fantastic! Lots of practical tips in here. I'd love to see more videos like this.
This was great! I've been learning js using the book 'javascript & jquery' by jon duckett lately, and it has definitely helped me understand most of what Fred said and did throughout this video! Can't wait to see new js videos @devtips!
Hi Trav, have you ever tried coffeescript (http://coffeescript.org/)? It takes care of the things you missed such as scope, hoisting, and all that. And the syntax is more like sass, and is very cool. I think you would like it.
This was awesome. Very practical. Keep these vids coming.
Easy way to refactor JQuery, start by eliminating sizzle and make some accessor modules that cache the DOM via javascript. Why is it important? Recursive lookups take time. For example:
$('.mobile-nav-toggle') inside the mobile nav function
That basically means every time that function is called, javascript first has to do a recursive lookup on the DOM to find the element it needs to effect. One of these actions might be OK but what if you have 2 or 3 happening simultaneously? That's 2-3 recurive lookups.
Instead there are ways of caching the DOM within javascript so that you can just invoke a state change.
Hey!
This is gold!