This course contains good reference material, but does not reflect our current quality standards.
Transcript from the "Task #4 - Initializing Modules" Lesson
>> Kyle Simpson: That's not the only place that we can use events. What about our init function? Or manually calling that init function from inside of our our app?
>> Kyle Simpson: What if we took window.event, I actually didn't even need to put that in the jQuery thing cuz it's not related to the DOM at all.
[00:00:24] What if we took this code that's inside of document.ready and instead of calling header.init and carousel.init or whatever. What if we just published an event that people could listen to like, for example, EVT.emit(init), it's a good event name. Now I have absolutely no idea what other modules are on the page.
[00:00:47] I don't care if they're there or not. I'm just gonna throw out the event. And inside of each one of my modules, I don't even need this method to be on a public API anymore. I can leave it there just for simplicity, but it's not even needed anymore.
[00:01:03] Inside of this code, not inside of my init but inside of my module instantiation, I just need to listen for the init event. EVT.on(init), and what function do I call? The init function.
>> Kyle Simpson: One little minute detail here. Now that app.js is creating this variable that the other modules need to know about, app.js definitely needs to be the thing to load before the other modules load, okay.
[00:01:51] So small little detail here, we need to make sure to move app.js up so that it loads and runs before the other modules.
>> Kyle Simpson: Let's test my work, let's see if I got it correct.
>> Kyle Simpson: Question, EVT is kind of a Reactive programming? [SOUND] Reactive programming means a whole other umbrella of stuff, it's event based programming.
[00:02:25] It's called event driven architecture or event oriented architecture. Events are like a small little part of what Reactive programming means. So there's a very, very small tenuous relationship between the two.
>> Kyle Simpson: Okay, my code still works but now it's using events instead of being directly called.
>> Kyle Simpson: Here's my last thing I'm gonna finish up and then we're done.
[00:02:51] I want to show you the power of using these events. Let's open up,
>> Kyle Simpson: One of those details files, let's open up 2.HTML for example. 2.HTML, down here at the bottom I'm going to create a link,
>> Kyle Simpson: Doesn't link to anything specific. It's a link, I'm gonna give it a rel cuz I'm gonna need to listen for,
>> Kyle Simpson: So that's my link that I'm gonna create.
>> Kyle Simpson: Now this is clearly carousel related so let's go into the carousel.
>> Kyle Simpson: Let's set up a click handler for links that look like that. I'll just simply say, I'm sorry not carousel, details related, I meant details. This is the details module so inside of init here, we're going to listen for any click from the content that bubbles up to us from rel equals js-select, did I call it select person?
[00:04:13] Yep, select person.
>> Kyle Simpson: From an element that has that rel attribute and we wanna do something with it. Guess what we wanna do with it?
>> Speaker 2: Build something.
>> Kyle Simpson: Well, if I've selected a person the question is do I wanna load that person so could I call loadPerson here?
[00:04:40] The problem with calling loadPerson here is that loadPerson expects an ID and that ID hasn't been parsed out yet, okay. So let's have it call another function.
>> Kyle Simpson: I'm not using good creative names here, but I'll just call it selectPerson for now.
>> Kyle Simpson: Now his job is to, I meant to put one other thing in the HTML, we need an ID here to let us know what thing it is that we're clicking.
[00:05:14] I could put the ID directly into the rel attribute and then do a little parsing thing. I'm just gonna do it even simpler by adding a data attribute like data-person equals, and let's say we want to load person four.
>> Kyle Simpson: So, evt.target,
>> Kyle Simpson: Is the actual thing that got clicked and it has an attribute on it called data-person.
[00:05:44] And the value there is the ID that we want to load, so that's ID. Everybody following me or am I going too quick? We're parsing out the ID from an attribute on a link that was clicked.
>> Kyle Simpson: So, we could call loadPerson with that ID.
>> Kyle Simpson: Everybody following that?
[00:06:08] One last detail, we gotta put in those preventDefault things so don't wanna forget that.
>> Kyle Simpson: But I'm gonna make the argument that even this code, even though we're calling to our own internal function. I think this code is perhaps a little bit less than ideal. I'm gonna make the argument that what we ought to do is evt.emit,
>> Kyle Simpson: Did I call it select-person? I can't remember.
>> Kyle Simpson: Person-select, I'm sorry.
>> Kyle Simpson: I should probably spend more time not rushing through coming up with better names. All right so the event name was called person-selected, and it needed a piece of data. Now, is that event going to end up calling loadPerson?
[00:07:01] Of course it is cuz we have that event handler set up. But I'm doing it indirectly. Now why would I do it indirectly? Well, what if there was another thing on the page that wanted to listen to this event? Like for example the carousel. What if we wanted the carousel to listen for an event like that.
[00:07:19] And scroll the carousel to the person that was picked and highlight them. If we called load person here that would not accomplish it and we'd have to end up calling out or sending out some other event or calling out to carousel. But if we use the event system here, we don't have to worry about that detail.
[00:07:36] We allow somebody else to observe that event if they care or not observe the event if they don't care.
>> Kyle Simpson: What I'm getting at here is that I have intentionally created this layer of abstraction. And sometimes layers of abstraction are more confusing. This does take a little bit more brainpower from you to think the event's gonna go here, and I gotta listen for it here.
[00:08:02] It's not as obvious, the direct connections. But I'm arguing that there's a bigger point at stake. This is perhaps slightly less obvious code but it's significantly better organized code. Because it's more flexible, it's more testable, it's less brittle. If for some reason the carousel module doesn't exist on your page, there's no reason why the details module can't continue to act the way it should act.
[00:08:32] That's the point I'm making. Let me test myself to make sure I didn't mess something up.
>> Kyle Simpson: I think I need to, sometimes it's hard to get full refreshes here.
>> Kyle Simpson: Am I clicking the wrong guy?
>> Kyle Simpson: 2.html should be that person number three
>> Kyle Simpson: Sorry, just a moment.
[00:09:17] I'm trying to figure out how to get my browser to stop using its cache.
>> Speaker 2: You need to have refresh
>> Kyle Simpson: There we go. All right so I have this select another person link. And when I click it, we're expecting it to load up a different person. And in fact it did, it loaded up person five.
>> Kyle Simpson: Now I didn't do the extra work of having it select the carousel or whatever. In fact, in the read me you'll see I've left that as some extra credit. So if you want to go further with the exercise, we've run out of time for me to do items one and two.
[00:09:55] They're pretty easy and you can see how I did them in the solutions folder. But the major stuff is the stuff that we got to, which is this organization through events.
>> Kyle Simpson: All right, so we're gonna wrap up now but I want to just leave one last space for any last question.
[00:10:14] So let me check the chat room, if anyone here as a question speak up.
>> Kyle Simpson: The question was can you explain again why app.js must come first. App.js creates an object, window.EVT. I don't even need window.EVT here now, I can just do var.EVT. It creates a global object called EVT.
[00:10:36] You'll notice that these modules need it right away. The very first thing they do when they run and define themselves is they need it. So we need to make sure app.js runs first before the header.js module defines itself, that's why. Preserves the native version of an object to consent and receive events, RES observers.
>> Kyle Simpson: [LAUGH] That's way far afield from the thing I'm gonna be able to cover here, Kevin. So yeah, it's probably not even my, yeah, like you mention, it's probably better for Jeffard to answer. But definitely way far afield from what we want to cover here.
>> Kyle Simpson: Okay, any other questions?
[00:12:01] So if you feel overwhelmed or if you feel like you missed some stuff or if you feel like you need to go back over stuff, it's because you do. It's because that's totally natural. We didn't stay at the one month experience level, we progressed quite rapidly, as many of you probably saw.
[00:12:18] The goal here is not that you come away from today already certified, I'm an expert, I got two years' experience in one day. The goal is that you came away with the right sort of stuff to ask, the right sort of stuff to study, the right sort of ways to ask and think about stuff.
[00:12:34] And as you unpack this over the next weeks and months, I want to encourage you strongly to go back to the exercises that we went through and try them fresh. Try them from scratch and see if you can come up with the same solutions that we had in the in the solutions folder.
[00:12:48] That's really the best way to solidify the learning. Go back over your notes and the stuff that we did and and don't let this be the last time you see the material is the point I'm trying to make.