Advanced Angular Workshop – Echte Erfahrungen aus echten Projekten

Angular ist ein Single-Page-Anwendungsframework von Google, das sich größter Beliebtheit erfreut. Während die Grundlagen schnell erlernt sind, empfiehlt sich auch ein Blick in fortgeschrittene Themenbereiche: Christian Liebel 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. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Christian Liebel @chris_liebel Software Architect
2. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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?
3. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Was euch nicht erwartet Einführung/Grundlagen von Angular, Single-Page Web Applications oder JavaScript Lösungen, die zu 100% auf Ihren Anwendungsfall übertragbar sind Was euch erwartet Vier praktische Beispiele von der Projektfront Problemanalysen, sofern anwendbar Produktionsreife Lösungsansätze
4. Angular 4.0.0-rc.1 and Angular CLI 1.0.0-rc.0 have landed early this morning. Please stick to the versions noted in the README and package.json. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Important Note
5. 13:15–15:00 Part I 15:00–15:30 Pizza time 15:30–17:00 Part II Echtes Cross-Plattform-HTML5 mit Angular Hands-on! Timetable
6. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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 2017: Angular 4, Sep/Oct 2017: Angular 5) Intro
7. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
8. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
9. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
10. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten “Real Cross Platform” 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
11. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
12. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Developer Responsibilities Responsive Design • Bootstrap, Flexbox, … Client App Architecture • Local data storage • Distributed system architecture Cross-Platform Support
13. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Tools Cordova (PhoneGap) for mobile platforms Electron for desktop platforms Cross-Platform-Support
14. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Cordova & Electron Cross-Platform-Support JS HTML CSS .ipa .exe .app ELF .apk .appx Single-Page Web Application Cordova Electron
15. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 1 Code Base, X Platforms Cross-Platform Support
16. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 1 Code Base, X Platforms Cross-Platform Support
17. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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 EX #1
18. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Recap Can be easily handled by Angular’s DI Provide base type and concrete implementations (e.g. desktop/mobile) Cross-Platform Support
19. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
20. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Mobile Website Only In Non-App Scenarios • Angular Universal • Angular Mobile Toolkit Cross-Platform Support
21. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
22. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Mobile Toolkit Status Focused on Progressive Web Apps • Currently exclusively supported by Android Currently disabled in Angular CLI • Planned for March/April (Angular 4 release) Cross-Platform Support
23. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten App Stores Apps today…
24. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Progressive Web Apps (PWA) • 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 Apps tomorrow…
25. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Progressive Web Apps are… https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
26. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Progressive Web Apps
27. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
28. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
29. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Angular CLI > npm install -g @angular/cli > ng new my-app --ng4 Build Process
30. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Angular CLI Usage Bootstrapping • ng new project Scaffolding • ng generate component foo Build process • ng build Development server • ng serve Build Process
31. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
32. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
33. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
34. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Angular CLI vs. Custom Build 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: 0 Setting up a custom-tailored build process can take a considerable amount of time Build Process
35. 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)) }); Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Build Process Custom Gulp Build Step Sample
36. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
37. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
38. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten RxJS Operators Angular Architecture http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-switchMap EX #2
39. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
40. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Observables Make sure to unsubscribe from an observable (Memory Leaks) • By unsubscribing from the observable (user) const sub: Subscription = getObservable().subscribe(x => console.log(x)); sub.unsubscribe(); • By completing the observable (provider) Angular Architecture
41. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
42. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Lazy Loading Principle 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
43. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Lazy Loading const ROUTES: Routes = [{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' }]; Angular Architecture
44. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
45. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
46. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
47. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten The Problem Goal: Angular app • with all components pre-compiled • combined in a single file • without redundant/unused code • uglified, compressed Bundling
48. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Measures Ahead-of-Time (AoT) compilation • “XAML to BAML” Bundling • Tree Shaking • Uglify • Compress • … Bundling
49. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
50. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
51. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Platforms platformBrowserDynamic • JiT platformBrowser • AoT • only pre-rendered component factories exist • ngc is executed before deployment Bundling
52. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Platforms platformServer • Server-Side Rendering (Angular Universal) platformNativeScriptDynamic • Building native apps with Angular platformWorkerApp • Render in Web Worker (background thread) Bundling
53. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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;
54. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten <h1>{{ title }}</h1> Bundling
55. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Bundling JiT Compilation 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;
56. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Bundling AoT Compilation 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;
57. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
58. !function(){ var obj = { foo: function () { // Hi there! }, bar: function () { this.baz(); }, baz: function () { // stub } }; obj.foo(); }(); Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Bundling Tree Shaking Principle
59. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten How To Webpack (e.g. Angular CLI build) SystemJS & Rollup Bundling EX #4
60. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
61. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
62. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
63. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
64. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
65. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
66. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
67. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
68. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Platform Angular App Application Layer Rendering Layer Web Worker Server Browser NativeScript … Server-Side Rendering
69. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
70. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Server-Side Rendering Principle 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>…
71. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Purpose Search Engine Optimization Preview Links (Social Media) Graceful Degregation Reduce Perceived Loading Time Server-Side Rendering
72. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten The Web App Gap Server Rendering Asset Downloads Client Init Client Data Paint Server-Side Rendering
73. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
74. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Preboot.js & The Web App Gap Server Rendering Asset Downloads Client Init Client Data Paint Server-Side Rendering Record Replay
75. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
76. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Single-Page Web App Performance Data Flow Component Communication Change Detection Performance
77. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
78. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
79. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
80. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Change Detection Strategies ChangeDetectionStrategy.Default Magically checks for changes and updates bindings accordingly But how? Performance
81. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
82. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
83. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Execution Context function main() { // const start = performance.now(); a(); setTimeout(b, 0); c(); // const stop = performance.now(); // const ms = stop - start; } Performance
84. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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); };
85. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Benefits Debugging: Pending asynchronous tasks are known Profiling: Measuring performance (Google Web Tracing Framework) Mocking/Testing: Hooks beforeTask, … Performance
86. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance A Meta-Monkey Patch setTimeout setInterval geolocation.getCurrentPosition XMLHttpRequest PromiseRejectionEvent requestAnimationFrame click focus mousemove addEventListener
87. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
88. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance NgZone current (global) zone NgZone Angular boot
89. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten The Problem 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 Performance
90. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance The Fix
91. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance NgZone current (global) zone NgZone mousemove Detect changes mousemove Detect changes mousemove Detect changes mousemove Detect changes
92. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Running Outside Angular constructor (ngZone: NgZone) { ngZone.runOutsideAngular(() => { // runs outside Angular zone ngZone.run(() => { // runs inside Angular zone }); }); } Performance
93. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten The Fix Run performance-critical code outside Angular Setting the box location directly via Renderer & ElementRef.nativeElement Performance
94. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten The Fix Use of Renderer is crucial to stay platform independent elementRef.nativeElement.style.left = "3px"; renderer.setElementStyle(elementRef.nativeElement, "left", "3px"); Performance EX #5
95. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance NgZone current (global) zone NgZone mousemove mousemove mousemove mousemove
96. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance The Fix
97. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten 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
98. 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 Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
99. Fragen? Advanced Angular Workshop Echte Erfahrungen aus echten Projekten
100. Vielen Dank für eure Aufmerksamkeit Christian Liebel @chris_liebel christian.liebel@thinktecture.com