Modular Javascript #4 - PubSub Javascript Design Pattern

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.

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.

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[MarcelRobitaille]

You teach me stuff I didn't even know I wanted to learn.

[tea]

Not many people teach stuff like JS patterns in real life example, others just teach its concept, that's it!.
This is so helpful, and I can easily implement in my own project.

[willyboy]

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.

[edwardsimonvaldez]

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!

[AmanGupta_Dev]

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

[KoeneesKaras]

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

[fire_g]

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

[tmanley]

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.

[CliffStamp]

That was an amazingly clear description of that pattern/usage.

[winnieyoong]

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!

[whiskey]

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!

[arbitraryCharacters]

Yes! Was just digging into this pattern last night. Perfect timing. Thank you!

[GifCoDigital]

Thought id have to wait a bit longer for these! Nice little Thursday afternoon surprise! Cheers Will!

[carlosbenavides]

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

[Zombieskelper]

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()
{

}

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

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

[dice]

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

[mariaklachko]

Oh, sorry -- I see that you have the code in the next video. Thank you, super helpful!!!

[marioua]

So powerful and yet so simple tool, very cool.

[AtacamaHumanoid]

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?

[thebrain]

is this necessary if you use parcel or webpack?