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
   

   View Slide

2. View Slide

3. View Slide

4. agenda
   

   View Slide

5. What is
   Angular 2
   

   View Slide

6. View Slide

7. View Slide

8. Mobile
   • Web apps
   • Ionic 2
   • NativeScript
   • React Native
   

   View Slide

9. View Slide

10. Desktop
    • Web apps
    • Electron
    

    View Slide

11. Angular 2 is
    platform agnostic
    

    View Slide

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

    View Slide

13. renderer
    core
    (zones, di, abstractions, etc.)
    

    View Slide

14. compiler renderer
    core
    (zones, di, abstractions, etc.)
    

    View Slide

15. http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    

    View Slide

16. forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    

    View Slide

17. forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router
    

    View Slide

18. forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    

    View Slide

19. forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    ngUpgrade
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. material 2
    Universal
    PWA
    forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    ngUpgrade animations
    

    View Slide

24. CLI material 2
    Universal
    PWA
    forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    ngUpgrade animations
    

    View Slide

25. language
    services
    CLI material 2
    Universal
    PWA
    forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    ngUpgrade animations
    

    View Slide

26. angularfire2
    language
    services
    CLI material 2
    Universal
    PWA
    forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    ngUpgrade animations
    

    View Slide

27. angularfire2
    language
    services
    CLI material 2
    Universal
    PWA
    forms http
    compiler renderer
    core
    (zones, di, abstractions, etc.)
    router i18n
    ngUpgrade animations
    

    View Slide

28. View Slide

29. Angular 2’s Core
    

    View Slide

30. Core
    • Zone.js
    • Ultrafast Change Detection
    • Dependency Injection
    • View Encapsulation
    

    View Slide

31. “A Zone is an execution context
    that persists across async tasks.
    You can think of it as thread-local
    storage for JavaScript VMs.”
    

    View Slide

32. “A Zone is an execution context
    that persists across async tasks.
    You can think of it as thread-local
    storage for JavaScript VMs.”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. with-zones.js
    @Component(...)
    class SimpleComponent {
    getData() {
    fetch('https://example.com/data.json')
    .then(response => response.json())
    .then(data => this.users = data);
    }
    }
    

    View Slide

36. in-zones.js
    const old = Promise.prototype.then;
    Promise.prototype.then = function () {
    old.apply(Promise.prototype, arguments);
    this.rootCD.detectChanges();
    };
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. Renderer
    

    View Slide

41. “A set of abstract operations
    which can be specialized for a
    specific platform”
    

    View Slide

42. “A set of abstract operations
    which can be specialized for a
    specific platform”
    

    View Slide

43. View Slide

44. Client Server
    

    View Slide

45. Client Server
    

    View Slide

46. Client Server
    GET /
    GET *
    loop
    

    View Slide

47. Client Server
    GET /
    GET *
    loop
    Running JavaScript
    

    View Slide

48. Client Server
    GET /
    GET *
    loop
    GET *
    loop
    

    View Slide

49. Client Server
    GET /
    GET *
    loop
    GET *
    loop
    

    View Slide

50. server-side rendering
    

    View Slide

51. Client Server
    

    View Slide

52. Client Server
    

    View Slide

53. Client Server
    GET /
    

    View Slide

54. Client Server
    GET /
    Running JavaScript
    

    View Slide

55. Client Server
    GET /
    GET *
    loop
    

    View Slide

56. Client Server
    GET /
    GET *
    loop
    Running JavaScript
    

    View Slide

57. Client Server
    GET /
    GET *
    loop
    

    View Slide

58. View Slide

59. “NativeScript 2.0
    truly native mobile apps”
    

    View Slide

60. “NativeScript 2.0
    truly native mobile apps”
    

    View Slide

61. why not…
    

    View Slide

62. View Slide

63. Compiler
    

    View Slide

64. “Compiles your templates to
    JavaScript calls to the renderer”
    

    View Slide

65. template.html
    
    Howdy! Here's a list
    
    ...
    
    
    

    View Slide

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

    View Slide

67. Compiler works run-time
    and build time
    

    View Slide

68. Single instance of
    the renderer
    

    View Slide

69. Optimizations
    • Payload reduction (tree-shaking)
    • Pre-compilation
    • Ultra-fast change detection
    • WebWorkers
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. angular/mobile-toolkit
    

    View Slide

74. Progressive enhancement
    for web applications
    

    View Slide

75. mobile-toolkit
    • Offline access to static content
    • Notifications for new versions
    • Efficient download of deltas
    • Support of push notifications
    • AppShell
    

    View Slide

76. Service Workers
    and
    AppCache
    

    View Slide

77. AppCache
    Service Workers AppCache
    Service Workers
    

    View Slide

78. AppCache
    Service Workers
    =
    ~91.8%
    

    View Slide

79. Development
    experience
    

    View Slide

80. Typical JavaScript experience
    

    View Slide

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

    View Slide

82. Type-checking and IntelliSense in
    templates
    

    View Slide

83. View Slide

84. View Slide

85. View Slide

86. Already supported by
    some IDEs
    

    View Slide

87. Still immature…
    

    View Slide

88. View Slide

89. View Slide

90. View Slide

91. Using style guide in
    your project
    

    View Slide

92. Enforcing common style
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

96. Code review
    process
    

    View Slide

97. View Slide

98. manual
    boring
    error-prone
    

    View Slide

99. codelyzer
    

    View Slide

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

     View Slide

101. View Slide

102. Where to start?
     

     View Slide

103. angular-cli
     

     View Slide

104. ng new hello-world
     

     View Slide

105. angular-cli:
     • Quick bootstrap of projects
     • Generating:
     • Components
     • Services
     • Directives
     • Pipes
     • Support for offline apps
     • many others…
     

     View Slide

106. angular2-seed
     

     View Slide

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
     

     View Slide

108. Resources:
     • angular.io
     • github.com/angular/angular
     • github.com/angular/mobile-toolkit
     • github.com/angular/angular-cli
     • github.com/mgechev/angular2-seed
     

     View Slide

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

     View Slide