Getting Started with Angular 2
Angular 2 is the shiny new framework that comes with a lot of new concepts. Learn all the great new features.
ng-conf 2016 in Salt Lake City brought a lot of incredible announcements. Approximately 1,500 Angular developers on site (including our own Chris Sevilleja, Holly Lloyd, Ado Kukic, and Ryan Chenkie) and even more all over the world tuned in to see some great talks.
Just like last year, let's recap the announcements and takeaways from this year's ng-conf.
Here's the ng-conf 2016 YouTube playlist or just follow along this article for all of the best ng-conf 2016 had to offer.
Angular 2 RC Launched
On May 3, Angular 2 Release Candidate was released! While this release isn't exactly ng-conf news since it happened exactly one day before the conference started (that Angular Team is always working), it is important news nonetheless.
There were some important changes that you should be aware of for your Angular 2 applications. The biggest are the naming conventions for imports:
angular2/core -> @angular/core angular2/compiler -> @angular/compiler angular2/common -> @angular/common angular2/platform/browser -> @angular/platform-browser + @angular/platform-browser-dynamic angular2/platform/server -> @angular/platform-server angular2/testing -> @angular/core/testing + @angular/compiler/testing + @angular/platform-browser/testing angular2/upgrade -> @angular/upgrade angular2/http -> @angular/http angular2/router -> @angular/router-deprecated new package: @angular/router
Be sure to check out all the changes so you can update your apps accordingly. Now on to the good stuff!
Some Neat Stats
- 1.3m developers use Angular 1
- 360k already use Angular 2. Not bad for a platform that just hit RC.
Angular 1 should be though of as a framework. Angular 2 should be thought of as a platform
Angular 1 had 43 directives. Angular 2 has
CapitalOne, LucidCharts, Kiva, Weather Channel, and more are already using Angular 2 in production
Angular 2 is Lean and Fast
Angular 1 sits at 56K. Angular 2 last week was 170K. The team has optimized a ton and now Angular 2 is an insane 45K.
Talk about lean.
Lazy Loading is Built-In
A big goal the Angular team had was to achieve automatic lazy loading. This ensures our applications only load what is necessary for the current page. Lazy loading is also included when routing our applications.
Rendering is Very Fast
Compared to Angular 1 applications, first render of Angular 2 applications is 2.5 times faster. Re-rendering on changes was 4.2 times faster.
Lucky for us, the Angular team always believes they can do better. Rendering is always 5 times faster now (on first render and re-rendering).
LucidCharts also showed off the improvements they've found by switching to Angular 2:
Angular 2 Has an Official Style Guide
The unofficial/official style guide by John Papa for Angular 1 didn't come around until Angular 1 was already around for a while. This led to a lot of differing styling for tutorials and articles across the web.
For Angular 2, the official style guide is now live.
Angular Material for Angular 2 Makes Building Fast
Angular Material for Angular 2 is looking really good. Building out beautiful material styled applications is very easy with these material components.
See how fast an application can be made (especially when Kara Erickson is typing like lightning).
Angular 2 is Mobile Ready
The Angular Mobile Toolkit will make it easy to build snappy web apps that load instantly on any device, even without an internet connection.
Progressive web apps are very interesting to many web developers out there. Build and reuse the majority of your codebase to create mobile applications with performance that can compare to native mobile apps. The Angular Mobile Toolkit is another step to making this dream a reality.
They built an app that they actually use to handle their GitHub issues called Issue Zero.
Angular 2 is Universal
A big issue with Angular 1 applications was that they could only be rendered in the browser. This means that Angular 1 SEO was not the easiest thing to achieve.
The Angular team decoupled how the Angular 2 web components could be rendered so that that process could take place anywhere, including on the server.
Our Angular apps are even faster for our users now that we can save precious render time in the browser.
The Angular 2 CLI Makes Life Simple
One of my favorite showings was the Angular CLI. To get an Angular 2 app setup takes a lot of steps where a lot of things could go wrong:
- Set up TypeScript and Typings
- Grab all the
<script>tags and throw them into your
- Set up all the
imports for components
- Bootstrap your app
- Use System.js to load the app
The Angular CLI makes setup a simple one line.
ng new scotch-app
To get started with the Angular CLI, all you have to do is:
npm install -g angular-cli ng new scotch-app cd scotch-app ng serve
Just like that, we can have a brand new Angular app ready to go. No Grunt, Gulp, Browserify, or Webpack.
Mike Brocchi does a great job of showing off the many features of the Angular CLI.
Build an App to Get Started
Want to get your feet wet with Angular 2? Let John Papa take you on the Tour of Heroes journey.
TypeScript Provides Lots of Benefits
If you are wary of using TypeScript, give this talk a watch and maybe (probably) it will change your mind:
ng-show: The Follow-Up to Last Year's ng-wat
Poking fun at the Angular team (specifically Brad Green), being spot on about how Angular developers felt while waiting for Angular 2, and much more.
ng-show is a must-watch:
Augury is Angular 2 Debugging at Its Best
Anyone that used Batarangle with Angular 1 knows that the ability to see variables and the state of your application in browser is a great help when developing.
Augury (formerly Batarangle) lets us do exactly that. No need to
console.log() every part of your app, just see the variables, hierarchy, and inheritance in your browser.
This was a really fun presentation, especially when you see the component hierarchy and injector graph.
Firebase and Angular is Magic
w He also built a real-time chat application with Angular 2, Firebase, and AngularFire2 in about 10 minutes. That's a lot of functionality in a short amount of time.
NativeScript Makes Native Apps Easy
While the Angular Mobile Toolkit was focused on building progressive web apps, NativeScript is more interested in building native apps with Angular 2.
What's the big difference you ask? A big one is the animations. Having native animations make things look so smooth.
See how easy it is to build out NativeScript apps with Jen Looper and TJ VanToll:
Testing Will Be Significantly Easier Thanks to Zones
Zone.js is a library for managing asynchronous tasks, a way of controlling execution context. Lot of fancy words, but the main takeaway is that testing will be much easier in Angular 2!
All those asynconous tasks are trackable thanks to zone.js. Julie Ralph can explain and demonstrate much better than I can:
Angular 1 Still Has Life
With 1.3m developers using Angular 1, there's still a lot of life left in ng1. There are plenty of apps out there that are using ng1 and will need maintenance.
With the addition of Angular 1.5, components come front and center. This gives us a mental shift to think more in terms of components. Eventually, when we upgrade to Angular 2, we'll already have the component mindset.
.component defintion helper makes it easy to mimic the way Angular 2 creates components:
Pete Bacon Darwin, the Angular 1.x lead, talks about Angular 1 and components:
We've Been Saying Router Wrong
Pete Bacon Darwin taught us that router is actually pronounced "rooter". What a revelation!
webelieveinyou Angular Team
One of the hashtags that came out of ng-conf was #WeBelieveInYou.
Show your support for the Angular team and tweet out that you believe in them.
ng-conf this year was full of awesome announcements and tons of great live demos. Definitely check out the rest of the videos on the ng-conf YouTube page and get excited about all the Angular 2 apps that you'll get to create this year!
Was awesome to meet everyone that we could out at ng-conf and I hope to see even more of you next year! The Scotch team would like to thank everyone that made ng-conf awesome.