Building Universal Applications with Angular 2

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
November 07, 2015

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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

November 07, 2015
Tweet

Transcript

  1. Building Universal Applications with Angular 2 Minko Gechev github.com/mgechev twitter.com/mgechev

    blog.mgechev.com
  2. None
  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?

  11. None
  12. None
  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

  21. None
  22. None
  23. TypeScript is…

  24. superset of ECMAScript

  25. optional type checking

  26. open source

  27. None
  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);
  47. None
  48. None
  49. None
  50. None
  51. Now you know the basics!

  52. Lets take a step back…

  53. None
  54. None
  55. Angular 2 is platform agnostic

  56. Not coupled with DOM, even HTML

  57. None
  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

  73. None
  74. Change detection can be run into separate process

  75. None
  76. so…what’s wrong with Angular 2?

  77. None
  78. None
  79. None
  80. None
  81. Google

  82. Google Angular 1

  83. Angular 2 Google Angular 1

  84. None
  85. None
  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

  93. None
  94. WebWorkers

  95. None
  96. None
  97. None
  98. Learnt lessons

  99. Mutable state

  100. Tangled data-flow

  101. None
  102. …we will make the transition process boring…

  103. None
  104. ngUpgrade

  105. How to migrate to Angular 2? (2 easy steps)

  106. Step 1

  107. None
  108. None
  109. None
  110. A B C D E F

  111. None
  112. Step 2

  113. None
  114. None
  115. None
  116. None
  117. None
  118. None
  119. None
  120. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com