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

1. View Slide

2. WHY
   Performance
   MATTERS
   ?!
   ?!
   ?!
   

   View Slide

3. Venditto
   {N}Day2019
   Amsterdam
   Natalia
   

   View Slide

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
   

   View Slide

5. LOAD NOW
   LoL
   

   View Slide

6. BUDGET PATTERNS/
   Architecture
   CACHING
   

   View Slide

7. Photo by Fabian Blank on Unsplash
   

   View Slide

8. View Slide

9. View Slide

10. export/import
    Module1
    Module2
    ModuleN
    vendor.js
    bundle.js
    assemble
    tree.shaking
    dead.code
    .elimination
    

    View Slide

11. CODE
    CODE
    CODE
    SPLITTING
    

    View Slide

12. export/import
    Module1
    Module2
    ModuleN
    vendor.js
    bundle.js
    Chunk1
    Chunk2
    ChunkN
    

    View Slide

13. View Slide

14. lazy
    loading
    lazy
    loading
    

    View Slide

15. Chunk1
    Chunk2
    Chunk3
    Bootstrap
    Route1
    RouteN
    ChunkN
    Guard
    Service
    Resource
    

    View Slide

16. View Slide

17. View Slide

18. Chunk1
    Bootstrap
    Guard
    Service
    Resource
    

    View Slide

19. Chunk1
    Bootstrap
    Guard
    Service
    Resource
    Resource
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. You’re
    online (:
    Load Awesome
    Feature
    

    View Slide

25. You’re
    offline ):
    Load Alternative
    Feature
    

    View Slide

26. Off
    Off
    LINE
    LINE
    Now what?
    ?!
    ?!
    ?!
    

    View Slide

27. To a WORKER
    THREAD
    Off
    Off
    Loading
    Loading
    

    View Slide

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");
    }
    

    View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. profiling
    profiling
    profiling
    

    View Slide

36. View Slide

37. worker.terminate();
    

    View Slide

38. THANK YOU!
    @anfibiacreativa
    

    View Slide