Demystifying Angular 2. SPAs for the Web of Tomorrow

Transcription

1 Demystifying Angular 2 SPAs for the Web of Tomorrow Philipp Tarasiewicz, JavaLand,

2 Web Dev / Distributed Systems 15 yr. About Me Philipp Tarasiewicz Consultant / Trainer / Developer Consultant & coach 5 yr. Perl / CGI» Java, PHP» JavaScript / Go

3 AngularJS: Eine praktische Einführung in das JS-Framework First German AngularJS book dpunkt.verlag April 2014 ca. 360 pages

4 Agenda 1 (What is Angular?) Why Angular 2?! 3 2 Angular 2 in a Nutshell 4 Migration Strategies Angular 2 Progress

5 (What is Angular?)

6 JS Framework for SPAs

7 Angular Overview Data Binding Scopes Modules Dependency Injection Expressions Animation Angular Filters Validation Directives Routing Services Controllers

8 Angular Overview Data Binding Scopes Modules Dependency Injection Expressions Animation Angular Filters Validation Directives Routing Services Controllers Very good testability!

9 Why Angular 2?!

10 Angular Recap 2009

11 Angular Recap 2009

12 Angular Recap 2009

13 Main Focus Then

14 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

15 What do we want today?

16 What do we want today? Offline First!

17 What do we want today? Isomorphic JavaScript Client Your App Server API

18 Emerging Web Tech

19 So Angular 1.X appears rusty, right?!

20 Oldie but Goldie!

21 Angular 2 in a Nutshell

22 Components <my-app> <user-list> <user-image> <user-info> <navigation> <nav-item> <nav-item>

23 Components <my-app> <user-list> <user-image> <user-info> <navigation> <nav-item> An app is just a tree of components! <nav-item>

24 Components import {Component} from selector: 'my-app', template: '<h1>my First Angular 2 App</h1>' }) class AppComponent {}

25 Components selector template[url] providers...

26 Components <user-info [firstname]="user.name" (change)="onchange($event)"> </user-info>

27 Directives Directive selector providers

28 Directives Directive selector providers A directive is a component s little sister!

29 Directives Most Angular 1.X directives are obsolete in Angular 2. Some exceptions: ngrepeat» NgFor ngclass» NgClass

30 TypeScript ES5 ES6 TypeScript

31 TypeScript Do we really want to have static typing? Compile-Time Security Docs Tooling Refactoring

32 Dependency Injection Root Injector Child Injector Child Injector Child Injector Child Injector Child Injector Injector Hierarchy Child Injector

33 Change Detection AppComp MyComp1 SubComp11 MyComp2 SubComp12 SubComp21 Directed Graph SubComp22

34 Change Detection AppComp MyComp1 SubComp11 SubComp12 MyComp2 SubComp21 By default change detection happens on every browser event. SubComp22

35 Change Detection AppComp MyComp1 SubComp11 SubComp12 MyComp2 SubComp21 Massive optimizations possible by using Observables and Immutables! SubComp22

36 Unidirectional Data Flow Faster Easier to debug Easier to reason about Better suited for Rx & Flux

37 Isomorphic JavaScript Angular Universal Preboot Prerender app on the server to speed up client-side app loading.

38 Angular 2 Cheatsheet This cheat sheet is provisional and may change.

39 Angular 2 in a Nutshell

40 Angular 2 in a Nutshell Simple

41 Angular 2 in a Nutshell Simple Built for Speed

42 Angular 2 in a Nutshell Simple Built for Speed Productive

43 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

44 Migration Strategies

45 Migration Strategies A1 Preparations A1 / A2 Interop angular.component() Router ngforward ngupgrade A1 in A2 A2 in A1

46 Angular 2 Progress

47 Angular 2 Progress Alpha Beta Final Fast Docs Your Feedback Simple P1 Issues Google Productive Available!

48 Angular 2 Progress Alpha Beta Final Fast Docs Your Feedback Simple P1 Issues Google Productive Available!

49 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?

50 We are facing a bright future!

51 Philipp Tarasiewicz Consultant / Trainer / Developer Thank you!