Angular as an Integrated Development Platform

Transcript

1. ngular github.com/mgechev twitter.com/mgechev blog.mgechev.com Integrated Development Platform
2. agenda
3. What is Angular
6. Mobile • Web apps • Ionic • NativeScript
8. Desktop • Web apps • Electron
9. core (zones, di, abstractions, etc.)
10. core (zones, di, abstractions, etc.) animations
11. compiler core (zones, di, abstractions, etc.) animations
12. http compiler core (zones, di, abstractions, etc.) animations
13. forms http compiler core (zones, di, abstractions, etc.) animations
14. forms http compiler core (zones, di, abstractions, etc.) router animations
15. forms http compiler core (zones, di, abstractions, etc.) router i18n animations
16. forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade i18n animations
17. PWA forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade i18n animations
18. Universal PWA forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade i18n animations
19. components Universal PWA forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade i18n animations
20. CLI components Universal PWA forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade i18n animations
21. language services CLI components Universal PWA forms http compiler core (zones, di, abstractions, etc.) router ngUpgrade i18n animations
22. angularfire2 language services CLI components Universal PWA forms http compiler core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
23. angularfire2 language services CLI components Universal PWA forms http compiler core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
24. angular-cli
25. $ npm i -g @angular/cli $ ng new hello-world
26. $ cd hello-world $ ng serve
28. Angular Core
29. Core • Components • Ultrafast Change Detection • More abstractions as you need them
30. @Component({ selector: 'hello-world', template: '<h1>Hello, {{user.name}}!</h1>' }) class HelloWorldComponent { getData() { fetch('https://example.com/data.json') .then(response => response.json()) .then(data => this.user = data); } } Hello world in Angular
31. Compiler
32. “Compiles your templates to JavaScript instructions”
33. template.html <section> Howdy! Here’s a list: <ul> <li>First</li> <li>Second</li> </ul> </section>
34. compiled.js elementStart(0, "section"); text(1, " Howdy! Here's a list: "); elementStart(2, "ul"); elementStart(3, "li"); text(4, "First"); elementEnd(); elementStart(5, "li"); text(6, "Second"); elementEnd(); elementEnd(); elementEnd();
35. compiled.js e(0, "section"); t(1, " Howdy! Here's a list: "); e(2, "ul"); e(3, "li"); t(4, "First"); n(); e(5, "li"); t(6, "Second"); n(); n(); n();
36. compiled.js e(0,"section"),t(1,"Howdy! Here's a list: "),e(2,"ul"),e(3,"li"),t(4,"First"),n(),e(5,"l i"),t(6,"Second"),n(),n(),n();
37. Development experience
38. Typical JavaScript experience
39. Angular is… • Built with TypeScript • Compile-time type checking • Great IDE/text editors support • Analyzable templates
40. Type-checking and IntelliSense in templates
43. codelyzer
44. “codelyzer is a project which aims to enforce common style and verify correctness of your program”
47. Client Server
48. Client Server
49. Client Server GET / GET * loop
50. Client Server GET / GET * loop Running JavaScript
51. Client Server GET / GET * loop GET * loop
52. Client Server GET / GET * loop GET * loop
53. server-side rendering
54. Client Server
55. Client Server
56. Client Server GET /
57. Client Server GET / Running JavaScript
58. Client Server GET / GET * loop
59. Client Server GET / GET * loop Running JavaScript
60. Client Server GET / GET * loop
61. ❤ Angular Community ❤
62. ngAtlanta " ngIndia # Angular NL $ ng-conf " ngVikings % Angular Day & Angular in Depth ' ngDenver " NG-MY ( ng-japan ) NG-DE * ng-SriLanka + Angular Connect , ngSpain - NGRome & NG Honduras . ngTaiwan / ngTalks ' NG-BE 0 ngBolivia 1 AngularMix " ngPoland 2 AngularUP 3 ngChina 4
63. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com