The Pale Parts

2 years of development

Not backwards compatible

Bre

a

king

ch

ange

s

Flexibility

ES

ES2015

ES2016

TS

Ahead of Time compilation

Change detection

Server-side rendering

Web Workers

Application

Compiler

Application

Compiler

createInternal(rootSelector:string):import4.AppElement {
    const parentRenderNode:any = this.renderer.createViewRoot(this.declarationAppElement.nativeElement);
    this._el_0 = this.renderer.createElement(parentRenderNode,'md-toolbar',this.debug(0,0,0));
    this.renderer.setElementAttribute(this._el_0,'class','extend-toolbar');
    this._appEl_0 = new import4.AppElement(0,(null as any),this,this._el_0);
    var compView_0:any = import14.viewFactory_MdToolbar0(this.viewUtils,this.injector(0),this._appEl_0);
    this._MdToolbar_0_4 = new import12.MdToolbar(new import15.ElementRef(this._el_0),this.renderer);
    this._appEl_0.initComponent(this._MdToolbar_0_4,[],compView_0);
    this._text_1 = this.renderer.createText((null as any),'\n  ',this.debug(1,0,35));
    this._el_2 = this.renderer.createElement((null as any),'span',this.debug(2,1,2));
    this._text_3 = this.renderer.createText(this._el_2,'\n    ',this.debug(3,1,8));
    this._el_4 = this.renderer.createElement(this._el_2,'a',this.debug(4,2,4));
    this.renderer.setElementAttribute(this._el_4,'href','#/home');
    this._text_5 = this.renderer.createText(this._el_4,'\n      ',this.debug(5,2,21));
    this._el_6 = this.renderer.createElement(this._el_4,'img',this.debug(6,3,6));
    this.renderer.setElementAttribute(this._el_6,'alt','Sfeir');
    this.renderer.setElementAttribute(this._el_6,'aria-label','foobar');
    this.renderer.setElementAttribute(this._el_6,'src','assets/images/logo-foo.svg');
    this._text_7 = this.renderer.createText(this._el_4,'\n    ',this.debug(7,3,77));
    this._text_8 = this.renderer.createText(this._el_2,'\n  ',this.debug(8,4,8));
    this._text_9 = this.renderer.createText((null as any),'\n\n  ',this.debug(9,5,9));
    this._el_10 = this.renderer.createElement((null as any),'span',this.debug(10,7,2));
    this.renderer.setElementAttribute(this._el_10,'class','flex');
    this._text_11 = this.renderer.createText((null as any),'\n\n  ',this.debug(11,7,28));
    this._el_12 = this.renderer.createElement((null as any),'span',this.debug(12,9,2));
    this._text_13 = this.renderer.createText(this._el_12,'\n    ',this.debug(13,9,8));
    this._el_14 = this.renderer.createElement(this._el_12,'a',this.debug(14,10,4));
    this.renderer.setElementAttribute(this._el_14,'href','#/locator');
    this._text_15 = this.renderer.createText(this._el_14,'Maps',this.debug(15,10,24));
    this._text_16 = this.renderer.createText(this._el_12,'\n    ',this.debug(16,10,32));
    this._el_17 = this.renderer.createElement(this._el_12,'a',this.debug(17,11,4));
    this.renderer.setElementAttribute(this._el_17,'href','#/app');
    this._text_18 = this.renderer.createText(this._el_17,'List',this.debug(18,11,23));
    this._text_19 = this.renderer.createText(this._el_12,'\n  ',this.debug(19,11,31));
    this._text_20 = this.renderer.createText((null as any),'\n',this.debug(20,12,9));

Smaller bundle size

Fewer async requests

Faster rendering

Tree Shaking!

A technique to "shake" off unused code, thus shrinking the size of the deployed application

Needs compilation context

// The browser platform with a compiler
import { 
   platformBrowserDynamic 
} from '@angular/platform-browser-dynamic';


// The app module
import { AppModule } from './app.module';


// Compile (JIT) and launch the module
platformBrowserDynamic().bootstrapModule(
   AppModule
);

// The browser platform with a compiler
import { 
   platformBrowser 
} from '@angular/platform-browser';

// The generated app factory (AOT)
import { 
   AppModuleNgFactory
} from './app.module.ngfactory';

// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(
   AppModuleNgFactory
);

Dev

Prod

The change detection graph is a directed tree. As a result: 3-10x faster than Angular 1.x

An Angular 2 app is a reactive system

The change detection system propagates bindings from the root to leaves

changeDetection: ChangeDetectionStrategy.Default

changeDetection: ChangeDetectionStrategy.OnPush

Lazy-loading

Scalable communication layer

<!-- Original DOM -->
<hero-details>
    <h2>Mister Fantastic</h2>
    <hero-team>
        <h3>Team</h3>

    </hero-team>

</hero-detail>

<!-- Original CSS -->
hero-details {

    display: block;

    border: 1px solid black;

}

h3 {
    background-color: white;

    border: 1px solid #777;

}

<!-- Rendered DOM -->
<hero-details _nghost-pmm-5>

    <h2 _ngcontent-pmm-5>Mister Fantastic</h2>

        <hero-team _ngcontent-pmm-5 _nghost-pmm-6>

            <h3 _ngcontent-pmm-6>Team</h3>

        </hero-team>

</hero-detail>

<!-- Rendered CSS -->
[_nghost-pmm-5] {

    display: block;

    border: 1px solid black;

}

h3[_ngcontent-pmm-6] {

    background-color: white;

    border: 1px solid #777;

}

npm install -g angular-cli

ng new my-shiny-app
cd my-shiny-app

ng serve

ng generate component my-shiny-component
ng g component my-shiny-component

ng g class my-shiny-class
ng g service my-shiny-service

ng build --dev
ng build --prod

ng test
ng e2e

ng github-pages:deploy --message "Go!"

Generating routes

Support for offline applications

Service Workers

App Shell

Manifest generation

Workflow built into CLI