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.

Transcript

1. ngular with Minko Gechev github.com/mgechev twitter.com/mgechev blog.mgechev.com Integrated Web Stack with
4. agenda
5. What is Angular 2
8. Mobile • Web apps • Ionic 2 • NativeScript • React Native
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
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(); };
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”
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
59. “NativeScript 2.0 truly native mobile apps”
60. “NativeScript 2.0 truly native mobile apps”
61. why not…
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
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
86. Already supported by some IDEs
87. Still immature…
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
98. manual boring error-prone
99. codelyzer
100. “codelyzer is a project which aims to enforce common style and verify correctness of your program”
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