Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Universal Applications with Angular 2

7,131 views

Published on

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.

Published in: Technology

Building Universal Applications with Angular 2

  1. 1. Building Universal Applications with Angular 2 Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com
  2. 2. github.com/mgechev twitter.com/mgechev blog.mgechev.com
  3. 3. 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?
  4. 4. 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?
  5. 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. 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. 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. 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. 9. What is Angular 2?
  10. 10. Core concepts of Angular 2 • Directives • Components • Pipes • Services • Dependency Injection
  11. 11. Directives
  12. 12. Primitive used for encapsulation of basic UI related logic
  13. 13. 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(); } }
  14. 14. 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(); } }
  15. 15. 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(); } }
  16. 16. What a minute… this looks like Java
  17. 17. Angular 2 is written in TypeScript
  18. 18. TypeScript is…
  19. 19. superset of ECMAScript
  20. 20. optional type checking
  21. 21. open source
  22. 22. …you can still use ES5…
  23. 23. 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(); } });
  24. 24. 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(); } });
  25. 25. 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(); } });
  26. 26. Components
  27. 27. Directives with views
  28. 28. hello-world.ts @Component({ selector: 'hello-world' }) @View({ template: '<h1>Hello, {{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
  29. 29. hello-world.ts @Component({ selector: 'hello-world' }) @View({ template: '<h1>Hello, {{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
  30. 30. hello-world.ts @Component({ selector: 'hello-world' }) @View({ template: '<h1>Hello, {{this.target}}!</h1>' }) class HelloWorld { target:string; constructor() { this.target = 'world'; } }
  31. 31. Pipes
  32. 32. Encapsulate the data transformation logic
  33. 33. 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(); } }
  34. 34. Services
  35. 35. Simply, ES2015 classes which can be wired together with…
  36. 36. Dependency Injection
  37. 37. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
  38. 38. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
  39. 39. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
  40. 40. di.ts import { provide, Injector, Injectable } from 'angular2/angular2'; @Injectable() class DataMapper { constructor(private http: Http) {} } class Http {} let injector = Injector.resolveAndCreate([ provide(Http).toValue(new Http()), DataMapper ]); injector.get(DataMapper);
  41. 41. Now you know the basics!
  42. 42. Lets take a step back…
  43. 43. Angular 2 is platform agnostic
  44. 44. Not coupled with DOM, even HTML
  45. 45. …and even more…
  46. 46. Client Server
  47. 47. Client Server
  48. 48. Client Server GET / GET * loop
  49. 49. Client Server GET / GET * loop Running JavaScript
  50. 50. Client Server GET / GET * loop GET * loop
  51. 51. Client Server GET / GET * loop GET * loop
  52. 52. server-side rendering
  53. 53. Client Server
  54. 54. Client Server
  55. 55. Client Server GET /
  56. 56. Client Server GET / Running JavaScript
  57. 57. Client Server GET / GET * loop
  58. 58. Client Server GET / GET * loop Running JavaScript
  59. 59. Client Server GET / GET * loop
  60. 60. Change detection can be run into separate process
  61. 61. so…what’s wrong with Angular 2?
  62. 62. Google
  63. 63. Google Angular 1
  64. 64. Angular 2 Google Angular 1
  65. 65. Angular 2 is…
  66. 66. rewritten from scratch
  67. 67. …developed in a different language
  68. 68. …completely incompatible API
  69. 69. …brand new building blocks
  70. 70. Why?
  71. 71. Web have moved forward
  72. 72. WebWorkers
  73. 73. Learnt lessons
  74. 74. Mutable state
  75. 75. Tangled data-flow
  76. 76. …we will make the transition process boring…
  77. 77. ngUpgrade
  78. 78. How to migrate to Angular 2? (2 easy steps)
  79. 79. Step 1
  80. 80. A B C D E F
  81. 81. Step 2
  82. 82. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com

×