Keynote

Brad Green, Engineering director @ Google and overall project manager of Angular (since it’s beginnings in 2009) opens the show, outlining some stats. Most interestingly about Google’s products currently using Angular v1 which are products like Chromecast, Google Analytics, the Youtube Video Manager etc. Many people have been criticizing Angular for not even being used by Google itself. Therefore such announcements are kinda important for the community as it demonstrates Google’s commitment and faith into Angular.

What’s not quite as surprising are the Angular v1 vs v2 usage stats:

7% taking a look at Angular is probably more surprising. These stats are being taken from the Angular v1 and Angular visitor stats.

Angular..

..is all about speed and a better framework that leverages the latest available technology. It’s about

load/startup speed by using angular universal to pre-render views on the server

speeding up the compile phase by about 3x

hugely improving change detection with support for RxJS and Immutables

What impressed me both (apart from all the speed improvements in compilation and view rendering) is the fact that server-side rendering got so easy with angular universal. Using it, you can dramatically increase the speed of your application startup as the 1st view is already rendered on the server and directly served to the client.

Collaboration with Meteor.js

Other awesome news include tight collaboration with the Meteor team to provide even better support and integration with Angular (as they already have by now).

The shown performance stats are huge!

Templates

These changes make the API much more clear and Angular can get rid of custom directives like ng-href, ng-click, ng-mousemove etc. You can simply use the native properties/events, using the proper () or [] notation.

Components

When today you (should) have a directive with a corresponding directive controller, tomorrow with Angular you’ll have (or call it) a component. Everything is a component, your app simply a big “component tree” starting with a top-level component and then have lots of sub-components nested within it.

And yes, while you can write it in ES5, it feels like you’re hurting yourself. TypeScript is the way to go, or at least ES6.

Data flow will be unidirectional, going from the parent down to the children. This makes it

faster

easier to debug (as the data always flows down the component tree)

works better with libraries like RxJS, Flux,…

Languages

Ultimately, Angular is designed to give you as much freedom as possible. That said, it supports

ES5 - runs in the Browser (ultimately)

ES6 (ES2015)

TypeScript (Angular is written in TS)

Dart - No JS

Even though you have all the options, as mentioned, I think TypeScript is the way to go. It will give you the better developer experience after all. Quite some speakers mentioned that as well, especially for reasons of Typing (and thus compile-time checking), tooling in general and finally refactoring support.

Tools

For newbies in the field, all of this technology you have to know about might get quite overwhelming. Like NPM, Grunt/Gulp/Webpack, SystemJS, then Angular itself,… That’s why the Angular team also heavily invests into better tooling. They’ve worked together with the Ember-CLI team to build angular-cli. It’s still in alpha but quite promising.

After installing..

$ npm install -g angular-cli

..you can scaffold a new app

$ ng new greetings-ac

and use

$ ng serve

to have it served through a local dev server. It also allows to generate new components using

Cross platform

There also seems to be a huge interest in getting mobile apps with Angular. Besides the (really promising) hybrid approach that Ionic is taking, there’s also a collaboration going on with Telerik and the React Native team in an effort called NativeScript (more in tomorrows sessions).

Flexibility in the Angular’s new templating engine opens up a whole set of new possibilities:

Path to Angular

Start taking a look at ngUpgrade, a repository describing strategies and ideas to aid upgrading to Angular.

Remember when @mhevery said at @angularu that upgrading to Angular will be boring? Well.. Lemme tell you sth. He didn't lie.

Developer Relations

This thing is huge. The Angular team is collaborating with big players like Microsoft, Visual Studio Code, the ASP.net team which are committed to it, Facebook & the React.js team, Ember…yes, you can even build Office 365 add-ons with Angular.

Building cross platform apps with Ionic 2

Ionic is exciting technology. I was trying hybrid apps about a couple of years ago, but it didn’t work out well. The main issue was performance, in animations and stuff. Meanwhile mobile browsers got a lot better, and Ionic nicely fits in with a great library.

Ionic 2 is built on top of Angular and mainly focuses on the following pillars.

Simplicity

You can easily define components like

<buttondanger></button><io-checkbox></io-checkbox>

The CSS is made s.t. it can be easily overwritten. Moreover it’s like plain JavaScript with some custom annotations.

@Page({templateUrl:'...'})exportclassProfile{...}

Platform continuity

Theres now one exact codebase for iOS and Android. The same HTML and JS is automatically enhanced for the target platform. Even the icon set automatically adapts itself. Just specify them like

<iconmail></icon><iconhome></icon>
...

UI Navigation

UI navigation got a lot better. This is crucial for mobile apps which may have special needs rather than the URL tight kind of back navigation behavior.
Example: You don’t always want to have the back-button functionality, i.e. when choosing a page from the side menu (difficult with URL route navigation)

Ionic 2 features a push/pop kind of navigation experience.

pushSettings(){this.nav.push(...);}goBack(){this.nav.pop();}

Theming and Customization

SASS is already build-in with dedicated themes and tools to adjust them. Ionic comes with a set of 9 colors which can be freely adapted to build a custom theme experience.

Moreover it uses the new Web Animations API which gives the developer a lot better control other than CSS animations do. There’s already native support for Chrome/Android and there are great polyfills for iOS. The demoed animations were really sleek!

Conclusion

This looks really promising and is definitely something I’m going to experiment with. Native apps have their place, but they are costly, you need a dedicated team/developers for both, iOS and Android (and Windows) and that’s why we’re all looking towards hybrid apps that leverage web technologies.

Routing in Eleven Dimensions with Component Router

Brian Ford introduced the new Angular component router. The new router basically incorporates the lessons learned from the native Angular 1 router and features from the more popular ui-router project. The main difference is that the component router maps URLs to components.

The new ui-view is:

<router-outlet></router-outlet>

Each component has its own router configuration, something like

@RouteConfig({{path:'/',component:IndexCmp,as:'Index'}})

Then you can link them using [router-link]

<a[router-link]="['/Index']">...</a>

Obviously using the url directly would work as well but it’s usually not considered best practice as it makes refactoring more difficult.

Child routes are possible as well, obviously. The cool part there is that you can have your parents’ route configuration which specifies the path of the route up to a certain point and then indicates that Angular has to look for the route configurations of potential child components. This is done by using ...:

@RouteConfig({{path:'/email/:id/...',component:EmailCmp,as:'Index'}})

The ... denotes that the EmailCmp component’s route config has to be consulted for child routes. Child routes have their own params, so no collisions.

Another quite interesting point is what Brian denoted “eleven dimensional routing” which is the capability to have multiple routes active at the same time. Imagine the UI of Google’s Inbox, where you have the window for writing a new email open in the front, but you can still interact with the content in the back.

Conclusion

Totally interesting and something you should start taking a look at as it seems this is going to land in Angular v1.x as well and is some of the core parts for going an incremental upgrade path. I had the feeling Brian only scratched the surface of what’s possible with the new router.

Turning the performance knob 11

Gleb Bahmutov demoed some of the techniques besides simply upgrading Angular, using track by and so on. Definitely take a look at his repository of Chrome Developer Tools snippets: https://github.com/bahmutov/code-snippets.

Takeouts

don’t do premature optimizations, optimize when the browser starts freezing

Takeouts

Testing Strategies with Angular

Julie mentioned some of the rules that generally apply to testing and obviously also hold for Angular

use smallest test type possible

only public interfaces, don’t test private ones (less stable)

only mock if really necessary

…

The tools they use: TypeScript (although not strictly necessary), karma, Jasmine. TypeScript basically compiles to JavaScript files which is being watched by Karma which then executes the unit tests. Thus Karma doesn’t even have to know about the existence of TypeScript at all.