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

Fast Not Furious - NativeScript Mobile Apps Performance w/Webpack

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.

Natalia Venditto

April 12, 2019
Tweet

More Decks by Natalia Venditto

Other Decks in Technology

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