Refactoring Javascript with Fred Lawler (Design + Code Series Appendix)


Refactoring Javascript is a common task for the developer. Today I invite Fred Lawler to give us some pointer.

Fred’s branch –

Fred on Twitter:
Fred on Github:

– – –

This video was sponsored by the DevTips Patron Community –

Listen to Travis’ Podcast –

Get awesomeness emailed to you every thursday –

You should follow DevTips on Twitter –


Xem thêm bài viết khác:


  1. Is that considered to be functional programming in javascript that Fred was doing here? I mean all these modularity things. Because I was watching 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?

  2. 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

  3. 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!!!!

  4. 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.

  5. 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!

  6. Hi Trav, have you ever tried coffeescript ( 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.

  7. 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.

  8. Nice vid Trav!
    I like how you are not affraid to show us even you don't know everything about webdesign! 🙂

    As a side note: I really enjoyed reading through this book to learn about all kinds of Design patterns in JS!

  9. I would personally do things a bit differently.

    First of all, this is not the best example for styling in terms of indentation. Anything wrapped up in curly brackets should be only one level inwards, be it either a tab or double space or anything you prefer. I personally like a lot of "air" in my code so i put spaces around anything that's in brackets, for example:

    $( this ).addClass( 'someClass );

    It embraces readability and does not affect performance as I minimize all css and js files.

    My rule of thumb is to keep things as simple as possible. If all a function needs to do is to toggle a class I would toggle it directly on $( this ) like:

    $( this ).toggleClass( 'active );

    This saves a couple of lines and if in future I need to use that reference more than once, then I will save it in a variable $el = $( this );

    I think it is more consistent to use 'active' class on everything. That way you won't have to remember all the classes you came up with for different elements, like 'is-open' for navigation, 'selected' for button link, 'expanded' for accordion, etc. And then you can style all these elements differently.

    Although great tutorial! I always learn something new from DevTips.

  10. This is invaluable and exactly what I needed right now. Thank you so much Fred and Travis. I'd love to see some more refactoring videos like this, even using things other than JS such as Sass and other development tools you use . So much to learn, so little time!

  11. Honestly, working with this many functions would be a lot better using Module Pattern. Easier to read and you don't need to call so many things over and over keeping the code dry.

  12. Great video! Will Los come back for the design he did last video, to code it? And will you make some Photoshop videos before the year ends? Also, what about those vlogs and Google news?

  13. Fred is a legend! Thank you, guys. Travis, this was really informative. I've learned so much on nomenclature and process from this video. It was awesome. Keep on hacking!

  14. I guess its just because of lack of experience of the tech guy, but he doesnt know how to explain what he is doing. I know its probably because lack of my knownledge. Too messy. I was struggling to finish the video. Thumbs up for idea of doing tutorial on JavaScript and jQuery.

  15. Great Video…
    Always helpful this kind of code refactoring videos, on existing project with good ideas (clean code)

    This video series helped me to lean modular javascript

  16. hey travis, in 9:53 Fred explains the variable assignment, he didn't state that defining a variable up top is for a main reason made for maintenance, you use the$('.mobile-nav-toggle, mobile-nav') jquery element in lines 29-30 (on 9:53 in the video), say you want to change the elements name, or use it again to add something, using a variable will mean you change the code once in the definition up top, and it applies to all of the code. hope i explained it right

  17. Please do a video on how to use the Skeleton framework. Looks super awesome but i'm not very familiar with using grids. Keep on hacking :).

  18. I love that you are doing this,it's awesome!!

    Other way to do this is use a global object.
    So if you have a global object called "app" you can mix in other object into this object and it's simple way to extract the code and it's easy to find event, el, settings and init you know where to look.

    so here example code:

    // ******************************************************************
    // Application
    // this part should be in other file and loaded before everything else
    // ******************************************************************
    (function(window) {
    "use strict" = {};

    })(window, undefined);

    // ******************************************************************
    // Mobile view
    // ******************************************************************
    (function ($, window) {
    "use strict"

    // extend app object
    $.extend(app, {
    el: {
    btnMobileNavToggle: '',
    blankATags: '',
    body: '',
    selectors: ''
    mobileView: {
    settings: {
    duration: 300
    init: function () {
    // set elements
    app.el.btnMobileNavToggle = $('.mobile-nav-toggle');
    app.el.blankATags = $('a[href^="#"]');
    app.el.body = $('html, body');
    app.el.selectors = $('.mobile-nav');

    // bind events
    app.el.btnMobileNavToggle.on('click', app.mobileView.event.onBtnClick);
    app.el.blankATags.on('click', app.mobileView.event.onBlankAClick);
    event: {
    onBtnClick: function(e) {
    var self = $($this),
    className = 'is-open';


    return false;
    onBlankAClick: function(e) {
    var self = $(this),
    href = self.attr('href'),
    target = $(href);

    if (target.length > 0) {
    scrollTop: target.offset().top
    }, app.mobileView.settings.duration);

    // start mobile view

    })(jQuery, window, undefined);

  19. Great video 🙂

    Self invoking functions are better known as IIFE.

  20. This was super helpful. Would love to see more. It seems that many of us are at this point where we need to get a bit deeper into module patterns and refactoring "prototype" js.

  21. Great nerdy start to my monday morning guys! Can anyone expand on the idea of "Global Functionality"? Fred explains that he would group certain functions into modules and one criteria for that grouping was 'Global Functionality'. I'm not 100% sure as I understand what this means.


Please enter your comment!
Please enter your name here