Introducing Machine Learning to the JavaScript Toolchain

Websites are slow! Double-click shows that the average load time on a 3G network is 19 seconds! On top of that, on mobile devices, JavaScript compared to a JPG image with the same size may require x25 more processing time. How do you speed up your apps? Lazy-loading is here to help! By only loading the minimum amount of JavaScript during the initial page load you can improve the UX dramatically. However, this brings another set of questions - how to decide what to load lazily, and how to provide instant page load by mindfully prefetching the bundles, without draining the users’ mobile data plan? Machine learning is already playing an essential role in our day-to-day life, and it has the potential to assist in our development process for smaller, smarter, and faster JavaScript applications! In this talk, you'll see how you can create a machine learning model from a Google Analytics report. Later, by empowering static analysis techniques, we'll map this model to the lazy-loaded JavaScript chunks and apply predictive prefetching and data-driven bundling. In the last part of the presentation, you'll discover Guess.js which provides a sample implementation of these ideas.

Transcript

1. twitter.com/mgechev
   Introducing Machine Learning To
   The Javascript Toolchain
   twitter.com/mgechev
   github.com/mgechev
   blog.mgechev.com
   

   View Slide

2. twitter.com/mgechev
   twitter.com/mgechev
   github.com/mgechev
   

   View Slide

3. twitter.com/mgechev
   Evolution of the web UI
   Code-splitting
   Prefetching
   Guess.js
   Agenda
   

   View Slide

4. twitter.com/mgechev
   

   View Slide

5. twitter.com/mgechev
   

   View Slide

6. twitter.com/mgechev
   

   View Slide

7. twitter.com/mgechev
   https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e
   

   View Slide

8. twitter.com/mgechev
   lazy-loading
   

   View Slide

9. twitter.com/mgechev
   - Route-based
   - Component-based
   Lazy-loading strategies
   

   View Slide

10. twitter.com/mgechev
    Step 1: Open
    https://example.com/
    Step 2: Determine JavaScript
    which is likely to be required
    Step 3: Download the
    chunks
    Step 4: Store chunks
    in browser cache
    Pre-fetching
    

    View Slide

11. twitter.com/mgechev
    How do we pick the priorities of
    the bundles to pre-fetch?
    

    View Slide

12. twitter.com/mgechev
    

    View Slide

13. twitter.com/mgechev
    Lazy-load everything!
    

    View Slide

14. twitter.com/mgechev
    Lazy-load everything!
    …and let tooling take care of the rest
    

    View Slide

15. twitter.com/mgechev
    

    View Slide

16. twitter.com/mgechev
    

    View Slide

17. twitter.com/mgechev
    Route-based splitting
    

    View Slide

18. twitter.com/mgechev
    $ npm run build
    # For Angular CLI
    $ serve -s dist
    

    View Slide

19. twitter.com/mgechev
    Let’s emulate *really* bad conditions
    

    View Slide

20. twitter.com/mgechev
    

    View Slide

21. twitter.com/mgechev
    

    View Slide

22. twitter.com/mgechev
    Let’s take a look at the GA graph
    

    View Slide

23. twitter.com/mgechev
    

    View Slide

24. twitter.com/mgechev
    

    View Slide

25. twitter.com/mgechev
    - Main & Settings in same chunk
    ‣ Update of the source code
    - Pre-fetch FAQ when the user is at
    Home
    Possible optimizations
    

    View Slide

26. twitter.com/mgechev
    

    View Slide

27. twitter.com/mgechev
    alpha
    

    View Slide

28. twitter.com/mgechev
    $ vim webpack.config.js
    

    View Slide

29. twitter.com/mgechev
    const { GuessPlugin } =
    require('guess-webpack');
    // ...
    plugins: [
    // ...
    new GuessPlugin({ GA: 'XXXXXX' })
    ]
    // ...
    

    View Slide

30. twitter.com/mgechev
    

    View Slide

31. twitter.com/mgechev
    

    View Slide

32. twitter.com/mgechev
    How it works…
    

    View Slide

33. twitter.com/mgechev
    - guess-ga
    - guess-parser
    - guess-webpack
    Packages
    

    View Slide

34. twitter.com/mgechev
    guess-ga
    Fetching structured data from Google Analytics
    

    View Slide

35. twitter.com/mgechev
    guess-parser
    Gets metadata by statically analyzing our app
    

    View Slide

36. twitter.com/mgechev
    app-routing.module.ts
    pseudo code
    

    const routes: Routes = [
    {
    path: 'a/:id',
    loadChildren: './a.js'
    },
    {
    path: 'b',
    loadChildren: './b.js'
    }
    ];
    report
    

    View Slide

37. twitter.com/mgechev
    app-routing.module.ts
    pseudo code
    

    const routes: Routes = [
    {
    path: 'a/:id',
    loadChildren: './a.js'
    },
    {
    path: 'b',
    loadChildren: './b.js'
    }
    ];
    report
    

    View Slide

38. twitter.com/mgechev
    app-routing.module.ts
    pseudo code
    const module = 'settings.module.js';
    const path = './settings';
    const routes: Routes = [
    {
    path: 'profile/:id',
    loadChildren: './profile/profile.module.js'
    },
    {
    path: 'settings',
    loadChildren: path + '/' + module,
    }
    ];
    

    View Slide

39. twitter.com/mgechev
    app-routing.module.ts
    pseudo code
    const module = 'settings.module.js';
    const path = './settings';
    const routes: Routes = [
    {
    path: 'profile/:id',
    loadChildren: './profile/profile.module.js'
    },
    {
    path: 'settings',
    loadChildren: path + '/' + module,
    }
    ];
    

    View Slide

40. twitter.com/mgechev
    app-routing.module.ts
    pseudo code
    const module = 'settings.module.js';
    const path = './settings';
    const routes: Routes = [
    {
    path: 'profile/:id',
    loadChildren: './profile/profile.module.js'
    },
    {
    path: 'settings',
    loadChildren: path + '/' + module,
    }
    ];
    

    View Slide

41. twitter.com/mgechev
    guess-webpack
    Set of webpack plugins which automate the build
    

    View Slide

42. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    

    View Slide

43. twitter.com/mgechev
    Markov Chain
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    /a
    /a/a /a/b
    /b
    /b/a
    /
    

    View Slide

44. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    Activity:
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Probability threshold: 0.5
    

    View Slide

45. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    Activity:
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Probability threshold: 0.5
    

    View Slide

46. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    Activity:
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Probability threshold: 0.5
    

    View Slide

47. twitter.com/mgechev
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    /a
    /a/a /a/b
    /b
    /b/a
    /
    Activity:
    - Download b.bundle.js
    Probability threshold: 0.5
    

    View Slide

48. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    Activity:
    - Download b.bundle.js
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Probability threshold: 0.5
    

    View Slide

49. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    Activity:
    - Download b.bundle.js
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Probability threshold: 0.5
    

    View Slide

50. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Activity:
    - Download b.bundle.js
    - No action
    Probability threshold: 0.5
    

    View Slide

51. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Activity:
    - Download b.bundle.js
    - No action
    Probability threshold: 0.5
    

    View Slide

52. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Activity:
    - Download b.bundle.js
    - No action
    Probability threshold: 0.5
    

    View Slide

53. twitter.com/mgechev
    /a
    /a/a /a/b
    /b
    /b/a
    /
    / /a /a/:id /b /b/a
    / 0 0.3 0 0.7 0
    /a 0 0 0.9 0.1 0
    /a/:id 0 1 0 0 0
    /b 0 0 0 0 1
    /b/a 0 1 0 0 0
    Activity:
    - Download b.bundle.js
    - No action
    - Download a.bundle.js
    Probability threshold: 0.5
    

    View Slide

54. twitter.com/mgechev
    

    View Slide

55. twitter.com/mgechev
    

    View Slide

56. twitter.com/mgechev
    

    View Slide

57. twitter.com/mgechev
    - Ahead-of-Time predictions
    - Collaboration with TF.js
    - Finer granular prefetching
    Future development
    

    View Slide

58. twitter.com/mgechev
    - https://mgv.io/dd-bundling
    - https://mgv.io/cost-of-js
    - https://mgv.io/predictive-fetching
    - https://mgv.io/guess
    References
    

    View Slide

59. Thank you!
    twitter.com/mgechev
    github.com/mgechev
    blog.mgechev.com
    

    View Slide