Modular Javascript #2 – Converting jQuery to an Object Literal Module



In this video, we'll convert plain jQuery code to an object literal module. It will still use jQuery, but the pattern will be much cleaner and easier to maintain.

Missed video #1? http://youtu.be/HkFlM73G-hk

Source code for this video:
http://codepen.io/anon/pen/OVZpqO?editors=101

Web developers often don't see the value of changing the way they write javascript code - this is often due to the fact that they have never had to code a large application. Code that doesn't look messy at first gets VERY messy when you need a lot of code doing a lot of things.

This video will show how to take that messy jQuery code and clean it up into a self-encapsulated module that is easy to work with.

Modular JS #1 - Object Literal Pattern pt 1:
https://www.youtube.com/watch?v=HkFlM73G-hk&index=1&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f

Modular JS #2 - Object Literal Pattern pt 2:
https://www.youtube.com/watch?v=m-NYyst_tiY&index=2&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f

Modular JS #3 - Revealing Module Pattern:
https://www.youtube.com/watch?v=pOfwp6VlnlM&index=3&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f

code source

  • My code is almost the exact same as wills, but it says: mustache.js:598 Uncaught TypeError: Invalid template! Template should be a "string" but "undefined" was given as the first argument for mustache#render(template, view, partials)

    View Comment
  • Hey fantastic tutorial! Question though. I had some difficulty getting mustache to work. It wasn't until I placed all my script links below the relevant div. Why does it not work if you link them in the head?

    View Comment
  • by far the most valuable js tutorials I've come across on YouTube. The care you take in explaining the reasoning behind everything is immensely valuable to me.

    View Comment
  • Thanks for the video! This was really helpful! Is it better to write my component als a class now in es6 ? Or do you prefer the object literal for small components? Thanks!

    View Comment
  • This was an excellent example/explanation. I felt that using handlebars/mustaches was unnecessary and complicated what was a great overview. Excited for the rest. : )

    View Comment
  • Thanks a lot, this gives an answer to many questions I had. I was wondering if it's a good practice to wait for the DOM to be loaded before caching everything. So why is there no $(document).ready() in this code? Anyone?

    View Comment
  • So much wow, so clean, very nice. Thank you.

    View Comment
  • I feel like I want to take down my Github code now because I'm ashamed of it.

    View Comment
  • Magnificent videos, thanks for doing all of this, is really useful.
    I was getting and error saying that Muscache was undefined, The problem was I was calling my custom script.js before the Mustache library, leaving my custom code after the jquery and mustache libraries fixed it.

    View Comment
  • at 14:20 do you even need this? cant you just use people.push and not bind the button function?

    View Comment
  • Best modular Javascript tutorial ever. Things are so much cleaner now for me. Thank you a lot mate , keep up with the good work!

    View Comment
  • 19:27 Can't we just replace line 33 & 34 with just the code below?

    var i = $(e.target).closest('li').index();

    View Comment
  • What does el stand for in $el?

    View Comment
  • you said 'render' function is the only function touching the dom, but isnt cacheDom also touching the dom?

    View Comment
  • While you were binding the events, you used .on('click', addPerson… to bind to the add button. Are there reasons to prefer this over .click(addPerson… ?
    Is it to maintain the same syntax format of the delegate method? Shouln't then you use the three-parameter `on` syntax? Would be something like .on('click', 'i.del', deletePerson);

    thanks.

    View Comment
  • Dude….really! I used to hate JavaScript…especially when I saw those spaghetti codes. After watching your first two videos, I am starting to like it more and more.

    Also, you explain it very well and clear. If a question comes to my mind, most of the time you answer it in the same video within seconds. Thanks for this!

    I subscribed right away!

    View Comment
  • Hi Will. Thanks for making this amazing video. I came across your tutorials when i first started learning web development a year ago. To be honest when I first watched this series, I didn't get it at all, but the other day I watched it again, and I finally got the aha moment, which is so freaking awesome. And I am implementing the design pattern you covered in my work as well. However, I have one question, I found that the 'bind(this)' doesn't work in ie8. I searched for bind(self) alternatives online for over an hour now, but ended up with no solutions. So I am hoping you can kindly give me some insights if you if can. Thanks, cheers : )

    View Comment
  • can i achieve this with vanilla javacript, without using jquery?!

    View Comment
  • You do not want to put html in the JS, tell that to the ReactJS guys!!

    View Comment
  • This is the best tutorial I've seen on writing clean code in JavaScript, thank you for taking the time to make these videos. I want to try to apply this to some of the projects I'm working on!

    View Comment
  • Do we really need the .delegate method from jQuery? It's seems like now method .on covers that functionality as well.

    View Comment
  • Such an awesome tutorial!

    View Comment
  • <3 Noob friendly!
    Thank you.

    View Comment
  • Dude this is soooooooo awesome. Thank you for your work.

    View Comment
  • Great video. But I had to laugh when you said, "Here I'm putting html in my javascript and that's not a good practice." Now they have the React library which is based on putting your html in javascript. It's a mess to read but I guess the performance justifies the spaghetti code. lol

    View Comment
  • Hi, in minute 18:15 you said only the "render" function who should touch HTML, but wait you gonna update the whole ul because you only removed one li ? come on !!

    View Comment
  • I looked at my current javascript code… and I cried!
    Thanks a lot for your series! It's great stuff.

    View Comment
  • What syntax colour scheme are you using in this video? Thanks

    View Comment
  • 11:32, you read my mind!

    View Comment
  • This was absolutely fantastic! Thank you!!

    View Comment
  • I have a lot of learning to do. LOLs.

    View Comment
  • Buddy, you're the best of the best. Thank you for this awesome stuff.

    View Comment
  • Awesome video. Thanks, man

    View Comment
  • Very nice video. Small remark about "delegate()". Since from jQuery 1.7+ it is safe and recommended to use "on()" instead (because implementation of "delegate()" under the hood uses "on()" anyway), maybe to make that point for people that are starting JS programming now (and not caring about legacy code), to pick up that habit for future. It's not a big of a deal, once again, good job.

    View Comment
  • Excellent Tutorial. Looking forward to more

    View Comment
  • why do you assume people know what bower is or what mustache is? or even how to comment out a whole chunk of code? all kinds of people are watching this and you should be explaining everything you do as you go along.

    View Comment
  • Another amazing video. I'm trying to implement this pattern in a current project but I have many buttons where you have only 1. I have a pen in progress. Line 10 in the javascript is your button caching, but this will obviously not work for my use case. Any suggestion on how to handle the dom caching for lots of buttons?
    http://codepen.io/witblacktype/pen/EVpNxy

    View Comment
  • Hello,
    lets look to the last variant of addPerson(value) method, to the following line of code:
    this.people.push(value || this.$input.val());

    this.$input.val() will never be called, because "value" variable will be set to Event object, if addPerson is called as onClick event handler. So last modification of module to allow communication between modules broke this.$button.on("click") event.

    View Comment
  • This is the absolute best explanation of modular JS I have seen. This has definitely taken me to a new level in my JavaScript journey.

    View Comment
  • what is event.target? in deletefunction? What if we just write "this", as this is already binded with that main parent people?

    View Comment
  • I got placed in a good company cuz of u.. They asked me to create a webservice for Crud and utilize it using jquery… Thanks.

    View Comment
  • Question: In your example, you have this.$button.on("click", addPerson), but what if addPerson has parameters? Since you do not like biding an event listener and adding a person at the same time, how would you overcome this issue without passing an anonymous function?

    View Comment
  • Dude, Will. This was revealing. This is what has been a huge gap in my JS knowledge. Thanks for explaining all this like only you can. I really appreciate it :)

    View Comment
  • Wouldn't you agree that the clearing of the input field ought to also be inside the render event, as that's as well communication with the DOM. Also, it gets called whenever we add the input anyways?

    View Comment
  • Awesome!

    View Comment
  • Awesome!

    View Comment
  • isi

    I think I watched different parts of this video already 20+ times.

    View Comment
  • Wow, as a Python user, suddenly JS makes sense.

    View Comment
  • Are we gonna see any react or backbone tutorial in the future? I like your teaching style. Thanks.

    View Comment