This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "The Benefits of Angular 2" Lesson
[00:00:00]
>> Lukas Ruebbelke: Let's go into the big picture. So, this is the equivalent of a table of contents for Angular 2. And unfortunately Mark changed his business model, so this joke doesn't work anymore, but this is kind of the, I tell people, if you're going to come to the workshop.
[00:00:19] And you're gonna space out for the entire workshop. So, your boss is making you come, you don't wanna be here. Pay attention to this module, because then when they say, how did the workshop go? You just have to recite what you heard here, and you'll sound smart and like you're giving them a good return on their investment.
[00:00:40] Also the reason why I've done, I've kind of front loaded this particular module is, because when I get the slides that this serves as a good reference point. So, first and foremost let's talk about Angular 2, so this is why Angular 2 according to Lukas. These are the things that I really, really.
[00:01:01] Like about Angular 2. So, I was doing Angular 1.x at 0.9, so I don't know how many people remember, but there was actually this really horrible yellow, and purple website when Angular 1 first came out. And it actually wasn't even Angular 1 at the time, it was 0.9.
[00:01:19] And there was this huge learning curve over the last three, and four years of people learning how to build large scale web applications in Angular without hurting somebody, or putting somebody in the hospital. Well, some patterns begin to emerge is we begin to learn. And the Angular 2 team, or the Angular team said, let's take this best practices, and let's just make these essentially the thing in Angular 2.
[00:01:50] So, the framework just encourages you to basically adopt the best practices that we learn from Angular 1 as well as we even pulled in best practices from even other frameworks. So, the fact that we're using the Angular CLI, well, that comes from a collaboration with the Amber CLI, so super awesome.
[00:02:13] Even the component driven architecture that we have right now with container components, presentation components, and the way that we think about even data flow in our application, well, that comes from react. And so, those ideas have been not only imported into Angular 1.x, but they're just encouraged by default in Angular 2.
[00:02:35] So, we do not have to go back and relearn those lessons, because Angular 2 just kind of pushes us gently in the right direction. As well as focusing on standards we get the power in half the frame work. So, in Angular dot X, we had a lot of things like NG Clip, NG Submit.
[00:02:57] NG mouse over, NG swipe left, NG this, NG all the things. Well, in Angular 2, we have one completely rewritten the eventing framework, or the way that we handle events, the binding syntax, so that we actually can capture just the dom events that are emitted from the browser and bind to those directly.
[00:03:18] So, the binding syntax has expanded, but as a result, that leverages essentially the browser, and essentially the standards that exist. And from there, the framework, itself, the footprint is a lot smaller, but we get twice the power, because we're just letting the browser, we're letting JavaScript, and essentially, the native things do the work.
[00:03:41] Yes.
>> Speaker 2: So, question from Javier. Are we going to experience cryptic error message as Angular 1 had? If so, are we going to learn some patterns to identify those error messages?
>> Lukas Ruebbelke: So, the Angular team is, the answer is maybe. So, the Angular team has actually put a lot of work into making the error messages in Angular 2 a lot better.
[00:04:07] So, one, by using TypeScript, that you already get pretty good error messages. So, if you do something wrong. And TypeScript doesn't like it, then it's going to catch that. Is well as they're most of the time, I find them to be pretty helpful, the error messages. Where it gets totally wonky for disclosure is if you run into like something that involves zone Js.
[00:04:33] And that is kind of a zone Js error, I think, it's like, zone, zone, zone, zone, zone, zone, zone, zone, zone, zone, zone all the way down. You're like, I don't even know what happened here. So, the error messages are much better, and we will get helpful tips on how to handle those as I throw them in my demonstrations unintentionally, because they will happen.
[00:04:55] So, their messages are better, it's something that they're taking very seriously. They were super bad in Angular 1. Actually, they're better now, but they were really, really, really bad two and three years ago. So, dramatically improved changed detection. So, this was actually, I think, one of the biggest, I think, this was the Achilles heel in Angular 1.
[00:05:17] And I think, in most cases Angular 1 performance was not an issue, but it was an easy target, and it was really easy to put Angular 1 changed detection in to kind of a non-performant state. Well, they've completely redone changed detection Angular 2, and it's much, much faster.
[00:05:37] And it's a lot simpler to reason in the sense of that it just kind of works behind the scenes, and you don't have to worry about it. But it's much faster, and not only the change detach being faster, Angular 2 is really focused on speed and performance. So, how fast the application loads.
[00:05:55] So, for instance, with ahead of time compilation. That in a focus on basing mobile that the applications, they want the footprint to be super small and the apps will look like this, but as well as the application is running, it continues to be performant. And so, there's a lot of cycles going into how do we do large applications that are fast.
[00:06:16] And they perform well. When I say relentless this is pretty much like something they've just spent hours, and hours, and hours on trying to make this as fast as possible. So, this is my favorite reactive mechanisms baked right into the frame work. And so, what I mean by this is when you have, a piece of data and it changes.
[00:06:37] Well, how did you communicate that communicate that to the rest of your application? Well, so that's a real challenge. Especially if you have a piece of data that is shared by more than one thing. So, if you have two components with a single piece of data that this changes, or one changes it here, how do you communicate it over here?
[00:06:55] So. Angular 2 is built with absorbables, or full support absorbables, which is completely awesome. And what this allows you to do is when something changes, you can communicate that to your application into your components in so much, even right into your templates, and the state changes go right into your templates for it to render.
[00:07:16] So, we'll see some more of this tomorrow, but also in the Reactive workshop. This is a game changer in terms of minimizing state, code volume, and flow control within your application. And finally, team work. So, if you remember two, three, four years ago, the rhetoric around frameworks was really I want to say toxic.
[00:07:41] There was a lot of, this framework is better than this one, this framework's dad is going to beat up your framework's dad, and I think, it's not just helpful. And we're starting to see kind of this convergence of people realizing that 'Hey, we can work on a framework, you can work on a framework, we can share ideas and we can propel The web forward.
[00:08:01] Because when one framework wins, I think, everybody wins. And more importantly it's not about frameworks winning, it's about developers winning. And I think, to get into this whole framework for this framework, I think, it's myopic, that ultimately you want to write put tools in developers hands that help them create things that matter, faster.
[00:08:21] And so, again, the Angular CLI came from a collaboration with the Amber CLI. So, the thought of, honestly, Angular and Amber team working together, three years ago, [SOUND]. I mean, that was a gang fight waiting to happen. Well, not really, but it was a little tense, and there's a lot of, I think, negative rhetoric in Twitter, whatever.
[00:08:45] But even the Angular team working with the React team in talking, and sharing ideas, and I think, it's fantastic.