The Best News from Angular’s ng-conf 2016

ng-conf 2016 brought a ton of great news and announcements

Free Course

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.

The keynote by Brad Green and Jules Kremer is a great place to start. Give it a watch:

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 [] and ()

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

angular.io/styleguide

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

material.angular.io

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

mobile.angular.io

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.

Here's the talk by Jeff Cross, Jeff Cross's beard and Alex Rickabaugh.

They built an app that they actually use to handle their GitHub issues called Issue Zero.

Angular 2 is Universal

universal.angular.io

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.

The set up is very simple and uses Node to render Angular 2 templates server-side.

Our Angular apps are even faster for our users now that we can save precious render time in the browser.

See the talk on Angular 2 Universal by Jeff Whelpley and Patrick Stapleton:

The Angular 2 CLI Makes Life Simple

cli.angular.io

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 .html file
  • 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.

He expertly walks us through building the Tour of Heroes app that can be found in the Angular docs.

TypeScript Provides Lots of Benefits

There are a lot of cool things that TypeScript can do. Dan Wahlin walks through a lot of the reasons why you should like TypeScript and why it makes Angular 2 development better.

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

ng-wat was one of the funniest talks to come out of any conference last year. Shai Reznik had to come back and try to top last year's talk. And top it he did.

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

augury.angular.io

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

One of my personal heroes, David East gave a great talk on observables. If you haven't had much experience with observables, he gives a solid explanation.

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.

AngularFire2 went to beta this week so I'd highly recommend giving Firebase and Angular 2 a try.

NativeScript Makes Native Apps Easy

nativescript.org

NativeScript by Telerik had a strong presence at ng-conf this year.

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.

Something really cool that the NativeScript did is to not just talk about apps, but show them off. See the examples they created directly on the Google Play store and the Apple App Store

See how easy it is to build out NativeScript apps with Jen Looper and TJ VanToll:

Testing Will Be Significantly Easier Thanks to Zones

Julie Ralph, the brilliant mind behind Protractor talks about zones and testing.

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.

The .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.

Tweet: Thanks @angularjs team for another great #ngconf! #WeBelieveInYou

Conclusion

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.

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.