Fast Not Furious - NativeScript Mobile Apps Performance w/Webpack

A summary of best practices to guarantee best performance at startup, using webpack for code splitting, V8 Heap Snapshot for android, AOT for lazy loading routes in NgApps, and web workers to offload and pre-process resources consuming operations, especially when battery power is low, so the perception of the UI operational state is undisturbed.

Transcript

2. WHY Performance MATTERS ?! ?! ?!
3. Venditto {N}Day2019 Amsterdam Natalia
4. Cold Start Hot Start 141ms 102ms 517ms 411ms 694ms 589ms iOS Results per release type native NS TsApp NS NgApp ~approx. X2 in Android
5. LOAD NOW LoL
6. BUDGET PATTERNS/ Architecture CACHING
7. Photo by Fabian Blank on Unsplash
10. export/import Module1 Module2 ModuleN vendor.js bundle.js assemble tree.shaking dead.code .elimination
11. CODE CODE CODE SPLITTING
12. export/import Module1 Module2 ModuleN vendor.js bundle.js Chunk1 Chunk2 ChunkN
14. lazy loading lazy loading
15. Chunk1 Chunk2 Chunk3 Bootstrap Route1 RouteN ChunkN Guard Service Resource
18. Chunk1 Bootstrap Guard Service Resource
19. Chunk1 Bootstrap Guard Service Resource Resource
24. You’re online (: Load Awesome Feature
25. You’re offline ): Load Alternative Feature
26. Off Off LINE LINE Now what? ?! ?! ?!
27. To a WORKER THREAD Off Off Loading Loading
28. UI Thread const w = new Worker(‘path’); w.postmessage => w.onmessage => w.terminate(); Worker Thread global.onmessage = function(msg) { console.log("Insi de worker..."); global.postMessag e("Hello from worker"); }
35. profiling profiling profiling
37. worker.terminate();
38. THANK YOU! @anfibiacreativa