Angular 2, AOT, Tree shaking, features

1. Angular2
Better Faster Stronger and Everywhere
Christoffer Noring
@chris_noring

2. About me
Google Developer Expert

3. History

4. According to legend it was built in 2 weeks
2009
Mishko Hevery
Was built to increase speed of development
GetAngular => AngularJS

5. Angular is the best thing since sliced bread
Our backend/frontend coders picked it up in 3-4 days
Double binding makes CRUD so easy
It makes us so productive
12000+ sites using angular
In 2013 we were like
Angular all the things !!!

6. In 2015 we were like
Double binding is so bad
Angular change detection is wack
Watchers watchers watchers,
no more than 2000 or it blows up
We know how to code Angular
but do we know javascript?
Uniform data flow is so much better,
let’s do react
It doesn’t render so fast
Why are there so many concepts, providers, service, factor

7. We must change
We must be better

8. We can be faster
Roger Bannister. English mile under 4 min

9. FPS * 2

10. number of frames that take longer than 16.6ms to be draw
stuttering, non smooth behaviour

11. total amount of time spent by the browser executing Java

12. I can do better
Lew Hoad won 8-0 against Laver in the 60s
Ken Rosewall won 11/13 games against Laver in the 60s
Rod Laver improved to become one of the best players ev
Angular 1 was/is beaten by React, Vue, Ember etc..
Angular can be better
Change detection can be done better

13. How is Angular 2 better

14. Improved change detection
Reduced number of concepts
Typescript a first class citizen
Uses decorators from ES7
Better tooling with Augury and Angular CLI
Mobile first

15. AOT,Treeshaking
reducing the bundle size

16. Tree shaking
excluding code you’re not using
Webpack for example, removes reference to unused code
Uglify removes unused code from the bundle
-70% reduction
app globals
reflect-metadata
zone.js
shaked out
not used
used
dependency
graph

17. AOT
ahead of time compilation
AOT vs JIT, just in time compilation
capture template errors early vs at runtime
compiler runs once at build time
using one set of libraries
The browser loads executable code
no compilation
The compiler
inlines external html templates
css style sheets
no ajax requests for these assets
Results
Compiled code takes less size
Compiler not shipped

18. Lazy loading
Starting component
App
Lazy
Decreases how much of our app is initially loaded
Using router +
NgModules

19. rxjs everywhere instead of flawed promises
Easy to add things like
Firebase, AngularFire and Material Design
Lets make it easy to use service workers
Server side rendering with Angular Universal,
app renders in 1 min, initial events recorded
and replayed
Lets add support for uniform data flow, flux, ngrx etc..

20. Has upgrade path with ngUpgrade, ngMetadata
And as always lets make it testable,
unit tests e2e tests with protractor etc

21. Its all about components +
component router
@Component({
selector: ‘messenger’,
template: '<div>Hello, {{message}}</div>'
})
class Messenger {
message: string;
constructor() {
this.message = 'World';
}
}
Decorator @
decorates
a class

22. True native apps with
native script
Electron,
ng2 desktop
We can be everywhere
Ionic 2 for angular 2
WebView

23. Dedicated teams for developing apps in Dart or
Typescript
versions of angular2
Ton of GDEs spreading the word
Stronger
Adoption github likes angular 1 and angular2
18445 stars53589 stars

24. Thank you for listening