Angular 2 and Beyond: 7 Framework Highlights You Need to Know
Fresh from the much-anticipated release of Angular 2 last September, we were joined by Jules, Stephen, and Rob from Google's Angular team to answer questions from our community about the release of Angular 2. We talked about everything from migrating Angular 1.x apps, next steps for ng 2, Angular Material, Angular CLI to the team's favorite Angular 2 features.
As of writing this post, there are already reports about a possible March 2017 release for Angular 3. But for now, here are important things you need to know about Angular 2. Read the highlights of the Q&A session below or watch the full recording at the bottom of this post.
Speaker info: Developer Advocates for the Angular Team – Jules Kremer, Stephen Fluin, and Rob Wormald
1. Angular 2 is a total framework rewrite, but Angular 1 will still be around.
Codementor: How do you see adoption happening among existing users? Do you expect it to completely replace Angular 1 down the line?
Jules: So, it's an interesting question that we as developer advocates, when we look at how we determine success for our team and our individual roles, we sort of think, well, how's adoption? What are the numbers? The unfortunate truth is we don't really have a lot of metrics that can give us a really clear view of adoption. That's in part because depending on how you are using Angular 2, for example, we may or may not even be able to determine if you were using Angular 2 when your website was created.
Secondarily, a lot of Angular usages is not just public websites, a lot of it is internal business apps that we have no visibility into. So traditionally, we’ve used the number of 30-day actives to our docs site, to the angular.io/docs or angular/docs site. I think Brad mentioned yesterday that they were up around 700,000 for Angular 2 and at AngularConnect, there was about 1.2m on Angular 1. How many of the Angular 2 users are new, greenfield and how many are Angular 1 migrating over, we can't be sure, but those are the numbers we primarily used to estimate Angular usage.
And the second question you asked was if we think Angular 2 will eventually completely replace Angular 1. I hope so, just so that we can continue to make Angular 2 awesome, but we will of course support Angular 1 as long as the majority of our developers are still there.
Rob: And it’s not going to go away anytime soon. Angular 1 will be around forever, as Backbone and jQuery and everything else is still around.
2. Performance and Tooling Improvements: Big or small projects, Angular 2 is better than Angular 1
Codementor: What are the incentives to move from Angular 1 to Angular 2 if a developer is focusing on relatively simple apps that aren't going to be built at an enterprise level?
Rob: For me, there are a couple of things. I think this applies whether you are an indie, independent developer, or a big organization of 5000 people. I think that the two biggest things are performance and tooling. I think those are the two things that we talk about the most. So performance, obviously Angular 2 is going to be significantly faster in pretty much all cases, and I think that's good for everybody. One of the things that we found with tooling, though, [are] things like having TypeScript, having auto-completion, and having type checking in the templates, all these things are great, especially if you're an indie developer. It makes it easy to learn the framework, makes it easier to check your errors. It makes the whole thing easier to work with. So, I think probably just performance and general usability, I think, are the two biggest takes for any Angular developer.
Stephen: Yeah, I was actually starting a new project this weekend, just a small website that I wanted to build to help a friend out. I started doing it in Angular 1, thinking, "Oh, I'm gonna go back to the easy way of doing things." But what ended up happening was I wanted a bunch of things. I wanted to use TypeScript, I wanted to minify my bundles, I wanted to just kind of ship this very small sleek JavaScript. And it was actually harder to do that in Angular 1 than it was in Angular 2, because what we have done in Angular 2 is we reacted and responded to the evolution of the web platform. So Angular 2 is actually a simpler framework. It takes advantage of things like module loading, and it allows you to take advantage of the best of the web as it is in 2016 and beyond.
3. The best way to learn Angular 2? Read the docs!
Codementor: Speaking of moving to Angular 2, are there any tips or best practices that you would like to share for migrating apps from Angular 1 to Angular 2?
Rob: I think if you haven't done our tutorial on the website, that's a really awesome place to start. The docs team has done a huge amount of work on really taking you through the story of building Angular 1 or an Angular 2 application. I think that' a really good place to start. They’re quite conscious in that, talk about if you're an Angular 1 developer and you do things this way, this is how they work in Angular 2. That's a really good place to start, and then, of course, all the partners we work with. People are writing really good blogs and posts and all these different things. I think our docs are always a really good place to start because we put a huge amount of effort into making them approachable to people.
(Read related Angular 2 tutorials: Migrating from Angular 1.x to Angular 2: Upgrade Strategies, Build Custom Directives in Angular 2, How to Use Resolve in Angular 2 Routes)
4. Performance and usability improvements made Angular 2 closer to React than Angular 1
Codementor: Let's go back to comparing Angular 2 and Angular 1. So in terms of performance, how would you say that it compares, and what helped make Angular 2 faster?
Rob: I think the number we quote in general is around 4 or 5x in most cases, for rendering things like lists, they’re 4 or 5 times faster to render. “How do we do that?” is a complicated question. There are a number of different things. One of the big things is the way we do change detection now, which is kind of the biggest internal change from Angular 1 and Angular 2. It's one way, so if you’ve used React, it's closer to how React does it than how Angular 1 does it. That gives us some really nice guarantees when we're doing things like change detection, we can say we're going to run this once. We have a lot more understanding of what's happening inside the application. Additionally, you got more control, so if there are places you want to turn off, change detection, or if there are places you want to do it incrementally, you can do that.
I think in general the code generation that we're doing, what we're actually doing with Angular 2 is that you write a template, and we turn that into instructions. That kind of engineering is probably under the hood and what made the biggest difference in terms of performance. Again, five years of learning, that’s another thing, you build a framework once, you see how everybody uses it, and then when you get to rebuilt it — you can really understand patterns that people are using and where we can optimize these different things.
Stephen: There were a few areas or ways in Angular 1 that you can kind of shoot yourself in the foot, so to say. Where if you had 1000 expressions bound on a page or 10,000 expressions bound on a page, and the evaluation of one of the expressions changed something somewhere else, you would end up running this digest loop over and over and over until things stabilized, which took a ton of CPU and was very slow. In Angular 2, there is this kind of one-directional change detection, means that there is no way for you to shoot yourself in the foot in that way anymore, which is very helpful.
Rob: And when you do shoot yourself in the foot, Angular 2 will throw warnings at you that say, "Hey you're doing something that is likely to shoot yourself in the foot, so don't do that!"
And that’s something we couldn't do in Angular 1, we can in Angular 2 and to the next generation.
(Read more about this topic: React vs Angular 2: Comparison Guide for Beginners)
5. Pro tip: do early testing and take advantage of Angular 2’s lazy loading
Codementor: Lucas, who is watching, asked about advice and tips for beginning a large project. So do you have any best practices, anti-patterns that you could talk about?
Rob: Lots of testing, early. That's the thing you see as the number one anti-pattern, people don’t do testing. So, any large project, the more tests you write, the earlier you write them, the easier life gets for the rest of your project.
Stephen: Another one, jump in here, is lazy loading. With the use of ng-modules, it's really easy to say, hey, all of this code from my admin section of my website or all this code from my check out workflow, I don't need any of that code until a user starts doing those actions. And so it's very nice to modularize your application, and then we only need to load the parts of it that you need. We take those out of critical paths, so you’re not having to load all of the function that your user might ever do as part of the first initial load. Then, when you combine that lazy loading with things like optimistic module loading, or eager lazy loading, we can actually take those things out of the critical path and keep them modularized and separate from a development maintainability standpoint, but then also have them already on the user's' computer before they try and navigate to those routes.
6. Expect an even faster and smaller Angular 3 in 2017
Codementor: Could you also tell us what we can expect next for Angular 2?
Rob: So, we're having that meeting right now. It's kind of what we've been doing this week. Everybody is in a room right now, very much talking about what are the features each --- so Angular is divided into teams. We have the core engineering team, the TypeScript team, the DevRel team, the Material team. So all those teams right now are talking about what do we want to do over the next six months.
The big one from the core team is performance. So Angular 2 is very fast today and very small, but because they're mad scientists, the core team think that they can go even faster, even smaller, so that's what they'll be focusing on the next six months or so. Material’s going to be focusing on Material obviously. I think Stephen and I will be focusing on demos and docs and getting out there and talking about it. The mobile team is starting to, that's where the really more interesting outer projects start to ramp up, so things like mobile, CLI, Universal, and all this stuff, we'll start to see them over the next six months really finalized and do more interesting things, because the core of Angular is done, and that was what they were waiting on. So now that the core of Angular is done, these interesting side projects can start speeding up.
7. Lazy loading, swappable renders, and other features — do more things outside of just web browsers with Angular 2
Codementor: I just have a last question from our team. We just wanted to know what was your personal favorite feature that made it into this release?
Rob: I think probably lazy loading, the router, and lazy loading. If you know the history of Angular 2, the router has been really hard. It's something that took us awhile to get right, took us a couple iterations to get right. But I am super, super stoked about where it landed. I think that it's just incredible. It's super easy to use, and the stuff that we do today, we can do lazy loading and as Stephen said, optimistic preloading all that good stuff, and that's just the beginning, right? I think there's a huge amount we could do. So the router, for me, is probably the coolest feature.
Stephen: I would actually agree with Rob. Lazy loading has been this dream for years, where it’s like oh yeah, only load the code you need when you need it, but it's been a virtual impossibility for me as a developer to do that because it's just a ton of work. And the fact that the framework kind of just take care of it now, with our Webpack plug-in where it'll split your bundle appropriately and things like that. It kind of blew my mind, and it still blows my mind every day, the fact that this just works.
Rob: I wrote that code, and it still blows my mind.
Jules: So I said this at Angular Connect in the keynote, and I remember the day that I found my favorite feature. I was pretty new to the Angular Team, and I kept coming in on Mondays after writing code. It was the first time I'd actually succeeded in actually rendering an app, and I was all excited. And Igor said, "You know that you don't just have to render to HTML," and I said, "Well, what do you mean?"
And he pointed me to Matias’, who is one of our engineers’, blog post about how Angular 2 has swappable renders. This excited me, probably not as exciting for Rob or Stephen, but I used to be a back-end, server-side developer. So a lot of what I've done in my past is not necessarily from web browser perspective, so I was super stoked to hear that Angular 2 is flexible enough that we can render where there is no DOM. We've done some projects, like Drupal. With things like that, where we can actually do things outside of just web browsers, so that's my favorite feature
