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