Angular as an Integrated Development Platform

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