Demystifying Angular 2 SPAs for the Web of Tomorrow Philipp Tarasiewicz, JavaLand, 08.03.2016
Web Dev / Distributed Systems 15 yr. About Me Philipp Tarasiewicz Consultant / Trainer / Developer philipp.tarasiewicz@googlemail.com @justphilmusic Consultant & coach 5 yr. Perl / CGI» Java, PHP» JavaScript / Go
AngularJS: Eine praktische Einführung in das JS-Framework First German AngularJS book dpunkt.verlag April 2014 ca. 360 pages http://dpunkt.de/buecher/4489/angularjs.html
Agenda 1 (What is Angular?) Why Angular 2?! 3 2 Angular 2 in a Nutshell 4 Migration Strategies Angular 2 Progress
(What is Angular?)
JS Framework for SPAs
Angular Overview Data Binding Scopes Modules Dependency Injection Expressions Animation Angular Filters Validation Directives Routing Services Controllers
Angular Overview Data Binding Scopes Modules Dependency Injection Expressions Animation Angular Filters Validation Directives Routing Services Controllers Very good testability!
Why Angular 2?!
Angular Recap 2009
Angular Recap 2009
Angular Recap 2009
Main Focus Then
Main Focus Then y t i l i b i s o r C o r sb t a p m o C r e s w
What do we want today?
What do we want today? Offline First!
What do we want today? Isomorphic JavaScript Client Your App Server API
Emerging Web Tech
So Angular 1.X appears rusty, right?!
Oldie but Goldie!
Angular 2 in a Nutshell
Components <my-app> <user-list> <user-image> <user-info> <navigation> <nav-item> <nav-item>
Components <my-app> <user-list> <user-image> <user-info> <navigation> <nav-item> An app is just a tree of components! <nav-item>
Components import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>my First Angular 2 App</h1>' }) class AppComponent {}
Components Component @Input selector template[url] directives @Output providers...
Components <user-info [firstname]="user.name" (change)="onchange($event)"> </user-info>
Directives Directive selector providers
Directives Directive selector providers A directive is a component s little sister!
Directives Most Angular 1.X directives are obsolete in Angular 2. Some exceptions: ngrepeat» NgFor ngclass» NgClass
TypeScript ES5 ES6 TypeScript
TypeScript Do we really want to have static typing? Compile-Time Security Docs Tooling Refactoring
Dependency Injection Root Injector Child Injector Child Injector Child Injector Child Injector Child Injector Injector Hierarchy Child Injector
Change Detection AppComp MyComp1 SubComp11 MyComp2 SubComp12 SubComp21 Directed Graph SubComp22
Change Detection AppComp MyComp1 SubComp11 SubComp12 MyComp2 SubComp21 By default change detection happens on every browser event. SubComp22
Change Detection AppComp MyComp1 SubComp11 SubComp12 MyComp2 SubComp21 Massive optimizations possible by using Observables and Immutables! SubComp22
Unidirectional Data Flow Faster Easier to debug Easier to reason about Better suited for Rx & Flux
Isomorphic JavaScript Angular Universal Preboot Prerender app on the server to speed up client-side app loading.
Angular 2 Cheatsheet https://angular.io/cheatsheet This cheat sheet is provisional and may change.
Angular 2 in a Nutshell
Angular 2 in a Nutshell Simple
Angular 2 in a Nutshell Simple Built for Speed
Angular 2 in a Nutshell Simple Built for Speed Productive
Angular 2 in a Nutshell! s s e n i p p a H r Simple Built for Speed Productive e p o l e v e D Increased
Migration Strategies
Migration Strategies A1 Preparations A1 / A2 Interop angular.component() Router ngforward ngupgrade A1 in A2 A2 in A1
Angular 2 Progress
Angular 2 Progress Alpha Beta Final Fast Docs Your Feedback Simple P1 Issues Dev @ Google Productive Available!
Angular 2 Progress Alpha Beta Final Fast Docs Your Feedback Simple P1 Issues Dev @ Google Productive Available!
Questions to Ask Do I need to deliver or do I have time to experiment? Which browsers do I need to support? Which devices do I need to support? Do I heavily rely on 3rd-party libraries?
We are facing a bright future!
Philipp Tarasiewicz Consultant / Trainer / Developer philipp.tarasiewicz@googlemail.com @justphilmusic Thank you!