Pro Yearly is on sale from $80 to $50! »

Introducing Machine Learning to the JavaScript Toolchain

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.

82bafb0432ce4ccc9dcc26f94d5fe5bc?s=128

Minko Gechev

May 16, 2019
Tweet

Transcript

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

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

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

  4. twitter.com/mgechev

  5. twitter.com/mgechev

  6. twitter.com/mgechev

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

  8. twitter.com/mgechev lazy-loading

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

  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
  11. twitter.com/mgechev How do we pick the priorities of the bundles

    to pre-fetch?
  12. twitter.com/mgechev

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

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

    rest
  15. twitter.com/mgechev

  16. twitter.com/mgechev

  17. twitter.com/mgechev Route-based splitting

  18. twitter.com/mgechev $ npm run build # For Angular CLI $

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

  20. twitter.com/mgechev

  21. twitter.com/mgechev

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

  23. twitter.com/mgechev

  24. twitter.com/mgechev

  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
  26. twitter.com/mgechev

  27. twitter.com/mgechev alpha

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

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

    [ // ... new GuessPlugin({ GA: 'XXXXXX' }) ] // ...
  30. twitter.com/mgechev

  31. twitter.com/mgechev

  32. twitter.com/mgechev How it works…

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

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

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

  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
  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
  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, } ];
  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, } ];
  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, } ];
  41. twitter.com/mgechev guess-webpack Set of webpack plugins which automate the build

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

  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 /
  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
  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
  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
  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
  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
  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
  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
  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
  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
  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
  54. twitter.com/mgechev

  55. twitter.com/mgechev

  56. twitter.com/mgechev

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

    granular prefetching Future development
  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

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