Component-Based Architecture in AngularJS 1.x and ES6 What are Components?

[00:00:00]
>> [MUSIC]

[00:00:39]
>> Scott: So, super stoked to be here. Teaching at Frontend Masters. As a student or really like what Frontend Masters is doing and being an instructor here it is even just makes me feel better. So I'm also excited cuz I get to teach something I'm really passionate about and that's just the future of JavaScript in general.

[00:00:57] So we're going to be talking about today is just going to be getting started with ES2015 now and Angular 1.x with like a component approach. So before we dive in, a little bit about me, I'm an engineer at Udacity in Mountain View, California. So I do a lot of front-end there.

[00:01:17] On my free time, I do things like this. I do training, I talk at conferences and stuff like that because this it's just what I like to do. I go and volunteer at schools and teach people how to program, and stuff like that. Because I'm just really passionate about it because that's pretty much how I learn, is that way.

[00:01:33] So that's what I do on my free time and I can't think of anything else that I would like to do, other than maybe going to the gym or something, I don't know. But, yeah I love teaching people to program, because it makes me learn a lot better, a lot faster, and it's a lot more solid for me that way.

[00:01:50] So, let's get right into it. So, if you don't have this repo already. If you haven't pulled it out and looked at it, I'm just gonna, there it is. Go ahead and fork or clone or whatever your process is for that repo. And go ahead and pull it down.

[00:02:09] And then this is the link to the actual. So I don't like slides. I just can't do slides anymore. So what I did was I just like made a static site with all the content of the slides that I had, and I put it on the site instead.

[00:02:24] So I can scroll and not have to go through slides. So, cuz we all like scrolling, right? So, meet me here and this is where we'll go through the notes and stuff. Sweet. So let's get started so, yes?
>> Speaker 2: What's that link?
>> Scott: Yeah, sorry about that.
>> Speaker 3: We have the link posted in the chat, yeah.

[00:02:43]
>> Speaker 4: All links are posted in the chat.
>> Speaker 3: Oops.
>> Scott: Yeah, all the links should be in the chat, yeah.
>> Scott: Great. So if you see typos in here, that's fine. Let me know, I'm really bad at spelling. [LAUGH] I say it every time I give a talk, so if you see typos, just let me know.

[00:03:05] I won't feel bad, trust me. Sweet, so let's get started. What are these components, right, we're talking about building Angular 1.X with components. Does anybody know what I mean by that? Wait, don't read this. You know what, don't even look at it. Yes.
>> Speaker 4: You want me explain it.

[00:03:27] So components are like small bits of your front end that you compose together to create your app. They're, a concept that's being thrown around a lot in the new router to kind of an Angular 2 they're kind of as a replacement of sorts for directives. And they're basically just bits of linked HTML in JavaScript, is that a reasonable explanation?

[00:03:58]
>> Scott: Yeah it's a loosely used term to describe bits of functionality in our application that come together and compose an application. Hence the name components, because they're composable. So the component approach in Angular is simple. So basically we're gonna be removing like, the way we use to write Angular 1.x was like we have our controllers and they're bound to like these views.

[00:04:21] We're just gonna get rid of that, we're just not gonna do that anymore. So if you're not gonna have standalone controllers bound to some template somewhere, we're gonna load it up with UI router or whatever router you use. We're just gonna get rid of that and instead what we're gonna do is we're going to start with the directive, all right?

[00:04:35] And a directive are gonna be treated like first class citizens. They're gonna be our our entry point for our controllers and our views now. And along with other pieces of functionality, we'll be able to create a component, and these components are gonna allow us to have better flexibility, reusability.

[00:04:55] We can share these components. I can take it from my application and stick in your application and it should work the same if we have the same built system and dependencies and stuff like that. And it's really great for better organization and collaboration with teams and stuff. Because you can have different people working on different components without conflicting each other or waiting on each other.

[00:05:15] So it's a little a bit easier there. So any questions on that? So it's very loose, this is not web components, all right. So it's not like, we're not gonna be here building Shattle Down and Polymer and X-Tags and all that stuff. So this is not web components but the concept is very much the same.

[00:05:37] All right, so it's a very loosely used term. Although web components do adopt the same principle with like a extra feature of CSS closure, which we don't have with this. So components in Angular. That doesn't mean web components, like I just said. Since when I wrote this proposal for this course it was ES 6 and now it's ES 2015.

[00:06:00] So you'll see that you see me use those words interchangeably. Probably ES 2015 is the name for it now but it used to be ES 6 so now it's ES 2015 and we'll talk about why that is. So ES 6 2015 makes it really really easy, first to build with components.

[00:06:17] And you'll see why in a minute. We can build with components in ES 5, there's nothing wrong with that. But it's just gonna be a lot of extra work we have to do to get that flow that we really want. And we all know directives, right? Everybody, no [LAUGH] kind of, little bit?

[00:06:35] Well, if you do you know directives then you're like, you're there cuz that's like the hard part in my opinion. Is like just learning directives which everybody knows in Angular 1.x is kind of tough, but if you know directives then you're pretty much already there as far as the approach of building components.

[00:06:51] If you don't know directives, that's fine. I'm gonna show you how to like use the directives and a way of using components. We're not gonna get into like advanced drag and drop physics directly. We're not gonna do all that stuff. But, I will show you what a directive looks like as a entry point for a component.