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

by LINE Developers Taiwan

Slide 1

Slide 1 text

那些我們在LINE購物中⾃⾏打造的輪⼦ Luke Chang 2022.12.03

Slide 2

Slide 2 text

01 02 03 04 Contents Hybrid SSR with ApolloProvider Task Scheduler History State Scrollbar Width

Slide 3

Slide 3 text

Luke Chang LINE TAIWAN EC Front-end Team Lead LINE 購物 Front-end Engineer

Slide 4

Slide 4 text

LINE 購物 Since 2018/01

Slide 5

Slide 5 text

Web App • Vue 2 (SSR) • SASS • GraphQL (Apollo) • Webpack 4 • Jest Web API Tech Stack • Express • GraphQL (Apollo) • TypeScript • Jest

Slide 6

Slide 6 text

Hybrid SSR

Slide 7

Slide 7 text

Vue-Apollo 3.0.0-beta

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Features ApolloProvider • Cache Invalidation • serverPrefetch • Dynamic Query String

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Task Scheduler

Slide 12

Slide 12 text

Use case Task Scheduler

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Implementation state: WAITING job: null state: WAITING job: null state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Create

Slide 17

Slide 17 text

Implementation state: WAITING job: null state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Set TOS

Slide 18

Slide 18 text

Implementation state: READY job: () => {} state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Set Lightbox

Slide 19

Slide 19 text

Implementation state: RUNNING job: () => {} state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Run Lightbox automatically

Slide 20

Slide 20 text

Implementation state: DONE job: null state: READY job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Finish Lightbox

Slide 21

Slide 21 text

Implementation state: DONE job: null state: RUNNING job: () => {} state: WAITING job: null state: WAITING job: null Lightbox TOS Dialog Bubble Run TOS automatically

Slide 22

Slide 22 text

Implementation state: DONE job: null state: RUNNING job: () => {} state: WAITING job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Set Bubble

Slide 23

Slide 23 text

Implementation state: DONE job: null state: DONE job: null state: WAITING job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Finish TOS

Slide 24

Slide 24 text

Implementation state: DONE job: null state: DONE job: null state: WAITING job: null state: READY job: () => {} Lightbox TOS Dialog Bubble Keep waiting

Slide 25

Slide 25 text

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)

Slide 26

Slide 26 text

Implementation state: DONE job: null state: DONE job: null state: DONE job: null state: RUNNING job: () => {} Lightbox TOS Dialog Bubble Run Bubble automatically

Slide 27

Slide 27 text

History State

Slide 28

Slide 28 text

Use case • Form Inputs • Popup/Tab State • Infinite Scrolling

Slide 29

Slide 29 text

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 })

Slide 30

Slide 30 text

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