Real-World Angular: Erfahrungen aus (fast) vier Jahren Projektgeschäft

Frankfurt, im Februar 2015: In einer Hotellobby probiert die Thinktecture-Crew eine der frühen, blutigen Alphaversionen von Angular 2 aus. Seither sind vier Jahre vergangen. Zurück in Frankfurt zeigt Christian Liebel von Thinktecture, welche Lehren das Thinktecture-Team aus beinahe vier Jahren Projektgeschäft gezogen hat. Wir besprechen bspw. erweiterte TypeScript-Sprachfeatures, die Unterteilung von Angular-Projekten in isolierte Module sowie verschiedene Maßnahmen zur Verbesserung der Performance. Dieser Talk richtet sich an Angular-Entwickler, welche die Grundlagen des Frameworks verstehen und schon erste Projekte damit umgesetzt haben.

Transcript

1. Real-World Angular Erfahrungen aus (fast) vier Jahren Projektgeschäft Christian Liebel @christianliebel Consultant
2. The image part with relationship ID rId3 was not found in the file. The image part with relationship ID rId3 was not found in the file. The image part with relationship ID rId3 was not found in the file. Special Day “Modern Business Applications” Thema Sprecher Datum, Uhrzeit Raum Pragmatische Microservices-Architekturen mit .NET Core – Patterns und Code Christian Weyer DI, 26. Februar 2019, 10.30 bis 11.30 Ballsaal 2 Serverless-Architekturen: Event-basierte Microservices mit Azure Functions und Co. Christian Weyer DI, 26. Februar 2019, 11.45 bis 12.45 Ballsaal 2 Real-World Angular: Erfahrungen aus (fast) vier Jahren Projektgeschäft Christian Liebel DI, 26. Februar 2019, 14.15 bis 15.15 Ballsaal 2 Progressive Enhancement im Web: PWA-Grundlagen Sebastian Springer DI, 26. Februar 2019, 15.30 bis 16.30 Gold 3 PWA Deep Dive: Offlineanwendungen im Griff Christian Liebel DI, 26. Februar 2019, 17.15 bis 18.15 Gold 3
3. Hello, it’s me. Real-World Angular Erfahrungen aus (fast) vier Jahren Projektgeschäft Christian Liebel Follow me: @christianliebel Blog: christianliebel.com Email: christian.liebel @thinktecture.com Cross-Platform & Cloud & Enterprise Blockchain
4. Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular
5. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
6. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
7. Promises vs. Observables Promise (.NET: Task) - wraps an async task - one result - eager execution - not cancellable (exception: abort signals, see Fetch API) - async/await keywords - Native ECMAScript feature async get(url) { const r = await fetch(url); return await r.json(); } Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Promises & Observables
8. Promises vs. Observables RxJS/Observables (.NET: Reactive Extensions) - wraps an async task - one or multiple results - lazy execution - cancellable - operators for high-level flow composition - Library get(url) { return obsFetch(url).pipe( switchMap(r => r.json()) ); } get('https://foo.com') .subscribe(); Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Promises & Observables
9. Observables - Angular heavily relies on RxJS and Observables - Reactive programming is extremely powerful - Even complex operations can be implemented by using only a few lines of code - But: RxJS has a steep learning curve, as it’s a completely different discipline of programming - RxJS has 80+ operators - You have to unsubscribe from long-lived observables, otherwise: Memory leak! Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Promises & Observables
10. Observables - Your developer team should learn RxJS! - https://www.learnrxjs.io - https://rxjs.dev/operator-decision-tree - Prefer Observables over Promises - Avoid subscribing to Observables yourself - Services should not subscribe to Observables. - Let the framework subscribe for you and use the async pipe to use Observables/Promises in a synchronous manner Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Promises & Observables
11. Demo Use Case - Master/detail app - The detail route should take an ID parameter - Fetch the given ID from the server - If it fails, retry it three times with a delay of one second Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Promises & Observables LIVE DEMO
12. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
13. ECMAScript Language Versions After ECMAScript 5 (2009), there was a long break in JavaScript development that lasted until ECMAScript 2015 (6) Since then, a new ECMAScript version is released every year (typically with a small set of changes) Sources: - http://2ality.com/ - https://github.com/tc39/proposals Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript
14. ECMAScript Feature Stages 0 1 2 3 4 STRAWMAN PROPOSAL DRAFT CANDIDATE FINISHED Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript BigInt
15. Language Features Fat-Arrow Functions () => doSomething(); Destructuring Expressions const { clientX, clientY } = event; Exponentation operator 2 ** 3 Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript
16. Language Features TypeScript Compiler is a source-to-source transpiler (target: JavaScript of a given version) TypeScript allows using opt-in static typing Additionally, TypeScript allows you to use (some) Stage 3 features and transpiles them to code understandable by older JavaScript engines (downlevel support). Use TypeScript to write the JavaScript of the future today! Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript
17. Compiler Switches TypeScript has different strict type checking options. Examples: --noImplicitAny --strictNullChecks --strictPropertyInitialization Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript LIVE DEMO
18. Compiler Switches Common Pitfalls - every TS file must obey the strict type checking options, including all third-party libraries - --strict enables all strict type checking options, even future ones you might not know of today! Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript
19. unknown vs. any any is the most-capable type - and thus the most dangerous one - opt-out of TypeScript checks & warnings unknown is the least-capable type - suitable for API borders or libraries without type definitions - first check which type it could be, then use it Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular TypeScript LIVE DEMO
20. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
21. Project Structure Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules Git Repositories CLI Projects NgModules
22. Everything in one module Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules 1 Git Repository 1 CLI Project 1 NgModule
23. Modularization 1 Git Repository 1 CLI Project CoreModule CalculationModule AppModule Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules
24. Monorepo Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules 1 Git Repository Library Project CoreModule CalculationModule App Project AppModule
25. Monorepo ng new myProject --createApplication=false ng generate library myLib ng generate application myApp Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules LIVE DEMO
26. Multiple Repositories Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules Library Repository Library Project CoreModule CalculationModule App Repository App Project AppModule
27. Monorepo Monorepo - Easier to maintain - Not isolated - Suitable when everything is released at the same time (see Angular) Multiple Repositories - More complex to maintain - Isolated - Suitable when implementations have to be independent from each other Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Packages & Modules
28. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
29. Make all vs. Buy all Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Component Libraries Make all Buy all
30. Make all - Implement event handling, styling & co. yourself - Maximum customization (best for use case) - Maximum effort (keyboard, cross-browser testing, performance, a11y) - No external/recurring costs - Best for projects with highly specific use cases Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Component Libraries Make all Buy all
31. Buy all - DevExpress, PrimeNG, ag-Grid, Angular Material, … - Limited customization & predefined styling (Bootstrap) - Minimum effort - (Hopefully) battle-tested (keyboard, cross-browser testing, …) - External/recurring costs - Best for projects with limited budget, time and/or general use cases Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Component Libraries Make all Buy all
32. Angular CDK - Unstyled base functionality for components (Drag and Drop, overlays, tree, table, …) - Battle-tested (keyboard, cross-browser testing, performance, a11y) - Open-source - Best for projects with general use cases and custom styling - https://material.angular.io/cdk/ Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Component Libraries Make all Buy all
33. Angular CDK <cdk-tree> <cdk-tree-node> a node </cdk-tree-node> <cdk-tree-node> another node </cdk-tree-node> </cdk-tree> Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Component Libraries LIVE DEMO
34. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
35. In general - Reduce amount of computations, layouts, paints, … In Angular - Mostly related to Change Detection Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
36. Zone.js Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance current (global) zone NgZone Angular boot
37. A Meta-Monkey Patch Performance setTimeout setInterval geolocation.getCurrentPosition XMLHttpRequest PromiseRejectionEvent requestAnimationFrame click focus mousemove addEventListener Real-World Angular Erfahrungen aus (fast) vier Jahren Projektgeschäft
38. In Angular Applications - Reduce amount of change detection cycles - Disable zone - NgZone - Zone.js patches - ChangeDetectorRef - ChangeDetectionStrategy - Reduce duration of change detection cycle Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
39. Disable zone (= disable async change detection!) platformBrowserDynamic().bootstrapModule(AppModule, { ngZone: 'noop' }); constructor(applicationRef: ApplicationRef) { applicationRef.tick(); // trigger CD yourself } Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
40. Reduce amount of change detection cycles Run performance critical code (mousemove/scroll event listeners, requestAnimationFrame, short setIntervals) outside Angular’s zone Remember: Change detection is turned off! constructor(private _zone: NgZone) {} this._zone.runOutsideAngular(() => performanceCritical().then( () => this._zone.run(() => this.foo = 123) )); Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
41. Reduce amount of change detection cycles Turn off Zone patches in general (see polyfills.ts) (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
42. Reduce amount of change detection cycles @Component({ template: '{{ foo }}', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyComponent { @Input() // detect after change of input only! public foo: string; constructor(cdRef: ChangeDetectorRef) { cdRef.markForCheck(); } } Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
43. Reduce amount of change detection cycles constructor(cdRef: ChangeDetectorRef) { cdRef.detach(); // detaches this view from the CD tree // cdRef.detectChanges(); // detect this view & children // cdRef.reattach(); } Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
44. Reduce amount of change detection duration - Reduce amount of bindings - Avoid binding to (computationally intensive) getters Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
45. Profiling platformBrowserDynamic().bootstrapModule(AppModule).then(module => { const [appComponent] = module.injector.get(ApplicationRef).components; enableDebugTools(appComponent); }); Execute ng.profiler.timeChangeDetection() to measure the duration of a change detection run Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Performance
46. Promises & Observables TypeScript Packages & Modules Component Libraries Performance Cross- Platform Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Talking Points
47. Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Cross-Platform
48. Tools - Ionic - focus on mobile - NativeScript - focus on mobile - mixes Angular (e.g. service logic) with native UI controls - Cordova/Electron - Progressive Web Apps Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Cross-Platform
49. Apache Cordova/GitHub Electron Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Cross-Platform Result: App packages .ipa, .apk, .appx Result: Executables .exe, .app, ELF
50. Progressive Web App Erfahrungen aus (fast) vier Jahren Projektgeschäft Real-World Angular Cross-Platform • No app stores anymore! • Web App = App App • Feature parity: Push notifications, offline availability and more for web & native applications • Backwards compatibility: PWAs can also be run on non-PWA browsers, but with reduced feature set
51. Thank you for your kind attention! Christian Liebel @christianliebel christian.liebel@thinktecture.com