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
46 responses to “Modular Javascript #4 – PubSub Javascript Design Pattern”
Very good tutorial ,
thanks!!!!!!
ƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃƪ(˘⌣˘)┐ ƪ(˘⌣˘)ʃ ┌(˘⌣˘)ʃ
what is sublime scheme here
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!
code is not visible
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!
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.
So powerful and yet so simple tool, very cool.
Awesome video!!!! So clear and useful!!
Here is my like, and here is my 'Thank You Sr.'
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?
thanks a lot ! it just slove my ui logic ,and I learned how to writing ui logic in a new way ! thanks again!!
So you're saying that we basically set people to fire whenever they changed? Awesome!
Very well delivered, intriguing to follow. Casual at the same time. Thank you.
I can't see the pubsub.js script, the screen is being shaded, or is the code available somewhere else?
I wonder what would be going through the mind of that person who hit the Dislike button 😀
Your voice sound like Mismag822 doing JavaScript tutorial videos.
Love ya for this great tutorial. Keep it up bud!!!
Your vids…. <3…on point… Thank you!
Thank you, this series is exactly what i needed
awesome!
Excellent channel…suscribed
i shouldve watched this before messing with socket.io
Awesome courses!!!
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?
Really useful.
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?
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.
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?
You rock!
thanks
When loading in the stylesheets, do you put the stats.js file first??
You are awesome! Love your videos that taught me lot. Really thank you!
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!
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.
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!
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();
That is awesome… really great, simplest and non-confusing tutorial ever I have seen over pub-sub pattern.. ! 🙂
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.
thanks alot, this has opened alot for me so far
the volume doesn't work in any video of tyhe series. in other videos yes. only in this series doesn't work
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?
Angularjs has $broadcast to do the same 🙂
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
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?
Wow didn't know about this pattern! Definitely gonna use. P.S. pro tip: don't use === when checking typeof 🙂
Another great video. Can you share your dev setup? Looks like node/express with static file route?