Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Angular Workshop – Echte Erfahrungen aus echten Projekten

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.

Christian Liebel

February 25, 2017
Tweet

More Decks by Christian Liebel

Other Decks in Programming

Transcript

  1. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Christian Liebel

    Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @chris_liebel E-Mail: [email protected] https://thinktecture.com https://christianliebel.com Gestatten?
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Tools Cordova

    (PhoneGap) for mobile platforms Electron for desktop platforms Cross-Platform-Support
  13. 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
  14. 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
  15. 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
  16. 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
  17. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Mobile Website

    Only In Non-App Scenarios • Angular Universal • Angular Mobile Toolkit Cross-Platform Support
  18. 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
  19. 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
  20. 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…
  21. 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/
  22. 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
  23. 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
  24. 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
  25. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Angular CLI

    > npm install -g @angular/cli > ng new my-app --ng4 Build Process
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Lazy Loading

    const ROUTES: Routes = [{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' }]; Angular Architecture
  40. 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
  41. 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
  42. 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
  43. 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
  44. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Measures Ahead-of-Time

    (AoT) compilation • “XAML to BAML” Bundling • Tree Shaking • Uglify • Compress • … Bundling
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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;
  50. 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;
  51. 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;
  52. 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
  53. !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
  54. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten How To

    Webpack (e.g. Angular CLI build) SystemJS & Rollup Bundling EX #4
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. 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
  63. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Platform Angular

    App Application Layer Rendering Layer Web Worker Server Browser NativeScript … Server-Side Rendering
  64. 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
  65. 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>…
  66. 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
  67. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten The Web

    App Gap Server Rendering Asset Downloads Client Init Client Data Paint Server-Side Rendering
  68. 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
  69. 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
  70. 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
  71. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Single-Page Web

    App Performance Data Flow Component Communication Change Detection Performance
  72. 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
  73. 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
  74. 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
  75. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Change Detection

    Strategies ChangeDetectionStrategy.Default Magically checks for changes and updates bindings accordingly But how? Performance
  76. 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
  77. 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
  78. 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
  79. 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); };
  80. 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
  81. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance A

    Meta-Monkey Patch setTimeout setInterval geolocation.getCurrentPosition XMLHttpRequest PromiseRejectionEvent requestAnimationFrame click focus mousemove addEventListener
  82. 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
  83. 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
  84. 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
  85. 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
  86. 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
  87. 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
  88. Advanced Angular Workshop Echte Erfahrungen aus echten Projekten Performance NgZone

    current (global) zone NgZone mousemove mousemove mousemove mousemove
  89. 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
  90. 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