Advanced Angular: Praktische Real-World-Projekterfahrungen

Die Grundlagen von Angular sind vermittelt – nun geht es an den täglichen Einsatz in Ihren Projekten. Christian Liebel von Thinktecture zeigt Ihnen auf Basis seiner Erfahrungen aus etlichen Kundenprojekten, wie Sie weiteres Optimierungspotenzial für Ihre Anwendungen entfalten können: Ahead-of-Time-Compilation, verschiedene Change-Detection-Strategien, ngZone, Immutables, Observables, Server-Side Rendering oder ein für den Produktionsmodus optimierter Buildprozess sind nur einige Maßnahmen, um aus Ihrer Angular-Anwendung noch einmal deutlich mehr Performance herauszuholen, als Sie es zur Entwicklungszeit bereits gewohnt sind.

Transcript

1. Christian Liebel @chris_liebel Software Architect Advanced Angular: Praktische Real-World-Projekterfahrungen Angular Days 2017
2. Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @chris_liebel E-Mail: christian.liebel@thinktecture.com https://thinktecture.com https://christianliebel.com Gestatten? Praktische Real-World-Projekterfahrungen Advanced Angular
3. Was Sie nicht erwartet Einführung/Grundlagen von Angular, Single-Page Web Applications oder JavaScript Lösungen, die zu 100% auf Ihren Anwendungsfall übertragbar sind „Echtes“ Hands-On Was Sie erwartet Vier praktische Beispiele von der Projektfront Problemanalysen, sofern anwendbar Produktionsreife Lösungsansätze Praktische Real-World-Projekterfahrungen Advanced Angular
4. Angular 4.0.0-rc.5 and Angular CLI 1.0.0-rc.4 have landed in the meantime. Please stick to the versions noted in the README and package.json. Important Note Praktische Real-World-Projekterfahrungen Advanced Angular
5. 09:00–10:30 Part I 10:30–11:00 Break 11:00–12:30 Part II Timetable Praktische Real-World-Projekterfahrungen Advanced Angular
6. AngularJS vs. Angular 2 vs. Angular AngularJS First version (2009), written in JavaScript Angular 2 Complete rewrite (2016), written in TypeScript Angular “It’s just Angular!” Semantic versioning, time-based release schedule (Mar 23, 2017: Angular 4, Sep/Oct 2017: Angular 5) Intro Praktische Real-World-Projekterfahrungen Advanced Angular
7. TypeScript Open Source by Microsoft Language: Superset of JavaScript Source-to-source compiler (compiles to JavaScript) Opt-In Static Typing (allows Code Completion) Use ECMAScript 2017+ features today (async/await operators, decorators, …) First-Class IDE Support: Visual Studio (Code), WebStorm, Atom, … liebel.io/ng-ws Intro EX #0 Praktische Real-World-Projekterfahrungen Advanced Angular
8. git pull git reset --hard Progressive Web Apps Das Web wird nativ(er) Helpful Git Commands
9. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
10. The Problem Diversity of devices and platforms Resources (personnel, time, money) are limited “Write once, run anywhere” Error rate grows with code base size Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
11. HTML5, CSS3 and JavaScript • Desktop: Windows, macOS, Linux, … • Mobile: iOS, Android, Windows 10 Mobile, … • Browser: Chrome, Firefox, Edge, Safari, … • Others: Nintendo DS, Refrigerator, … Cross-Platform Support “Real Cross Platform” Praktische Real-World-Projekterfahrungen Advanced Angular
12. Single-Page Web Apps Single-Page Web Applications (SPA) are the preferred model for implementing large-scale apps “Fat clients”/Rich Internet Applications Angular is an SPA framework cross-platform support out of the box Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
13. Developer Responsibilities Responsive Design • Bootstrap, Flexbox, … Client App Architecture • Local data storage • Distributed system architecture Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
14. Tools Cordova (PhoneGap) for mobile platforms Electron for desktop platforms Cross-Platform-Support Praktische Real-World-Projekterfahrungen Advanced Angular
15. Cordova & Electron Cross-Platform-Support JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Cordova Electron Praktische Real-World-Projekterfahrungen Advanced Angular
16. 1 Code Base, X Platforms Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
17. 1 Code Base, X Platforms Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
18. Handling Platform Differences Different APIs depending on the environment, e.g. camera access Browser/Electron: navigator.mediaDevices.getUserMedia() Cordova: navigator.camera.getPicture() Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
19. How To Base Camera Service Mobile Camera Service Desktop Camera Service { provide: CameraService, useFactory: CameraServiceFactory } export function CameraServiceFactory() { // return ???; } Cross-Platform Support EX #1 Praktische Real-World-Projekterfahrungen Advanced Angular
20. Recap Can be easily handled by Angular’s DI Provide base type and concrete implementations (e.g. desktop/mobile) Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
21. Recap Masquerading platform differences by dependency injection and polymorphism Prevents endless switch blocks, #ifdef compiler flags, … constructor(private _camera: CameraService) { } // this._camera.getPicture(); Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
22. Mobile Website Only In Non-App Scenarios • Angular Universal • Angular Mobile Toolkit Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
23. Angular Mobile Toolkit “all the tools and techniques to build high-performance mobile apps” • https://mobile.angular.io/ Service Workers • Caching • Offline Availability Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
24. Mobile Toolkit Status Focused on Progressive Web Apps • Currently exclusively supported by Android Service worker generation supported by CLI • Since 1.0.0-rc2 Cross-Platform Support Praktische Real-World-Projekterfahrungen Advanced Angular
25. App Stores Progressive Web Apps Praktische Real-World-Projekterfahrungen Advanced Angular
26. Apps tomorrow… • Idea: No App Store required • Web App = App App • Feature Parity: Native Experience leveraging Push notifications, Offline capability, … • Powered by Google, available on Android today • Backwards compatible (Progressive Enhancement) • PWA is not a technology, but a list of features/requirements Progressive Web Apps (PWA) Praktische Real-World-Projekterfahrungen Advanced Angular
27. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps are… https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Praktische Real-World-Projekterfahrungen Advanced Angular
28. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS Progressive Web Apps Praktische Real-World-Projekterfahrungen Advanced Angular
29. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
30. The Problem Web application development is getting more complex Usage of source-to-source compilers like TypeScript, LESS, … Fast and easy development and production We need a build process! Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
31. Angular CLI > npm install -g @angular/cli > ng new my-app --ng4 Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
32. Angular CLI Usage Bootstrapping • ng new project Scaffolding • ng generate component foo Build process • ng build Development server • ng serve Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
33. Angular CLI Advantages Extremely easy and fast setup No configuration E2E and unit test support A good starting point for • learning Angular basics • seeing quick results (generalized use cases, private projects) Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
34. Angular CLI Drawbacks Differs from Angular’s QuickStart and core documentation by using Webpack instead of SystemJS Opinionated directory structure/naming “One size fits all” build process Hardly extensible/configurable (as of beta) Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
35. Angular CLI Eject ng eject since 1.0.0-beta.32 “Ejects” Webpack configuration and build scripts to project scope ng build => npm run build Problem: build scripts are getting stale Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
36. Custom (delta) builds can unleash faster development speed compared to Angular CLI e.g. based on Gulp (or ejected Angular CLI build) More flexibility (e.g. 2+ repositories) Tailored to the customer’s needs Thinktecture customer projects using Angular CLI: 1 Setting up a custom-tailored build process can take a considerable amount of time Build Process Angular CLI vs. Custom Build Praktische Real-World-Projekterfahrungen Advanced Angular
37. gulp.task('prod:bundle', done => { return rollup({ entry: './build/aot/src/app/main.aot.js', format: 'iife', plugins: [ nodeResolve({ jsnext: true, module: true }), commonjs(), uglify() ] }) .pipe(source('app.js')) .pipe(gulp.dest(config.prod.target)) }); Custom Gulp Build Step Sample Build Process Praktische Real-World-Projekterfahrungen Advanced Angular
38. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
39. Observables Asynchronous, event-based applications Operate with values that change continuously over time Angular has Observables support built right in Using RxJS (JavaScript edition of Reactive Extensions) High-Level Flow Composition (map, switchMap) Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular
40. RxJS Operators Angular Architecture http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap Praktische Real-World-Projekterfahrungen Advanced Angular
41. Observables vs. Promises Observables • Can return multiple values over time • Can manage multiple listeners • Can be cancelled • Intended for composing flow and sequences of asynchronous data Should we always use Observables? Use the right tool for the right job. Promises (native ES 2015 feature) might be just enough! Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular
42. Observables Observables are everywhere around in Angular Example: Routing You can subscribe to route parameter changes and react to them without re-instantiating the component (performance) Example: HTTP Angular’s Http service returns Observables by default This can be combined using RxJS’s operators. Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular
43. How To Observables Subscribe to route parameter changes Send a request to the StarWars API (https://swapi.co) Combine both asynchronous operations: If the user navigates away or changes the route before the request returns, cancel it. Praktische Real-World-Projekterfahrungen Advanced Angular
44. How To 1. Inject ActivatedRoute into your component 2. Bind to params 3. Extract “ID” from the params object (data over time) 4. Start an Http request and cancel the in-flight request (if any); use switchMap here. Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular EX #2
45. Observables Make sure to unsubscribe from an observable (Memory Leaks) • By unsubscribing from the observable (user; long-lived observables) const sub: Subscription = getObservable().subscribe(x => console.log(x)); sub.unsubscribe(); • By completing the observable (provider; short-lived observables) Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular
46. Recap Observables Multiple values, multiple listeners, cancellable Observables are the preferred way for handling asynchronous operations in Angular Can be easily combinded using the operators of RxJS There are cases where Promises might just be enough Praktische Real-World-Projekterfahrungen Advanced Angular
47. Lazy Loading Angular router supports lazy loading components transparently Lazy loaded components are not delivered to/loaded by the client on boot, but on purpose Loaded on usage or in the background after the boot (preloading) Custom preloading strategies Reduces load & perceived loading time Currently unsupported when using SystemJS & Rollup (no chunks) Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular
48. Lazy Loading const ROUTES: Routes = [{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' }]; Angular Architecture Praktische Real-World-Projekterfahrungen Advanced Angular
49. Lazy Loading Lazy Loading is module-based Module is resolved by a module reference (e.g. SystemJS “URL”) Routing is delegated to the module called Angular Architecture EX #3 Praktische Real-World-Projekterfahrungen Advanced Angular
50. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
51. The Problem Angular’s development directory structure is hard to • deploy • serve • cache • … Lots of files, lots of requests Angular and its dependencies are large in size, apps use only a fragment Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
52. The Problem Just-in-Time compilation (JiT) • Slow, client-side rendering • Compiler is 1.2 MB large in size • Template errors detected at runtime only • Potentially dangerous (injection attacks) Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
53. The Problem Goal: Angular app • with all components pre-compiled • combined in a single file • without redundant/unused code • uglified, compressed Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
54. Measures Ahead-of-Time (AoT) compilation • Pre-compiling all modules and components (offline) Bundling • Tree Shaking • Uglify • Compress • … Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
55. Status Quo Angular Quickstart & CLI use Just in Time (JiT) compilation per default Angular CLI provides AoT & production build out of the box AoT requires some additional steps Pre-compiling the application using the (offline) Angular compiler ngc A different Angular runtime platform has to be used Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
56. Platforms & Renderers Angular is platform-independent, i.e. Angular-based apps can run outside of the browser • AngularJS: hides information in DOM Angular provides support for custom renderers Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
57. Platforms platformBrowserDynamic • JiT platformBrowser • AoT • only pre-rendered component factories exist • ngc is executed before deployment Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
58. Platforms platformServer • Server-Side Rendering (Angular Universal) platformNativeScriptDynamic • Building native apps with Angular platformWorkerApp • Render in Web Worker (background thread) Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
59. Angular Compilation Bundling https://www.youtube.com/watch?v=kW9cJsvcsGo Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } Template <div>hello {{ user.name }}</div> View Class var v = this.comp.user.name; Praktische Real-World-Projekterfahrungen Advanced Angular
60. <h1>{{ title }}</h1> Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
61. JiT Compilation Bundling Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } Template <div>hello {{ user.name }}</div> Server Client Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } Template <div>hello {{ user.name }}</div> View Class var v = this.comp.user.name; Praktische Real-World-Projekterfahrungen Advanced Angular
62. AoT Compilation Bundling Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } Template <div>hello {{ user.name }}</div> Server Client Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } View Class var v = this.comp.user.name; Template <div>hello {{ user.name }}</div> View Class var v = this.comp.user.name; Praktische Real-World-Projekterfahrungen Advanced Angular
63. Tree Shaking “A Tree Shaker walks the dependency graph, top to bottom, and shakes out unused code like dead needles in a Christmas tree.” • https://angular.io/docs/ts/latest/cookbook/aot-compiler.html Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
64. !function(){ var obj = { foo: function () { // Hi there! }, bar: function () { this.baz(); }, baz: function () { // stub } }; obj.foo(); }(); Tree Shaking Principle Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
65. How To Webpack (e.g. Angular CLI build) SystemJS & Rollup Bundling EX #4 Praktische Real-World-Projekterfahrungen Advanced Angular
66. Recap ng new demo-app --ng4 ng build // no tree shaking, JiT ng build --aot // no tree shaking, AoT ng build --prod // tree shaking, AoT Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
67. A Simple Demo App Dev build: 3.0 MB (without source maps) AoT build: 1.6 MB (without source maps) AoT+TreeShake: 880K (220K gzipped) Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
68. A Simple Demo App JiT build: ~650 ms AoT build: ~300 ms Mid 2015 MacBook Pro, served locally a few test runs, results may & will vary Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
69. AoT Drawbacks Dynamic template compilation via ComponentFactoryResolver is discouraged in combination with AoT COMPILER_PROVIDERS are unavailable • https://github.com/angular/angular/issues/11780 Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
70. SystemJS/Rollup Drawbacks Rollup does not support chunks • i.e. it can only create one single output file Tree Shaking with Rollup removes ability to lazy load SystemJS packages • Lazy Loading isn’t possible Bundling Praktische Real-World-Projekterfahrungen Advanced Angular
71. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
72. Angular Universal Provided by the Angular team Open Source • https://github.com/angular/universal As of now: No CLI support Currently being merged into Angular Core (landed in beta.8) Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
73. Isomorphic vs. Universal Isomorphic (2011) Ability of JavaScript apps to run on both the server and the client Isomorphic JavaScript (2013) Future of web apps, same source is used to render on server/client Universal JavaScript (2015) JavaScript that is able to run in any environment Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
74. Angular App Application Layer Rendering Layer Web Worker Server Browser NativeScript … Platform Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
75. Principle Pre-render the website using the same sources that are served Once Angular kicks in, the view is replaced with the client-rendered one Supports Node.js, ASP.NET Core, … Support planned for Java, PHP, … JiT and AoT support (AoT strictly recommended for production) Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
76. Principle Server-Side Rendering Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } Template <div>hello {{ user.name }}</div> Server Client Component @Component({ … }) class UserComponent { user = { name: 'Chris' }; } View Class var v = this.comp.user.name; Template <div>hello {{ user.name }}</div> View Class var v = this.comp.user.name; index.html <!DOCTYPE html><head>… Praktische Real-World-Projekterfahrungen Advanced Angular
77. Purpose Search Engine Optimization Preview Links (Social Media) Graceful Degredation Reduce Perceived Loading Time Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
78. Server Rendering Asset Downloads Client Init Client Data Paint The Web App Gap Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
79. Preboot.js Filling the Web App Gap Records interactions of the user on the server-rendered part Replays the interaction once Angular kicks in on the client side Server-Side Rendering Praktische Real-World-Projekterfahrungen Advanced Angular
80. Server Rendering Asset Downloads Client Init Client Data Paint Preboot.js & The Web App Gap Advanced Angular Praktische Real-World-Projekterfahrungen Server-Side Rendering Record Replay
81. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
82. Single-Page Web App Performance Data Flow Component Communication Change Detection Performance Praktische Real-World-Projekterfahrungen Advanced Angular
83. Angular Performance Uni-directional data flow (exclusively) Prevents change detection cycles • AngularJS: 10 $digest() iterations reached “Virtual” two-way binding in Angular by combining property/event bindings • Banana in a box/compiler magic: [(ngModel)] Performance Praktische Real-World-Projekterfahrungen Advanced Angular
84. Change Detection Strategies <my-component [foo]="bar"> </my-component> @Component({ selector: 'my-component', template: '{{ foo }}', changeDetection: ChangeDetectionStrategy.OnPush }) export class MyComponent { @Input() public foo: string; } Components can restrict change detection to changes of @Input parameters (OnPush) Immutables are required, otherwise model and view can get out of sync Performance Praktische Real-World-Projekterfahrungen Advanced Angular
85. Immutable.js to the rescue Immutable.js is a library that does not update data in place, but yields updated data instead https://facebook.github.io/immutable-js/ const map1 = Immutable.Map({ a: 1, b: 2, c: 3 }); const map2 = map1.set('b', 50); map1.get('b'); // 2 map2.get('b'); // 50 map2.toObject(); // { a: 1, b: 50, c: 3 } Performance Praktische Real-World-Projekterfahrungen Advanced Angular
86. Change Detection Strategies ChangeDetectionStrategy.Default Magically checks for changes and updates bindings accordingly But how? Performance Praktische Real-World-Projekterfahrungen Advanced Angular
87. A look at Angular’s dependencies "dependencies": { "@angular/common": "~2.4.0", "angular-in-memory-web-api": "~0.2.4", "systemjs": "0.19.40", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.7.4" }, Performance Praktische Real-World-Projekterfahrungen Advanced Angular
88. Zone.js Provided by the Angular team • https://github.com/angular/zone.js Provides an execution context for asynchronous JavaScript A meta-monkey patch Performance Praktische Real-World-Projekterfahrungen Advanced Angular
89. Execution Context function main() { // const start = performance.now(); a(); setTimeout(b, 0); c(); // const stop = performance.now(); // const ms = stop - start; } Performance Praktische Real-World-Projekterfahrungen Advanced Angular
90. Zone.js Oversimplified Zone.run(main); onZoneEnter(); function main() { a(); setTimeout(b, 0); c(); } onZoneLeave(); Performance const orig = window.setTimeout; window.setTimeout = (c, t) => { orig(() => { onZoneEnter(); c(); onZoneLeave(); }, t); }; Praktische Real-World-Projekterfahrungen Advanced Angular
91. Benefits Debugging: Pending asynchronous tasks are known Profiling: Measuring performance (Google Web Tracing Framework) Mocking/Testing: Hooks beforeTask, … Performance Praktische Real-World-Projekterfahrungen Advanced Angular
92. A Meta-Monkey Patch Performance setTimeout setInterval geolocation.getCurrentPosition XMLHttpRequest PromiseRejectionEvent requestAnimationFrame click focus mousemove addEventListener Praktische Real-World-Projekterfahrungen Advanced Angular
93. Zone.js Angular’s change detection is based on Zone.js • AngularJS digest cycle: $timeout, $apply() Angular is running inside an own zone, referred to as the NgZone Performance Praktische Real-World-Projekterfahrungen Advanced Angular
94. NgZone Performance current (global) zone NgZone Angular boot Praktische Real-World-Projekterfahrungen Advanced Angular
95. Boxes, draggable around the screen Component requires “default” change detection (i.e. it can’t rely on input changes) Dragging performance drops drastically with an increasing number of boxes The Problem Performance Praktische Real-World-Projekterfahrungen Advanced Angular
96. Performance Status Quo Praktische Real-World-Projekterfahrungen Advanced Angular
97. NgZone Performance current (global) zone NgZone mousemove Detect changes mousemove Detect changes mousemove Detect changes mousemove Detect changes Praktische Real-World-Projekterfahrungen Advanced Angular
98. Running Outside Angular constructor (ngZone: NgZone) { ngZone.runOutsideAngular(() => { // runs outside Angular zone ngZone.run(() => { // runs inside Angular zone }); }); } Performance Praktische Real-World-Projekterfahrungen Advanced Angular
99. The Fix Run performance-critical code outside Angular Setting the box location directly via Renderer2 & ElementRef.nativeElement Performance Praktische Real-World-Projekterfahrungen Advanced Angular
100. The Fix Use of Renderer2 (Angular 4.0.0-rc.3 onwards, before: Renderer) is crucial to stay platform independent elementRef.nativeElement.style.left = "3px"; renderer2.setStyle(elementRef.nativeElement, "left", "3px"); Performance EX #5 Praktische Real-World-Projekterfahrungen Advanced Angular
101. NgZone Performance current (global) zone NgZone mousemove mousemove mousemove mousemove Praktische Real-World-Projekterfahrungen Advanced Angular
102. The Fix Performance Praktische Real-World-Projekterfahrungen Advanced Angular
103. The Fix In particular, this has also helped fixing Protractor timeouts when long- running asynchronous tasks are launched on application startup • https://christianliebel.com/2016/11/angular-2-protractor-timeout- heres-fix/ Performance Praktische Real-World-Projekterfahrungen Advanced Angular
104. Cross-Platform Support • Single-Page Applications • Handling Platform Differences Build Process • Angular CLI • Custom Build Angular Architecture • Observables • Lazy Loading Bundling • Ahead of Time Compilation • Tree Shaking Server-Side Rendering • Angular Universal • Preboot.js Performance • Change Detection Strategies • Immutables • Zone.js Praktische Real-World-Projekterfahrungen Advanced Angular
105. Fragen? Praktische Real-World-Projekterfahrungen Advanced Angular
106. Vielen Dank für Ihre Aufmerksamkeit Christian Liebel @chris_liebel christian.liebel@thinktecture.com