Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

LINE Developers Taiwan
PRO

December 03, 2022
Tweet

More Decks by LINE Developers Taiwan

Other Decks in Technology

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