$30 off During Our Annual Pro Sale. View Details »

Angular as Integrated Development Platform

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.

Minko Gechev

January 12, 2017
Tweet

More Decks by Minko Gechev

Other Decks in Programming

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