• Saturday , 15 December 2018

Modular Javascript #4 – PubSub Javascript Design Pattern

Code Canyon



Last video, we covered the revealing module pattern – where we expose an API allowing modules to talk to each other. This works well for smaller amounts of modules, but can have issues when many modules need to talk to each other.

Here’s the pubsub code I’m using in this example: https://gist.github.com/learncodeacademy/777349747d8382bfb722

In this video, we’ll cover the pubsub design pattern (publish/subscribe), which allows us to decouple our modules. Once integrated with our pubsub module, they can emit events and not have to worry about which modules depend on them. Modules can subscribe to events and be notified when any module publishes.

Original source

3d Ocean

Related Posts

46 Comments

  1. Mohamed Z
    June 2, 2017 at 11:19

    Very good tutorial ,
    thanks!!!!!!
    ƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃ

  2. EVET evet
    June 2, 2017 at 11:19

    what is sublime scheme here

  3. Winnie Yoong
    June 2, 2017 at 11:19

    Thank you so much for the tutorial, JS suddenly makes a lot of sense to me. I can now say good bye to spaghetti codes! Thank you, you're awesome!

  4. Debasmita Swain
    June 2, 2017 at 11:19

    code is not visible

  5. Brian Jin
    June 2, 2017 at 11:19

    im starting to see the need for frameworks like react with all these modules wanting to know what the other module is doing and when to update etc. interesting stuff!

  6. Willyboy
    June 2, 2017 at 11:19

    Holy smoke I wish I had learned all of this before learning any javascript framework. Still love React, but now everything just make more sense.

  7. mario1ua
    June 2, 2017 at 11:19

    So powerful and yet so simple tool, very cool.

  8. Hardy Mah
    June 2, 2017 at 11:19

    Awesome video!!!! So clear and useful!!

  9. Carlos Benavides
    June 2, 2017 at 11:19

    Here is my like, and here is my 'Thank You Sr.'

  10. Doug Bennett
    June 2, 2017 at 11:19

    I don't understand why the functions are pushed into a list of event handlers within the pubsub module. Aren't we overcomplicating the supposedly simple and "stupid" pubsub module by pushing all these events into a collection? Wouldn't it be more efficient to just have services subscribe to to these events, and then have the pubsub simply send out notifications that the event happened, and then let the services appropriately handle that event internally?

    My concern is that as the handlers get more and more complex, wouldn't it be better to spread out the load? Let's say there are 50 subscribers to one event, and each of the handlers within those services needs to run 5 functions on average when that event happens. Do we want to run 250 functions within the pubsub service, or send out 50 simple requests to the services to let them know the event was triggered, and have them all execute their handlers individually?

  11. Yue Lee
    June 2, 2017 at 11:19

    thanks a lot ! it just slove my ui logic ,and I learned how to writing ui logic in a new way ! thanks again!!

  12. Mark Christoper Vizcarra
    June 2, 2017 at 11:19

    So you're saying that we basically set people to fire whenever they changed? Awesome!

  13. Koenees Karas
    June 2, 2017 at 11:19

    Very well delivered, intriguing to follow. Casual at the same time. Thank you.

  14. Nkarimbi Cho
    June 2, 2017 at 11:19

    I can't see the pubsub.js script, the screen is being shaded, or is the code available somewhere else?

  15. Piara Singh
    June 2, 2017 at 11:19

    I wonder what would be going through the mind of that person who hit the Dislike button 😀

  16. Son Le
    June 2, 2017 at 11:19

    Your voice sound like Mismag822 doing JavaScript tutorial videos.

  17. kasp
    June 2, 2017 at 11:19

    Love ya for this great tutorial. Keep it up bud!!!

  18. C. Ichongiri
    June 2, 2017 at 11:19

    Your vids…. <3…on point… Thank you!

  19. jory braun
    June 2, 2017 at 11:19

    Thank you, this series is exactly what i needed

  20. Ovidiu Trif
    June 2, 2017 at 11:19

    awesome!

  21. Juan2003gtr
    June 2, 2017 at 11:19

    Excellent channel…suscribed

  22. Ken Aguilar
    June 2, 2017 at 11:19

    i shouldve watched this before messing with socket.io

  23. WeiGrand Ho
    June 2, 2017 at 11:19

    Awesome courses!!!

  24. Raccoon
    June 2, 2017 at 11:19

    A quick question here. Why 'pubsub.fn(…)' works in people module without importing(or requiring) the js file? Is it because every js files are already loaded in the html file?

  25. hikibum
    June 2, 2017 at 11:19

    Really useful.

  26. rafalg87
    June 2, 2017 at 11:19

    It looks like you can switch between the keyboard and the mouse very quickly. Do you actually use a mouse? Or do you use something else?

  27. tmanley1985
    June 2, 2017 at 11:19

    I already pay for Laracasts, TreeHouse and CodeCourse. I guess I'm going to have to give you my money too. I'll support your channel but if you have a website, which I didn't see anywhere (so I'm possibly blind) I will buy you lunch each month for videos like this. Really great job man.

  28. Michael Hartmayer
    June 2, 2017 at 11:19

    Is it a fair assumption that you can only use a mediator when you do not need any information in return? For example, if I wanted to make sure all the names only contained a-z, I wouldn't be able to just fire a message into the ether, right? I'd probably choose to couple my validation logic?

  29. A Shen
    June 2, 2017 at 11:19

    You rock!

  30. chock zhu
    June 2, 2017 at 11:19

    thanks

  31. Tom Hoadley
    June 2, 2017 at 11:19

    When loading in the stylesheets, do you put the stats.js file first??

  32. Tony Xiao
    June 2, 2017 at 11:19

    You are awesome! Love your videos that taught me lot. Really thank you!

  33. Ethan k
    June 2, 2017 at 11:19

    thx, great video! just wonder is there any plan to teach how to write a MV* framework using these patterns? i think that would be great practice!

  34. Brett Guillory
    June 2, 2017 at 11:19

    I"m totally refactoring my http://www.freecodecamp.com Pomodoro Clock zipline project now using your module and pubsub patterns now to make them so much easier to code and follow. These are absolutely the best explained, most useful learning videos I've come across. Please don't stop making these.

  35. Edward Simon Valdez
    June 2, 2017 at 11:19

    as a starting web developer I really learned a lot from your videos that even aren't taught at my college. easy to learn and pretty straightforward! thank you! now I'm really loving JavaScript!

  36. zombieskelper.com
    June 2, 2017 at 11:19

    I came up with a slight variation on the revealing module pattern that allows you to raise and handle events that doesn't require a separate pubsub module. Rather than returning your api from the module as an anonymous object if you declare it as a variable you can trigger events on it that can be listened for externally (or internally if you need).

    var controller = (function()
    {
    function doAThing()
    {
    $(interface).trigger("complete");
    }

    var interface = {
    doAThing: doAThing
    };
    return interface;
    })();

    $(controller).on("complete", function() { console.log("Thing Done"); });
    controller.doAThing();

  37. Aman Gupta
    June 2, 2017 at 11:19

    That is awesome… really great, simplest and non-confusing tutorial ever I have seen over pub-sub pattern.. ! 🙂

  38. jacovc1986
    June 2, 2017 at 11:19

    Isn't it the other way around? If I want to make a new event I should call "emit", and if I want to trigger that event, I can use the "on" method.

  39. Diego Ruiz
    June 2, 2017 at 11:19

    thanks alot, this has opened alot for me so far

  40. Marco Marco
    June 2, 2017 at 11:19

    the volume doesn't work in any video of tyhe series. in other videos yes. only in this series doesn't work

  41. Atacama Humanoid
    June 2, 2017 at 11:19

    On your people.js file, how does pubsub.publish("peopleChanged", people.length); accomplish anything if the pubsub.js file actually has no instance of 'pubsub' anywhere?

  42. Ajinkya Borade
    June 2, 2017 at 11:19

    Angularjs has $broadcast to do the same 🙂

  43. James Wolpert
    June 2, 2017 at 11:19

    Fantastic video series, I've learned so much! I do, however, have a petty, nearly irrelevant question – what theme do you have installed on sublime text? lol

  44. Vaughn Haynes
    June 2, 2017 at 11:19

    I was following, but now this creates a new global variable for each new module. How would you use this modular pub/sub pattern without polluting the global space?

  45. gskema
    June 2, 2017 at 11:19

    Wow didn't know about this pattern! Definitely gonna use. P.S. pro tip: don't use === when checking typeof 🙂

  46. b4rnaby
    June 2, 2017 at 11:19

    Another great video. Can you share your dev setup? Looks like node/express with static file route?

Leave A Comment

You must be logged in to post a comment.