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
2. Our Sponsor
6. Inspirational thought about programming Agenda
7. What is Angular
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
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
60. “NativeScript 2.0 truly native mobile apps”
61. “NativeScript 2.0 truly native mobile apps”
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
87. Already supported by some IDEs
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
98. manual boring error-prone
99. codelyzer
100. “codelyzer is a project which aims to enforce common style and verify correctness of your program”
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