Finjs - Angular 2 better faster stronger
-
Upload
christoffer-noring -
Category
Technology
-
view
161 -
download
0
Transcript of Finjs - Angular 2 better faster stronger
Angular2Better Faster Stronger and Everywhere
Christoffer Noring@chris_noring
About meGoogle Developer Expert
History
According to legend it was built in 2 weeks
2009Mishko Hevery
Was built to increase speed of development
GetAngular => AngularJS
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 !!!
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, factory etc..
We must changeWe must be better
We can be faster
Roger Bannister. English mile under 4 min
FPS * 2
number of frames that take longer than 16.6ms to be drawnstuttering, non smooth behaviour
total amount of time spent by the browser executing JavaScript code
I can do betterLew 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 ever
Angular 1 was/is beaten by React, Vue, Ember etc..
Angular can be better
Change detection can be done better
How is Angular 2 better
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
AOT,Treeshakingreducing the bundle size
Tree shakingexcluding code you’re not using
Webpack for example, removes reference to unused code
Uglify removes unused code from the bundle
-70% reduction
app globalsreflect-metadatazone.js
shaked out
not used
used
dependency graph
AOTahead of time compilation
AOT vs JIT, just in time compilationcapture 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
ResultsCompiled code takes less sizeCompiler not shipped
Lazy loadingStarting component
App
Lazy
Decreases how much of our app is initially loaded
Using router + NgModules
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..
Has upgrade path with ngUpgrade, ngMetadata
And as always lets make it testable, unit tests e2e tests with protractor etc
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
True native apps with native script
Electron, ng2 desktop
We can be everywhere
Ionic 2 for angular 2WebView
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 angular218445 stars53589 stars
Thank you for listening