Building Universal Applications with Angular 2

Angular is one of the most popular frameworks for the development of Single-Page Applications (SPA). Recently Google announced its second major version, which brings some brand new ideas and improvements. For instance, Angular 2 is written in TypeScript, has much faster change detection and allows development of universal (isomorphic) applications.

In this talk we're going to introduce the motivation behind the new design decisions and the improvements in Angular 2. We'll take a look at the building blocks the framework provides for the development of professional single-page applications.

Transcript

1. Building Universal Applications with Angular 2 Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com
3. github.com/mgechev twitter.com/mgechev blog.mgechev.com
4. Agenda What is Angular? What’s wrong with Angular 2? Introduction to Angular 2 Why Angular 2 is awesome? Should I use Angular 2 in my next project?
5. Agenda What is Angular 2? What’s wrong with Angular 2? What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
6. Agenda What is Angular 2? What’s wrong with Angular 2? What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
7. Agenda What is Angular 2? What’s wrong with Angular 2? What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
8. Agenda What is Angular 2? What’s wrong with Angular 2? What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
9. Agenda What is Angular 2? What’s wrong with Angular 2? What are the core concepts of Angular 2? Why Angular 2 is awesome? Should I use Angular 2 in my next project?
10. What is Angular 2?
13. Core concepts of Angular 2 • Directives • Components • Pipes • Services • Dependency Injection
14. Directives
15. Primitive used for encapsulation of basic UI related logic
16. tooltip.ts @Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) export class Tooltip { private overlay:Overlay; private tooltip:string; constructor(private el:ElementRef, manager: OverlayManager) { this.el = el; this.overlay = manager.get(); } onMouseEnter() { this.overlay.open(this.el, this.tooltip); } onMouseLeave() { this.overlay.close(); } }
17. tooltip.ts @Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) export class Tooltip { private overlay:Overlay; private tooltip:string; constructor(private el:ElementRef, manager: OverlayManager) { this.el = el; this.overlay = manager.get(); } onMouseEnter() { this.overlay.open(this.el, this.tooltip); } onMouseLeave() { this.overlay.close(); } }
18. tooltip.ts @Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) export class Tooltip { private overlay:Overlay; private tooltip:string; constructor(private el:ElementRef, manager: OverlayManager) { this.el = el; this.overlay = manager.get(); } onMouseEnter() { this.overlay.open(this.el, this.tooltip); } onMouseLeave() { this.overlay.close(); } }
19. Wait a minute… this looks like Java
20. Angular 2 is written in TypeScript
23. TypeScript is…
24. superset of ECMAScript
25. optional type checking
26. open source
28. …you can still use ES5…
29. tooltip.js var Tooltip = ng.Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) .Class({ constructor: [ng.Inject(ng.ElementRef), ng.Inject(OverlayManager), function (tooltip, el, manager) { this.el = el; this.overlay = manager.get(tooltip); }], onMouseEnter() { this.overlay.open(this.el, this.tooltip); }, onMouseLeave() { this.overlay.close(); } });
30. tooltip.js var Tooltip = ng.Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) .Class({ constructor: [ng.Inject(ng.ElementRef), ng.Inject(OverlayManager), function (tooltip, el, manager) { this.el = el; this.overlay = manager.get(tooltip); }], onMouseEnter() { this.overlay.open(this.el, this.tooltip); }, onMouseLeave() { this.overlay.close(); } });
31. tooltip.js var Tooltip = ng.Directive({ selector: '[tooltip]', inputs: ['tooltip'], host: { '(mouseenter)': 'onMouseEnter()', '(mouseleave)': 'onMouseLeave()' } }) .Class({ constructor: [ng.Inject(ng.ElementRef), ng.Inject(OverlayManager), function (tooltip, el, manager) { this.el = el; this.overlay = manager.get(tooltip); }], onMouseEnter() { this.overlay.open(this.el, this.tooltip); }, onMouseLeave() { this.overlay.close(); } });
32. Components
33. Directives with views
34. hello-world.ts @Component({ selector: 'hello-world', template: '<h1>Hello, {{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
35. hello-world.ts @Component({ selector: 'hello-world', template: '<h1>Hello, {{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
36. hello-world.ts @Component({ selector: 'hello-world', template: '<h1>Hello, {{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
37. Pipes
38. Encapsulate the data transformation logic
39. lowercase-pipe.ts @Pipe({ name: 'lowercase' }) class LowerCasePipe implements PipeTransform { transform(value: string): string { if (!value) return value; if (typeof value !== 'string') { throw new Error('Invalid pipe value', value); } return value.toLowerCase(); } }
40. Services
41. Simply, ES2015 classes which can be wired together with…
42. Dependency Injection
43. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
44. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
45. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
46. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; class Http {} @Injectable() class DataMapper { constructor(private http: Http) {} } let injector = Injector.resolveAndCreate([ provide(Http, { useValue: new Http() }), DataMapper ]); injector.get(DataMapper);
51. Now you know the basics!
52. Lets take a step back…
55. Angular 2 is platform agnostic
56. Not coupled with DOM, even HTML
58. …and even more…
59. Client Server
60. Client Server
61. Client Server GET / GET * loop
62. Client Server GET / GET * loop Running JavaScript
63. Client Server GET / GET * loop GET * loop
64. Client Server GET / GET * loop GET * loop
65. server-side rendering
66. Client Server
67. Client Server
68. Client Server GET /
69. Client Server GET / Running JavaScript
70. Client Server GET / GET * loop
71. Client Server GET / GET * loop Running JavaScript
72. Client Server GET / GET * loop
74. Change detection can be run into separate process
76. so…what’s wrong with Angular 2?
81. Google
82. Google Angular 1
83. Angular 2 Google Angular 1
86. Angular 2 is…
87. rewritten from scratch
88. …developed in a different language
89. …completely incompatible API
90. …brand new building blocks
91. Why?
92. Web have moved forward
94. WebWorkers
98. Learnt lessons
99. Mutable state
100. Tangled data-flow
102. …we will make the transition process boring…
104. ngUpgrade
105. How to migrate to Angular 2? (2 easy steps)
106. Step 1
110. A B C D E F
112. Step 2
120. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com