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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

January 12, 2017
Tweet

Transcript

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

    Platform
  2. Our Sponsor

  3. None
  4. None
  5. None
  6. Inspirational thought about programming Agenda

  7. What is Angular

  8. None
  9. None
  10. None
  11. core (zones, di, abstractions, etc.)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    compiler renderer core (zones, di, abstractions, etc.) router i18n ngUpgrade animations
  26. Integrated Development Platform

  27. on the other hand…

  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
  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
  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
  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
  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
  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
  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
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  44. angular-cli

  45. ng new hello-world

  46. angular-cli • Quick bootstrap of projects • Generating: • Components

    • Services • Directives • Pipes • Support for progressive apps • Codelyzer • many others…
  47. angular-seed

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

  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
  50. Angular’s Core

  51. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>', 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
  52. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>', 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
  53. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>', 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
  54. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>', 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
  55. Renderer

  56. “A set of abstract operations which can be specialized for

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

    a specific platform”
  58. Angular is platform agnostic

  59. None
  60. “NativeScript 2.0 truly native mobile apps”

  61. “NativeScript 2.0 truly native mobile apps”

  62. None
  63. Server-side rendering

  64. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>', 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
  65. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>’, 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
  66. @Component({ selector: 'toggle-button', template: '<button #btn (click)="toggle()">{{on}}</button>', 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
  67. Compiler

  68. ToggleButtonComponent Compilation

  69. ToggleButtonComponent Compiler Compilation

  70. ToggleButtonComponent Compiler InternalComponent Compilation

  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); } } }
  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); } } }
  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); } } }
  74. Transpiles an Angular application and performs a set of transformations,

    producing highly optimized VM friendly output Compiler
  75. Compiler works runtime and build time

  76. ng new hello-world --mobile

  77. angular/mobile-toolkit

  78. Progressive enhancement for web applications

  79. mobile-toolkit • Offline access to static content • Notifications for

    new versions • Efficient download of deltas • Support of push notifications • AppShell
  80. Still immature…

  81. Development experience

  82. Typical JavaScript experience

  83. Angular is… • Built with TypeScript • Compile-time type checking

    • Great IDE/text editors support • Analyzable templates
  84. Type-checking and IntelliSense in templates

  85. None
  86. None
  87. Already supported by some IDEs

  88. None
  89. None
  90. None
  91. Using style guide in your project

  92. Enforcing common style

  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
  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
  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
  96. Code review process

  97. None
  98. manual boring error-prone

  99. codelyzer

  100. “codelyzer is a project which aims to enforce common style

    and verify correctness of your program”
  101. None
  102. Recap • Angular as development platform • Angular CLI and

    angular-seed • Core • Mobile toolkit • Development experience
  103. Resources • angular.io • github.com/angular/angular • github.com/angular/mobile-toolkit • github.com/angular/angular-cli •

    github.com/mgechev/angular-seed
  104. Thank you! github.com/mgechev twitter.com/mgechev blog.mgechev.com