This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Component Comparison" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott Moss: Some mentions. There was some stuff that I saw, some feedback that other people wanted to compare and see what's out there, and how we learn how to do components, and how other frameworks are doing components. So I added this in. So I'll just squeeze this one in here.
[00:00:19] So below are some comparisons of components in Angular 1.x and other frameworks technologies. So, there's just some code samples of how they look. Angular 2 uses decorators with typescript, so that's why I told you about decorators extensively to create components. Although there exists an API to use Angular 2 without typescript.
[00:00:39] So if you wanna use ES5 or ES2005, you can use that. You don't have to use typescript. But most of documentation of the entire script. So this is how it will look in Angular 2. Something like this. You have like @Component director, your selector that's like your directive name.
[00:00:54] You have your template. And then you have your class and then you're done, that's a component.
>> Scott Moss: Pretty simple, compared to what we're doing now, this is pretty simple all right.
>> Speaker 2: Yeah.
>> Scott Moss: It's almost like too easy. So that's Angular 2, you can actually start playing with it now and using it if you want to.
[00:01:19] Anybody here have experience with React? You got a little bit. A little bit. Okay, so, React is just a component library that takes a different approach. Allowing us to create lifecycle hooks or allowing us to access lifecycle hooks into our components. So, if you ever develop with Android or Java or some like that, very similar to that where it's just like you have some some living state in your application and there are these hooks that you get to access at different points in time during the applications transition through the environment.
[00:01:50] So almost like database stuff, too. So React allows us to access that on our components. Like when this component starts, before it does this, after it's done with this, we get these callbacks to do different things when it's happening. React uses JSX, which is a way to write XML like HTML in our JavaScript.
[00:02:08] So this is how a component will look in React with the new ES2015 syntax. So you have a component that extends React.Component. And you get some properties, and then you set your state here. Or if you using Flux, you set it somewhere else and you get this render method that returns this.
[00:02:28] This is JSX right here, so this is not a stream. This is actually JSX. And then you get access to state this.state.greeting. So this is React. This is a component in React
>> Scott Moss: And the last one is Polymer. So Polymer is a framework that sits on top of web components.
[00:02:51]
>> Scott Moss: And adds polyfills and creates awesome APIs and makes things easier. So Polymer itself is not web component. It's a framework that sits on top of the web component standard, which you can use right now. You don't need a framework for it, you can just use it. So this is how you would do it in Polymer.
[00:03:08] Or this is how you would make components in Polymer. And this is their new 1.0 API. It just came out a month ago.
>> Scott Moss: So they're actually using the spec. They are using this template tag which is part of the HTML5 web components spec and stuff like that.
[00:03:28] And then this is just how they do things. You can also come in here and add a style tag and write your CSS in here, too. So, this is where and this is the HTML file by the way. So, you're writing your HTML, your JavaScript and your CSS in the HTML file.
[00:03:45]
>> Speaker 2: It's self contained, you said yesterday, CSS is-
>> Scott Moss: Yep.
>> Speaker 2: It's not seen outside of the-
>> Scott Moss: Yeah, it's not seen outside. It's self contained and then the way you would, because this is a written in a HTML file. There's this thing called HTML imports where you can import other HTML files into other HTML files.
[00:04:01] So that's how that will work, yeah.
>> Speaker 3: Do you think any framework is doing this the best right now?
>> Scott Moss: Well, it doesn't really exist too many web components frameworks. Polymer is by far the most robust and has the most features but there are some other frameworks out there.
[00:04:17] I can't remember, I don't know I can't top of my head but there are some other web component frameworks out there that are doing really good. But as far as just componets, in my opinion, as of what you could use right now, I think React does a great job as far as components.
[00:04:32] But Angular 2 comes out, the simplicity here is just to me just seems so simple.
>> Speaker 4: Xtext.
>> Scott Moss: Xtext, wow, I couldn't think of that.
>> Speaker 4: I know it's not a big one.
>> Scott Moss: Yeah, X-tag's another big one. That one's really big, X-tag is like Polymer and they have a whole bunch of components and stuff.
[00:04:48] But yeah, I think React probably is the simplest one right now, but stuff is changing. Polymer looks promising. I haven't really dove into 1.0 yet. I gave it a try before 1.0 and it just scared me away, so I want to try it again and see what happens.
[00:05:04] In Angular 2, or Angular 1 is awesome but as you can see,you have to write a lot of stuff. So that's why hence the big change in Angular 2. But I've had some good experience with React, pretty fun.
>> Scott Moss: Any questions on any of this stuff right here as far as like what components look like in other frameworks?
[00:05:22] There are frameworks that adopt components as well. I think the Ember is doing it now. Hm, a really no, it really doesn't really do components. But you can, I guess, if you, it really does let you use web components though, so I guess you could. So yeah there are those other notable mentions but I just want to give you guys a taste of like what we're doing here looks like in other frameworks so you have something to compare it to.
[00:05:49]
>> Speaker 5: Yes, I'm certain like that, but what I've been seeing so far, we're talking about Angular 1 components. They're application components as opposed to like components or something like that, right?
>> Scott Moss: Right, yeah, it's loosely used but yeah, we've been talking mainly about application but that's because Angular itself is an application framework.
[00:06:14] Whereas React this is just like a UI framework almost. It's like mixing components but there are things you can tie into React that'll make it application. So I just didn't feel like writing all that stuff. So yeah Angular, the other reason that Angular just got a little more overhead is because it is an actual framework.
[00:06:31] Where is like React and Polymer, they're just like UI. Stuff for UI. They're not really like a full complete framework. They don't like have like routing and all that other stuff. You have to get that from somewhere else, yep. Is wondering what your take is on the churn rate on the JavaScript ecosystem and just the sheer volume of new things coming out.
[00:06:54]
>> Speaker 6: Do you have any tips for keeping up with all this stuff besides all the wonderful stuff that Mark does?
>> Scott Moss: Yeah, it's nuts. I mean really is nuts. You can't really keep up with all the stuff. But it's a serious thing you have to stay current, you have to stay, I mean you can't just fall all the way behind, unless you have a really good excuse.
[00:07:16] But the way I do it is, I have three rules on how to learn something new and when to learn something new. And it's like one, how trending is it. If I look on Google Trends and I see that it's going up, I keep my eye on it.
[00:07:29] And if there's a lot of blog posts about it or stuff like that, a lot of chatter about it. Two is how practical is it, is this thing going to give me a job? Are people hiring for this? I'm not going to go learn something that nobody's using.
[00:07:44] And then three, how scared of it am I? So if I'm very scared of it, I'll probably wanna learn it. So if it hits all three of those things, I'll drop everything and learn it now. If it's two of those things, I'll add it to my list. If it's one, I'll remember it.
[00:07:59] But if it is none, I just forget about it. So that's usually what I do because otherwise, you'd just be like what? What am I supposed to do? So there's so many things and how do you predict what's going to be hot and what's not? So I just follow those rules and it has been working out for me so far.
[00:08:13]
>> Speaker 7: What do you mean scared?
>> Scott Moss: For instance, some things are just frightening because they look so new, like ES2015. The first time I saw it I was like I don't know, man. I didn't like it at first. I was learning Swift at the time and I was like this doesn't.
[00:08:26] I don't know. I don't really like this anymore. I don't know if I want to use this. I'm gonna go back to CoffeeScript. So I was kind of scared of it but then that made me want to learn more. So just things that just look brand new are somewhat frightening sometimes but I think that's a good excuse to learn it.
[00:08:42]
>> Scott Moss: Any other questions?
>> Speaker 8: When do you find time to do that?
>> Scott Moss: When everybody's sleeping [LAUGH].
>> Speaker 8: [LAUGH] Me too.
>> Scott Moss: That's it. Everybody sleeping, during lunch, sometimes I'll leave the gym and open my computer right at the gym and start working on something. [LAUGH] Just whatever I can.
[00:09:08] At a red light, I don't know. [LAUGH]
>> Speaker 3: At a red light?
>> Scott Moss: [LAUGH] Wherever I can. It's hard. You got to stay current these days. You never know. [LAUGH]