Angular as Integrated Development Platform

Angular is the only framework whose core team provides solution for most of the problems you’ll ever meet as part of your development process. Only a few of the tools you can take advantage of are the router, mobile toolkit, CLI, tools for static code analysis and much more! All of them built by Google.

In this talk I’ll discuss why you should consider Angular for your projects and how quickly and efficiently to start building reliable and scalable applications with the framework.

Transcript

1. ngular
   with Minko Gechev
   github.com/mgechev
   twitter.com/mgechev
   blog.mgechev.com
   as Integrated Development Platform
   

   View Slide

2. Our Sponsor
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. Inspirational thought about programming
   Agenda
   

   View Slide

7. What is
   Angular
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Integrated Development Platform
    

    View Slide

27. on the other hand…
    

    View Slide

28. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

29. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

30. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

31. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

32. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

33. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

34. • Angular’s AoT compiler
    • TypeScript compiler
    • Testing
    • Unit testing
    • e2e testing
    • Coverage
    • Module loader
    • Bundler
    • Provides bundling and tree shaking
    • Linter
    • TypeScript and CSS
    • Minifier
    • Minification & deadcode elimination
    • Service workers management/generation
    Angular Tooling
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. angular-cli
    

    View Slide

45. ng new hello-world
    

    View Slide

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

    View Slide

47. angular-seed
    

    View Slide

48. git clone https://github.com/mgechev/angular-seed
    

    View Slide

49. angular-seed
    • TypeScript transpilation
    • Statically typed dev and prod builds
    • Extensible task configuration
    • Out of the box unit-testing
    • Test coverage
    • e2e testing with protractor
    • Codeyzer
    

    View Slide

50. Angular’s Core
    

    View Slide

51. @Component({
    selector: 'toggle-button',
    template: '{{on}}',
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

52. @Component({
    selector: 'toggle-button',
    template: '{{on}}',
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

53. @Component({
    selector: 'toggle-button',
    template: '{{on}}',
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

54. @Component({
    selector: 'toggle-button',
    template: '{{on}}',
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

55. Renderer
    

    View Slide

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

    View Slide

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

    View Slide

58. Angular is
    platform agnostic
    

    View Slide

59. View Slide

60. “NativeScript 2.0
    truly native mobile apps”
    

    View Slide

61. “NativeScript 2.0
    truly native mobile apps”
    

    View Slide

62. View Slide

63. Server-side rendering
    

    View Slide

64. @Component({
    selector: 'toggle-button',
    template: '{{on}}',
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

65. @Component({
    selector: 'toggle-button',
    template: '{{on}}’,
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

66. @Component({
    selector: 'toggle-button',
    template: '{{on}}',
    styles: ['button { width: 300px; }']
    })
    class ToggleButtonComponent {
    @ViewChild('btn') button;
    private on = false;
    constructor(private r: Renderer) {}
    toggle() {
    this.on = !this.on;
    this.on && this.r.setStyle(this.button, 'opacity', 1);
    !this.on && this.r.setStyle(this.button, 'opacity', 0.2);
    }
    }
    Pseudo code
    

    View Slide

67. Compiler
    

    View Slide

68. ToggleButtonComponent
    Compilation
    

    View Slide

69. ToggleButtonComponent
    Compiler
    Compilation
    

    View Slide

70. ToggleButtonComponent
    Compiler
    InternalComponent
    Compilation
    

    View Slide

71. Pseudo code
    class InternalComponent {
    create() {
    this.btn = this.renderer.createElement('button');
    this.localOn = this.context.on;
    this.renderer.setText(this.btn, this.localOn);
    }
    detectChanges() {
    if (this.localOn !== this.context.on) {
    this.localOn = this.context.on;
    this.renderer.setText(this.btn, this.localOn);
    }
    }
    }
    

    View Slide

72. Pseudo code
    class InternalComponent {
    create() {
    this.btn = this.renderer.createElement('button');
    this.localOn = this.context.on;
    this.renderer.setText(this.btn, this.localOn);
    }
    detectChanges() {
    if (this.localOn !== this.context.on) {
    this.localOn = this.context.on;
    this.renderer.setText(this.btn, this.localOn);
    }
    }
    }
    

    View Slide

73. Pseudo code
    class InternalComponent {
    create() {
    this.btn = this.renderer.createElement('button');
    this.localOn = this.context.on;
    this.renderer.setText(this.btn, this.localOn);
    }
    detectChanges() {
    if (this.localOn !== this.context.on) {
    this.localOn = this.context.on;
    this.renderer.setText(this.btn, this.localOn);
    }
    }
    }
    

    View Slide

74. Transpiles an Angular application and performs a set
    of transformations, producing highly optimized VM
    friendly output
    Compiler
    

    View Slide

75. Compiler works runtime
    and build time
    

    View Slide

76. ng new hello-world --mobile
    

    View Slide

77. angular/mobile-toolkit
    

    View Slide

78. Progressive enhancement
    for web applications
    

    View Slide

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

    View Slide

80. Still immature…
    

    View Slide

81. Development
    experience
    

    View Slide

82. Typical JavaScript experience
    

    View Slide

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

    View Slide

84. Type-checking and IntelliSense in
    templates
    

    View Slide

85. View Slide

86. View Slide

87. Already supported by
    some IDEs
    

    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. Recap
     • Angular as development platform
     • Angular CLI and angular-seed
     • Core
     • Mobile toolkit
     • Development experience
     

     View Slide

103. Resources
     • angular.io
     • github.com/angular/angular
     • github.com/angular/mobile-toolkit
     • github.com/angular/angular-cli
     • github.com/mgechev/angular-seed
     

     View Slide

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

     View Slide