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. WHY
    Performance
    MATTERS
    ?!
    ?!
    ?!

    View full-size slide

  2. Venditto
    {N}Day2019
    Amsterdam
    Natalia

    View full-size slide

  3. 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 full-size slide

  4. BUDGET PATTERNS/
    Architecture
    CACHING

    View full-size slide

  5. Photo by Fabian Blank on Unsplash

    View full-size slide

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

    View full-size slide

  7. CODE
    CODE
    CODE
    SPLITTING

    View full-size slide

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

    View full-size slide

  9. lazy
    loading
    lazy
    loading

    View full-size slide

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

    View full-size slide

  11. Chunk1
    Bootstrap
    Guard
    Service
    Resource

    View full-size slide

  12. Chunk1
    Bootstrap
    Guard
    Service
    Resource
    Resource

    View full-size slide

  13. You’re
    online (:
    Load Awesome
    Feature

    View full-size slide

  14. You’re
    offline ):
    Load Alternative
    Feature

    View full-size slide

  15. Off
    Off
    LINE
    LINE
    Now what?
    ?!
    ?!
    ?!

    View full-size slide

  16. To a WORKER
    THREAD
    Off
    Off
    Loading
    Loading

    View full-size slide

  17. 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 full-size slide

  18. profiling
    profiling
    profiling

    View full-size slide

  19. worker.terminate();

    View full-size slide

  20. THANK YOU!
    @anfibiacreativa

    View full-size slide