This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Why Angular 2?" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Lukas Ruebbelke: First and foremost, why Angular 2? I mean, why are we here? Why has our friends driven down in a government issued SUV to come spend three days to hang out with Scott and I to learn Angular 2? So this is why Angular 2, according to Lucas. Angular 1 obviously is powerful.
[00:00:31] People have built a lot of applications. There are also some not so savory things that I've seen a lot of people, myself included, kind of ping myself on the corner, so I'll just use myself, for instance, of I've kinda went down the path of this anti-pattern, and now it's going to be a lot of pain to get out of it.
[00:00:54] In Angular 2, they've taken the kind of the best practices of Angular 1, and they've distilled it into Angular 2. Mainly, the component, and so I'm gonna get ahead of myself because I can't help it, but when we first started Angular 1, it was kind of this hello world, and you had a controller and a template.
[00:01:14] Or in some cases, not even a controller, you would just use ng init. But you had a small controller and a small template. Then you started to get ambitious, and then like, well, wouldn't it be nice to do this or this? And so your controller started to grow, your templates started to grow.
[00:01:32] And then it was time to get realistic, and you realized that now I've got this controller that's 1,200 Ryans long, and I've got this template that's 1,200 Ryans long. It's not really maintainable. It's hard for the team to work on. And everything just kind of collapsed. So there was this very kind of distinct moment within kind of the first six to eight months of Angular coming out, where people started to realize like you can't put everything in a controller.
[00:02:00] Like that's no good. So there where two sane approaches that came from that. So the first one was to use UI router and to break up this controller template into smaller pieces, distinct pieces that fit into a kind of named state. The second approach was to build out directives, so then start to say well, I have this thing, but I can take this.
[00:02:23] And I can turn this into a directive, and you still have your template controller pair. But it's much more granular, and it's starting to compose it. And so when I do Angular 1 now, it's in ES 6, and I break everything out in these small, really fine grained components.
[00:02:40] And so even with Angular 1.5, they've introduced module doc component, and they're moving in that direction. With Angular 2, you get that small fine grained template controller kind of pair baked right into it, the framework is designed for you to put your application together in that manner. Secondly, by focusing on standards, we get twice the power with half the framework.
[00:03:08] And so we'll get into this with templates, but you'll notice that we've introduced a new kind of syntax for templates and binding that's a little weird. But by binding to kind of native dom events, we no longer have to shift with 67 kind of built in Angular directives.
[00:03:28] And so now, the Angular footprint has just gotten a lot smaller, and you just have to learn a few variations of the binding. And you let the native dom do a lot of the work, as well as with classes, for instance, by leveraging those. And then with typescript then, you're kind of offloading a lot of like the hard work to other things that are better suited for it.
[00:03:51] As well as dramatically improved changed detection is, it's profound compared to Angular 1 how fast Angular 2 is. As well as they're really focusing on speed and performance. And so by speed, I mean how fast does it actually load? So they're really working hard on trimming down the payload.
[00:04:13] And so Brad was on Ventures and Angular not too long ago, and he said Angular 2 for the most part is ready for production. But we haven't optimized the payload, and so that's only going to get better. Performance is how fast does, when somebody does something, how fast does it take to render it?
[00:04:32] And the change detection strategy that moves towards this reactive mechanisms and the immutable data objects just makes that blazingly fast. And so my favorite thing is and I put a big heart icon here is reactive mechanisms baked right into the framework with observables and the way the change detection that comes.
[00:04:54] That's baked into Angular 2 at an atomic level, is you can make a change in one place, and it just automatically, your entire application just reacts. And it renders, it's really, really cool. We'll get into that quite in depth on Friday. And I think also, it goes without saying, teamwork, that the Angular community has actually established some really good relationships with people from other projects.
[00:05:18] So they have a good relationship with the React team, the Ember team, the TypeScript team. And they're taking a lot of those ideas from these other teams and applying it to Angular 2. So, React has definitely affected how Angular developers think about change detection, managing state, and unidirectional data flow and these things.
[00:05:40] Ember has done a really good job of influencing the CLI, TypeScript, I can't say enough good things about them. But I think just the spirit of camaraderie, I've noticed that a lot of the rhetoric around which framework is better was pretty rampant two years ago. It seems that everything has kind of died down, and everybody is realizing, hey, there's a lot of room at the table.
[00:05:59] And everybody can build their frameworks, and we can learn from each other, and we can get along, which I think is great.