Improving the Performance of an Ionic App

Slides from my presentation at Angular Meetup in Melbourne on Tuesday 19th Sept 2017 (https://www.meetup.com/AngularJS-Melbourne/events/242702029/)

Transcript

1. Improving the Performance of an Ionic App
2. Ionic app: Odecee Technology Radar
3. Demo u https://techradar.odeceelabs.com.au
4. Why Ionic? u Works on browsers u Works on native devices u Single code base u Native look-and-feel u Angular J
5. Initial Performance Profile (on WiFi)
6. Performance matters
7. Strategy u Break down problem into smaller pieces: 1. Server optimisations 2. Client optimisations u Do biggest-benefit optimisations first
8. 1. Server optimisations u Server compression u Headers u Fix that huge PNG (convert to SVG)
9. 1. Results – Page Size Page Size 74% reduction
10. 1. Results – Load Events Load Event 3-4x faster
11. 2. Client optimisations a) Ahead-of-time (AOT) compilation b) Code splitting c) Service Workers (not an exhaustive list!)
12. Web page <App/> 2a. AOT Compilation u Angular supports just-in-time (JIT) and ahead-of-time (AOT) compilation Source Compiler Source Compiler Web page <App/> JIT (traditional) AOT
13. 2a. AOT Compilation - How u Use ngc instead of Typescript tsc u Requires changes to tsconfig.json u In Ionic, ionic-app-scripts build --prod
14. 2a. AOT Compilation - Results Before: After: 5,549,246 bytes 1,421,729 bytes 74% ⬇ With GZIP: 397,500 bytes 93% ⬇
15. 2b. Code Splitting u Side effect of supporting deep-links: code splitting u @IonicPage({segment: '/radar/:radarId'}) u Reduced main bundle size slightly (a few kilobytes) app.bundle.js 1.js app.bundle.js 2.js
16. 2b. Code Splitting Setup radar-detail .module.ts radar-detail .page.ts Rest of the source code nav.push('RadarDetailPage') (weak reference)
17. 2b. Code Splitting – Page Module // radar-detail.module.ts import { NgModule } from '@angular/core' import { IonicPageModule } from 'ionic-angular' import { RadarDetailPage } from './radar-detail' @NgModule({ declarations: [RadarDetailPage], imports: [IonicPageModule.forChild(RadarDetailPage)], entryComponents: [RadarDetailPage] }) export class RadarDetailPageModule {}
18. 2b. Code Splitting – Page Component // radar-detail.component.ts import { Component } from '@angular/core' import { IonicPage, NavParams } from 'ionic-angular' @IonicPage({ name: 'RadarDetailPage', segment: 'radar/:radarId' }) @Component({ templateUrl: 'radar.html', selector: 'radar-detail' }) export class RadarDetailPage { ... }
19. 2c. Service Workers
20. 2c. Service Workers power PWAs u Progressive Web Apps (PWAs) u Performance uCaching static assets uOffline-mode u Push Notifications u Native app behaviours uHome screen icons uNo browser chrome
21. 2c. Service Worker Support https://jakearchibald.github.io/isserviceworkerready/
22. 2c. Implementing Service Workers u sw-lib, sw-precache (now deprecated) u Workbox u CLI u Webpack plugin
23. 2c. Service Workers with Ionic Source files service- worker.js service- worker template Bundles Bundles, static assets Webpack ionic-app-scripts --prod Workbox workbox generate:sw && workbox inject:manifest
24. 2c. service-worker.js importScripts('workbox-sw.prod.v2.0.1.js'); // not the actual filename const workbox = new WorkboxSW(); // Go to the Network first for API requests const cacheFirstStrategy = workbox.strategies.cacheFirst(); const networkFirstStrategy = workbox.strategies.networkFirst({networkTimeoutSeconds: 10}); // Go to the network first for APIs, then to the cache workbox.router.registerRoute('http*://*/api/*', networkFirstStrategy, 'GET'); // Cache the ionicons.woff2?v... file (querystring prevents cache-hit) workbox.router.registerRoute('/assets/fonts/*', cacheFirstStrategy); // The precache array will be populated by workbox-cli. See package.json workbox.precache([]);
25. 2c. Service Worker Demo Time!!!
26. 2c. SW Lessons u Workbox is powerful u Start simple then add capabilities u Debugging can be tricky
27. Final Performance – Page Size 89% reduction
28. Final Performance – Load Events < 1sec to FMP 5-7x faster
29. Final Performance – Network Speed Comparison ≈ 3sec to load over 3G
30. Summary u Performance is a feature u Bang-for-buck optimisations first u Use AoT compilation (default in Angular 5) u Service Workers are powerful – start simply then add capability
31. Thank you! u GitHub – https://github.com/uglow u LinkedIn - https://www.linkedin.com/in/brettuglow/ u Blog - https://medium.com/@u_glow & www.uifx.com
32. Resources u Odecee Tech Radar app – https://techradar.odeceelabs.com.au u AOT Compiler - https://angular.io/guide/aot-compiler u Blog article for this presentation: part 1 & part 2