Angular as an Integrated Development Platform

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=47 Minko Gechev
November 10, 2019

Angular as an Integrated Development Platform

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

November 10, 2019
Tweet

Transcript

  1. ngular github.com/mgechev twitter.com/mgechev blog.mgechev.com Integrated Development Platform

  2. agenda

  3. What is Angular

  4. None
  5. None
  6. Mobile • Web apps • Ionic • NativeScript

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

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

  41. None
  42. None
  43. codelyzer

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

    and verify correctness of your program”
  45. None
  46. None
  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