THE ROAD TO ANGULAR 2.0

Transcription

1

2 THE ROAD TO ANGULAR 2.0

3 ABOUT ME Angular 1.x apps ios apps REST API's in Java Maarten Hus,

4 WHY THIS TALK?

5 WAIT WHAT?!

6 GRAVEYARD

7 WHY?

8 DISCLAIMER

9 THE ROAD 1.x Template Syntax 2.0 Types Bindings ES6 Components

10 TEMPLATE SYNTAX Angular 2.0's template syntax is radically different from 1.x's.

11 DIFFERENCES 1.x <span>username: {{user.username}}</span> <img ng-src="{{ user.imageurl }}"/> <button ng-click="upvote(user)">+1</button> 2.0 <span>username: {{user.username}}</span> <img [src]="{{ user.imageurl }}"/> <button (click)="upvote(user)">+1</button>

12 DIFFERENCES 1.x <span>username: {{user.username}}</span> <img ng-src="{{ user.imageurl }}"/> <button ng-click="upvote(user)">+1</button> 2.0 <span>username: {{user.username}}</span> <img [src]="{{ user.imageurl }}"/> <button (click)="upvote(user)">+1</button>

13 DIFFERENCES 1.x <span>username: {{user.username}}</span> <img ng-src="{{ user.imageurl }}"/> <button ng-click="upvote(user)">+1</button> 2.0 <span>username: {{user.username}}</span> <img [src]="{{ user.imageurl }}"/> <button (click)="upvote(user)">+1</button>

14 DIFFERENCES 1.x <span>username: {{user.username}}</span> <img ng-src="{{ user.imageurl }}"/> <button ng-click="upvote(user)">+1</button> 2.0 <span>username: {{user.username}}</span> <img [src]="{{ user.imageurl }}"/> <button (click)="upvote(user)">+1</button>

15 2.0 SYNTAX [] => property binding, is an expression () => event, is a statement, caused by the user.

16 NO NEED FOR ng-bind, ng-src, ng-class, ng-href, ng-show, ng-hide, ng-click, ng-enabled, ng-disabled, ng-blur, ng-keyup, ngmouse-down etc etc

17 EASIER TO LEARN Angular 2.0 templates are closer to HTML.

18 REASONING The new syntax makes it easer to reason about templates.

19 THE ROAD 1.x Template Syntax 2.0 Types Bindings ES6 Components

20 MODULES ES6 Modules are bundles of 'code' from which you can import specific 'code'.

21 EXAMPLE A // MathFuctions.js export function square(x) { return x * x; } B // main.js import {square} from 'MathFuctions'; console.log(square(5)); // logs 25 to console

22 ANGULAR 2.0 import {Component, View} from 'angular2/angular2';

23 ANGULAR 1.X angular.module('users').factory('userfactory', ['$http', function($http) { // code for userfactory which uses $http }]);

24 ANGULAR 2.0 Why create your own a module system, when the language (ES6) hands it to you.

25 HE'S DEAD JIM

26 THE ROAD 1.x Template Syntax 2.0 Types Bindings ES6 Components

27 TYPESCRIPT

28 ANGULAR 2.0 import {Component, View} from template: `<p>my name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; } constructor(name: string) { this.name = name; }

29 @COMPONENT import {Component, View} from template: `<p>my name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; <person></person> } constructor(name: string) { this.name = name; }

30 @VIEW import {Component, View} from template: `<p>my name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; } constructor(name: string) { this.name = name; }

31 TYPES import {Component, View} from template: `<p>my name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; } constructor(name: string) { this.name = name; }

32 WHY TYPES? 1. IDE's and Text Editors love types. 2. Types help show your intent.

33 THE ROAD 1.x Template Syntax 2.0 Types Bindings ES6 Components

34 COMPONENTS Component Controller View

35 COMPONENT import {Component, View} from template: `<p>my name: {{ name }}</p>` }) class PersonComponent { name: string; friends: Array<string>; View Controller } constructor(name: string) { this.name = name; }

36 INPUT / OUTPUT Component Input Controller Output View

37 I/O If is explicitly imported import {View, If} from template: `<p *if="name.length > 3">My name: {{ name }}</p>`, directives: [If] }) Components must state their dependencies (input).

38 I/O import {Component} from selector: 'person', properties: { name: 'name' }, events: ['upvote'] }) <person [name]="firstname"></person>

39 I/O import {Component} from selector: 'person', properties: { name: 'name' }, events: ['upvote'] }) <person (upvote)="vote()"></person>

40 WHY COMPONENTS 1. Components have clearly defined inputs and outputs. 2. Components are composable 3. Components can easily be reused.

41 ANGULAR 1.X Directives Controllers

42 THEY LIVE!

43 THE ROAD 1.x Template Syntax 2.0 Types Bindings ES6 Components

44 BINDINGS Angular 2.0 will no longer have two way bindings.

45 ANGULAR 1.X D A C B

46 EXPENSIVE Digest Phase A Cycle B

47 UNPREDICTABLE <div ng-controller="personcontroller as personcontroller"> <h1>hi {{ personcontroller.person.name }} <person-view person="personcontroller.person"></person-view> </div>

48 UNNECESSARY A <h1>hi {{ name }}</h1> B <input type="text" value="{{ name }}">

49 ANGULAR 2.0 How does Angular 2.0 handle bindings?

50 WEATHER APP

51 TREE OF COMPONENTS WeatherApp SegmentedButton Grid SearchBar WeatherStation WeatherStation WeatherStation

52 ANGULAR 2.0 A A B B bindings [] go down events () go up

53 CHANGE DETECTION 1.x Digest Phase Digest Phase 2.0 Cycle

54 SPEED

55 MEMORY

56 < MEMORY =

57 THE ROAD 1.x Template Syntax 2.0 Types Bindings ES6 Components

58 MIGRATION? 1.x 2.0

59 MIGRATION Big Bang 1.x 2.0 Incremental

60 BIG BANG

61 INCREMENTAL

62 WHAT TO CHOOSE? Big Bang Incremental Small App Big App Few dependencies Many dependencies If you have the time If there is no time

63 EXAMPLE: A Big Bang Incremental Small App Big App Few dependencies Many dependencies If you have the time If there is no time

64 EXAMPLE: B Big Bang Incremental Small App Big App Few dependencies Many dependencies If you have the time If there is no time

65 PREPARING FOR Upgrade to Use the new router 3. Use ES6 classes

66 DONE 1.x Template Syntax 2.0 Types Bindings ES6 Components

67 CONCLUSION

68 CONCLUSION jqlite DDO angular. module Controllers $scope

69 THE END During the conference you can find me at the 42's stand. So if you have any questions you know where to find me.

70