Integrated Web Stack with Angular 2

Integrated Web Stack with Angular 2

Angular is the only framework which provides a complete set of features for multi-platform software development.

In this talk we'll make a high-level overview of all the modules that the framework provides for developing fully functional web, mobile and desktop applications.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 14, 2016
Tweet

Transcript

  1. ngular with Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com Integrated Web Stack

    with
  2. None
  3. None
  4. agenda

  5. What is Angular 2

  6. None
  7. None
  8. Mobile • Web apps • Ionic 2 • NativeScript •

    React Native
  9. None
  10. Desktop • Web apps • Electron

  11. Angular 2 is platform agnostic

  12. core (zones, di, abstractions, etc.)

  13. renderer core (zones, di, abstractions, etc.)

  14. compiler renderer core (zones, di, abstractions, etc.)

  15. http compiler renderer core (zones, di, abstractions, etc.)

  16. forms http compiler renderer core (zones, di, abstractions, etc.)

  17. forms http compiler renderer core (zones, di, abstractions, etc.) router

  18. forms http compiler renderer core (zones, di, abstractions, etc.) router

    i18n
  19. forms http compiler renderer core (zones, di, abstractions, etc.) router

    i18n ngUpgrade
  20. forms http compiler renderer core (zones, di, abstractions, etc.) router

    i18n ngUpgrade animations
  21. PWA forms http compiler renderer core (zones, di, abstractions, etc.)

    router i18n ngUpgrade animations
  22. Universal PWA forms http compiler renderer core (zones, di, abstractions,

    etc.) router i18n ngUpgrade animations
  23. material 2 Universal PWA forms http compiler renderer core (zones,

    di, abstractions, etc.) router i18n ngUpgrade animations
  24. CLI material 2 Universal PWA forms http compiler renderer core

    (zones, di, abstractions, etc.) router i18n ngUpgrade animations
  25. language services CLI material 2 Universal PWA forms http compiler

    renderer core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
  26. angularfire2 language services CLI material 2 Universal PWA forms http

    compiler renderer core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
  27. angularfire2 language services CLI material 2 Universal PWA forms http

    compiler renderer core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
  28. None
  29. Angular 2’s Core

  30. Core • Zone.js • Ultrafast Change Detection • Dependency Injection

    • View Encapsulation
  31. “A Zone is an execution context that persists across async

    tasks. You can think of it as thread-local storage for JavaScript VMs.”
  32. “A Zone is an execution context that persists across async

    tasks. You can think of it as thread-local storage for JavaScript VMs.”
  33. @Component(...) class SimpleComponent { getData() { fetch('https://example.com/data.json') .then(response => response.json())

    .then(data => { this.users = data; this.cd.detectChanges(); }); } } no-zones.js
  34. @Component(...) class SimpleComponent { getData() { fetch('https://example.com/data.json') .then(response => response.json())

    .then(data => { this.users = data; this.cd.detectChanges(); }); } } no-zones.js
  35. with-zones.js @Component(...) class SimpleComponent { getData() { fetch('https://example.com/data.json') .then(response =>

    response.json()) .then(data => this.users = data); } }
  36. in-zones.js const old = Promise.prototype.then; Promise.prototype.then = function () {

    old.apply(Promise.prototype, arguments); this.rootCD.detectChanges(); };
  37. None
  38. None
  39. None
  40. Renderer

  41. “A set of abstract operations which can be specialized for

    a specific platform”
  42. “A set of abstract operations which can be specialized for

    a specific platform”
  43. None
  44. Client Server

  45. Client Server

  46. Client Server GET / GET * loop

  47. Client Server GET / GET * loop Running JavaScript

  48. Client Server GET / GET * loop GET * loop

  49. Client Server GET / GET * loop GET * loop

  50. server-side rendering

  51. Client Server

  52. Client Server

  53. Client Server GET /

  54. Client Server GET / Running JavaScript

  55. Client Server GET / GET * loop

  56. Client Server GET / GET * loop Running JavaScript

  57. Client Server GET / GET * loop

  58. None
  59. “NativeScript 2.0 truly native mobile apps”

  60. “NativeScript 2.0 truly native mobile apps”

  61. why not…

  62. None
  63. Compiler

  64. “Compiles your templates to JavaScript calls to the renderer”

  65. template.html <p> Howdy! Here's a list <form> ... </form> </p>

  66. compiled.js ... var parentRenderNode = renderer .createViewRoot(declarationAppElement.nativeElement); _el_0 = renderer

    .createElement(parentRenderNode,'p',debug(0,0,0)); _text_1 = renderer .createText(_el_0,'\n Howdy! Here\'s a list',debug(1,0,3)); _text_2 = renderer .createText(parentRenderNode,'\n\n',debug(2,3,4)); _el_3 = renderer .createElement(parentRenderNode,'form',debug(3,5,0)); ...
  67. Compiler works run-time and build time

  68. Single instance of the renderer

  69. Optimizations • Payload reduction (tree-shaking) • Pre-compilation • Ultra-fast change

    detection • WebWorkers
  70. None
  71. None
  72. None
  73. angular/mobile-toolkit

  74. Progressive enhancement for web applications

  75. mobile-toolkit • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support of push notifications • AppShell
  76. Service Workers and AppCache

  77. AppCache Service Workers AppCache Service Workers

  78. AppCache Service Workers = ~91.8%

  79. Development experience

  80. Typical JavaScript experience

  81. Angular is… • Built with TypeScript • Compile-time type checking

    • Great IDE/text editors support • Analyzable templates
  82. Type-checking and IntelliSense in templates

  83. None
  84. None
  85. None
  86. Already supported by some IDEs

  87. Still immature…

  88. None
  89. None
  90. None
  91. Using style guide in your project

  92. Enforcing common style

  93. • Fork the official style guide • Modify the styles

    according to your needs • Introduce the style guide to your team • Verify that each individual code change follows it Enforcing common style
  94. • Fork the official style guide • Modify the styles

    according to your needs • Introduce the style guide to your team • Verify that each individual code change follows it Enforcing common style
  95. • Fork the official style guide • Modify the styles

    according to your needs • Introduce the style guide to your team • Verify that each individual code change follows it Enforcing common style
  96. Code review process

  97. None
  98. manual boring error-prone

  99. codelyzer

  100. “codelyzer is a project which aims to enforce common style

    and verify correctness of your program”
  101. None
  102. Where to start?

  103. angular-cli

  104. ng new hello-world

  105. angular-cli: • Quick bootstrap of projects • Generating: • Components

    • Services • Directives • Pipes • Support for offline apps • many others…
  106. angular2-seed

  107. angular2-seed • TypeScript transpilation • Statically typed dev and prod

    builds • Out of the box unit-testing • Test coverage • e2e testing with protractor • Static code analyzer
  108. Resources: • angular.io • github.com/angular/angular • github.com/angular/mobile-toolkit • github.com/angular/angular-cli •

    github.com/mgechev/angular2-seed
  109. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com