那些我們在LINE購物中自行打造的輪子

Speaker: Luke Chang
Event: {Laravel x Vue} Conf

Transcript

1. 那些我們在LINE購物中 ⾃⾏打造的輪⼦ Luke Chang 2022.12.03
2. 01 02 03 04 Contents Hybrid SSR with ApolloProvider Task Scheduler History State Scrollbar Width
3. Luke Chang LINE TAIWAN EC Front-end Team Lead LINE 購物 Front-end Engineer
4. LINE 購物 Since 2018/01
5. Web App • Vue 2 (SSR) • SASS • GraphQL (Apollo) • Webpack 4 • Jest Web API Tech Stack • Express • GraphQL (Apollo) • TypeScript • Jest
6. Hybrid SSR
7. Vue-Apollo 3.0.0-beta
8. Issues • Prefetch XSS (#158) • SSR issue with plugins that mo difies prototype (#392) • Dated data • Unexpected function calls Requirements Vue-Apollo 3.0.0-beta • Prefetching from sub-compone nts • Skip "prefetch" conditionally • Invalidate cache conditionally
9. Features ApolloProvider • Cache Invalidation • serverPrefetch • Dynamic Query String
10. beforeCreate SSR CSR Initialize queries Start querying without actual network Query from network Retrieve prefetched data Restore created async serverPrefetch beforeMount mounted Life Cycle ApolloProvider Validate cache activated
11. Task Scheduler
12. Use case Task Scheduler
13. Lightbox TOS Bubble Dialog Landing Page テキスト Relevant Component Prerequisite Home page All pages All pages Home page HomePage App App Subcomponent of HomePage API response User settings Browser config API response Landing Flowchart
14. Challenge • Tasks may be defined in different levels of components • Tasks need to know what the successors are • Tasks may not even be initialized at all
15. What we've done • Decouple tasks • Tasks only take care of their own lifecycle • No need to pass status across components • Easy to change the order independently
16. Implementation state: WAITING job: null state: WAITING job: null state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Create
17. Implementation state: WAITING job: null state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Set TOS
18. Implementation state: READY job: () => {} state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Set Lightbox
19. Implementation state: RUNNING job: () => {} state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Run Lightbox automatically
20. Implementation state: DONE job: null state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Finish Lightbox
21. Implementation state: DONE job: null state: RUNNING job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Run TOS automatically
22. Implementation state: DONE job: null state: RUNNING job: () => {} state: WAITING job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Set Bubble
23. Implementation state: DONE job: null state: DONE job: null state: WAITING job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Finish TOS
24. Implementation state: DONE job: null state: DONE job: null state: WAITING job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Keep waiting
25. Implementation state: DONE job: null state: DONE job: null state: DONE job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Finish Dialog (without setting in advance)
26. Implementation state: DONE job: null state: DONE job: null state: DONE job: null state: RUNNING job: () => {} Lightbox TOS Dialog Bubble Run Bubble automatically
27. History State
28. Use case • Form Inputs • Popup/Tab State • Infinite Scrolling
29. State Key How ScrollPosition works in Vue Router? • https://github.com/vuejs/vue-router/blob/dev/src/util/state-key.js • window.history.state.key • history.pushState({ key })
30. History State • Keeps only data we need • Restores only when the compon ent reappears by clicking brows er's history back • Components are destroyed nor mally. Vue's keep-alive History State v.s. Vue's keep-alive • Keeps the entire state of comp onents including children • Restores whenever the compon ent reappears • Needs to handle hooks in backg round
31. Scrollbar Width
32. Use case
33. How to reproduce on macOS
34. One Solution
35. Result
36. Q & A
37. THANK YOU