Modular Javascript #5 - PubSub Implementation

Let's take the pubsub pattern that we learned from the last video and integrate it with a few other JS modules. The result will be 2 modules that are very loosely coupled to other modules.

This loose coupling will allow the application to grow significantly larger without encountering problems.

And here's all the HTML/CSS/JS on CodePen:

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

[timothyho]

Hi! I'm a new computer science student at UT Austin, and I just want to say thank you for making these videos. I've never programmed before but following your videos have taught me a lot. Please keep it up!

[hemantajax]

more than awesome teaching style, loved it, so far it was too difficult for me to understand js pattern, u made it peace of cake. thank you so much, looking for almost anything you going to post

[PS-dpyg]

Great videos!!! I love your series on this. Hopefully, in the future, you will cover more JS design patterns.

[jamespwolpert]

Any interest in diving into Angular 2 in the near future? Would love to hear your thoughts on it.

[SillyPunkD]

Great series, just started working as junior front-end developer, this has helped me understand a lot of features people use in the company, and how to interact with them. Only difference is they use an App module to keep all their modules hidden from public, so we can App.get('People').setPeople() instead of People.setPeople().

[jaz]

Loving these modular javascript videos! Learning so much! Thanks a lot! :)

[eightLives_forever]

Best I have seen for PubSub! But what if the subscriber handlers each need a different argument? Say, if one subsciber handler needs an argument of a number to complete its task and another needs an argument or a string? Maybe the second handler needs more arguments than the first. What then? In this example all of the subscribers handlers would be using the same argument.

[awpq]

This is so helpful. Thank you. Please do another pattern!

[NA-fjsj]

Great series on modular js. But I am wondering why events.emit("peopleChanged", people.length) ins't being put into addPerson and deletePerson separately, which seems more natural/intuitive to me than putting it once into the _render() method (around 1:15)

[gbbarn]

I'm confused, isn't this supposed to be the observer pattern? I'm new, so idk. What's the difference between the observer and the pubsub?

[elland]

Excellent course. Really well explained. Thanks.

[imrannazir]

Considering this line: events.on('peopleChanged, setPeople); what are the mechanics behind how the emit function can actually call the setPeople method inside the stats module, since it has been wrapped in an IIFE; rendering everything inside private.

Could the answer be that what this line of code actually does is to pass a reference i.e a pointer to its internal scope to the events object, where it is stored and that how it can execute and be called in the right context. Is any of this correct?

[troooooper]

Question: how do you implement logic into this.If event can trigger other events, and there are lots of events. You can't really keep track of whats happening per event. Is there a diagram you could make to draw out all events. Publisher -> Listeners. Chart.

[mrt]

+LearnCode.academy I have a question, How would you emit/sub/pub events without using a global object, e.g. say you are using modules --> import x from "x-module". You have 3 files. file-1 emitting events, file-2 listens to, file-3 pubsub implementation ?

[Oswee]

Thats why i love Kafka, DDD and CQRS. :) Tnx for sharing. Learning frontend there.

[rhpmpp]

Just a question, we should link the modules.js file at the bottom of the index.html... otherwise it couldn't work... is it a good practice?

[phoff]

Hey, I love these videos and surely hope you continue this Modular JS series!!
I have one small question though...
In the first implementation - when you call stats.setpeople directly from people and not via the pubsub - you use stats inside of the people module.
Is it important to have you stats.js included before people.js in your html or how does people.js know the stats variable exists??

[PS-dpyg]

Is there any way that you can share the html and css code? Well, never mind, I just saw the description about your css and html code.

[robertc]

How do you have your Sublime set up so that the tabs are rectangular rather than the chrome-like tabs? I like it a lot more! (Or is it a subtle theme pack?)

[TheSkyMyLove]

Like the the idea of pubsub pattern. I'm just curious that if our app's growing bigger and bigger, would it be hard to find where the event's emitted from? Would it be harder to debug the app?