ngx-quicklink & guess-js

livestream video: https://www.facebook.com/wellwind/videos/10219795124334135/

A brief intro for the ngx-quicklink & guess-js, demonstrating the power of these tools and walking through some of their source code.

Transcript

1. ngx-quicklink & guess-js 快速上⼿
2. Chad F/E@Duotify Inc. Angular, react, scss 資訊焦慮症
3. Idle time 閒置時間
4. quicklink Faster subsequent page-loads by prefetching in-viewport links during idle time.
5. ngx-quicklink • Is the targeted links in the viewport? • Intersection Observer API
 • Is browser idle? • requestIdleCallback • 1/60 s - ( JS -> Style -> Layout -> Paint -> Composite )
 • Is connection slow? • navigator.connection.effectiveType • navigator.connection.saveData
 • Prefetches the lazy loaded modules 

6. Behind the scenes link.directive.ts
7. Behind the scenes link.directive.ts
8. Behind the scenes link-handler.service.ts
9. Behind the scenes link-handler.service.ts
10. Behind the scenes link-handler.service.ts
11. Behind the scenes quicklink-strategy.service.ts
12. ngx-quicklink - implement
13. ngx-quicklink - implement
14. ngx-quicklink - implement Determine the logic for preloading and processing lazy-loaded Angular modules. • PreloadAllModules - provided by @angular/router • QuicklinkStrategy - provided by ngx-quicklink • NoPreloading - provided by @angular/router
15. ngx-quicklink - implement
16. quicklink - demo
17. ngx-quicklink - browser support IntersectionObserver requestIdleCallback
18. Problem • How much do we know about user?
 • Config Manually. • Reconfig

19. guess-js
20. Machine Learning Google Analytics Prefetch guess-js
21. guess-js guess-ga
 Fetch data from GA, learn user’s navigation pattern. guess-parser JavaScript framework parsing, implemented route parse. guess-webpack
 Consume guess-ga and guess-parser, provide the config
 of predictive fetching mechanism.
22. guess-js guess-ga
23. guess-js guess-ga ref: Faster Web Navigation with Predictive Prefetching by Minko Gechev.
24. guess-js guess-parser
25. guess-js guess-webpack guess(‘/', ['/example', '/about, ‘/content’])
26. guess-js guess-webpack / vendor.js vendor -> 0.2 about.js -> 0.8 /about about.js example.js -> 0.8 about.js -> 0.2 ...
27. guess-js ref: Faster Web Navigation with Predictive Prefetching by Minko Gechev.
28. guess-js Implement - extend angular cli npm i -D @angular-builders/custom-webpack @angular-devkit/build-angular
29. guess-js Implement - config npm i -D guess-webpack guess-parser
30. guess-js Implement - config npm i -D guess-webpack guess-parser
31. guess-js Implement - config
32. guess-js Implement - config
33. guess-js Implement - config
34. Implement - done npm run build guessjs
35. guess-js with Angular - demo
36. Get your hands dirty.