Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular as an Integrated Development Platform

Minko Gechev
November 10, 2019

Angular as an Integrated Development Platform

Minko Gechev

November 10, 2019
Tweet

More Decks by Minko Gechev

Other Decks in Programming

Transcript

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

    View Slide

  2. agenda

    View Slide

  3. What is
    Angular

    View Slide

  4. View Slide

  5. View Slide

  6. Mobile
    • Web apps
    • Ionic
    • NativeScript

    View Slide

  7. View Slide

  8. Desktop
    • Web apps
    • Electron

    View Slide

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

    View Slide

  10. core
    (zones, di, abstractions, etc.)
    animations

    View Slide

  11. compiler
    core
    (zones, di, abstractions, etc.)
    animations

    View Slide

  12. http
    compiler
    core
    (zones, di, abstractions, etc.)
    animations

    View Slide

  13. forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    animations

    View Slide

  14. forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    animations

    View Slide

  15. forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    i18n
    animations

    View Slide

  16. forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    ngUpgrade
    i18n
    animations

    View Slide

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

    View Slide

  18. Universal
    PWA
    forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    ngUpgrade
    i18n
    animations

    View Slide

  19. components
    Universal
    PWA
    forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    ngUpgrade
    i18n
    animations

    View Slide

  20. CLI components
    Universal
    PWA
    forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    ngUpgrade
    i18n
    animations

    View Slide

  21. language
    services
    CLI components
    Universal
    PWA
    forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    ngUpgrade
    i18n
    animations

    View Slide

  22. angularfire2
    language
    services
    CLI components
    Universal
    PWA
    forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    i18n
    ngUpgrade
    animations

    View Slide

  23. angularfire2
    language
    services
    CLI components
    Universal
    PWA
    forms http
    compiler
    core
    (zones, di, abstractions, etc.)
    router
    i18n
    ngUpgrade
    animations

    View Slide

  24. angular-cli

    View Slide

  25. $ npm i -g @angular/cli
    $ ng new hello-world

    View Slide

  26. $ cd hello-world
    $ ng serve

    View Slide

  27. View Slide

  28. Angular Core

    View Slide

  29. Core
    • Components
    • Ultrafast Change Detection
    • More abstractions as you need them

    View Slide

  30. @Component({
    selector: 'hello-world',
    template: 'Hello, {{user.name}}!'
    })
    class HelloWorldComponent {
    getData() {
    fetch('https://example.com/data.json')
    .then(response => response.json())
    .then(data => this.user = data);
    }
    }
    Hello world in Angular

    View Slide

  31. Compiler

    View Slide

  32. “Compiles your templates to
    JavaScript instructions”

    View Slide

  33. template.html

    Howdy! Here’s a list:

    First
    Second


    View Slide

  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();

    View Slide

  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();

    View Slide

  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();

    View Slide

  37. Development
    experience

    View Slide

  38. Typical JavaScript experience

    View Slide

  39. Angular is…
    • Built with TypeScript
    • Compile-time type checking
    • Great IDE/text editors support
    • Analyzable templates

    View Slide

  40. Type-checking and IntelliSense in
    templates

    View Slide

  41. View Slide

  42. View Slide

  43. codelyzer

    View Slide

  44. “codelyzer is a project which aims
    to enforce common style and verify
    correctness of your program”

    View Slide

  45. View Slide

  46. View Slide

  47. Client Server

    View Slide

  48. Client Server

    View Slide

  49. Client Server
    GET /
    GET *
    loop

    View Slide

  50. Client Server
    GET /
    GET *
    loop
    Running JavaScript

    View Slide

  51. Client Server
    GET /
    GET *
    loop
    GET *
    loop

    View Slide

  52. Client Server
    GET /
    GET *
    loop
    GET *
    loop

    View Slide

  53. server-side rendering

    View Slide

  54. Client Server

    View Slide

  55. Client Server

    View Slide

  56. Client Server
    GET /

    View Slide

  57. Client Server
    GET /
    Running JavaScript

    View Slide

  58. Client Server
    GET /
    GET *
    loop

    View Slide

  59. Client Server
    GET /
    GET *
    loop
    Running JavaScript

    View Slide

  60. Client Server
    GET /
    GET *
    loop

    View Slide

  61. ❤ Angular Community ❤

    View Slide

  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

    View Slide

  63. Thank you!
    github.com/mgechev
    twitter.com/mgechev
    blog.mgechev.com

    View Slide