Vue in LINE and choice - Speaker Deck

Slide 1

Slide 1 text

Vue Ted Wu - ted.wu@linecorp.com 開發上的實務問題與經驗分享

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Progressive framework

Slide 5

Slide 5 text

LINE TODAY

Slide 6

Slide 6 text

LINE TODAY

Slide 7

Slide 7 text

LINE TODAY

Slide 8

Slide 8 text

LINE TODAY const BackButton = () => import('modules/views/shares/BackButton.vue' ) import BackButton from 'modules/views/shares/BackButton.vue' const BackButton = () => ({ component: import('modules/views/shares/BackButton.vue' ), loading: LoadingComponent , error: ErrorComponent , delay: 200, timeout: 4000 })

Slide 9

Slide 9 text

LINE TODAY VUEX VUE Router VUE SSR

Slide 10

Slide 10 text

VUEX

Slide 11

Slide 11 text

LINE TODAY

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

computed: { _displayCategoryList() { return this._categoryList.map(category => { return { id: idParser(category.id), underLoading: true } }) ● PURE FUNCTIONS ● DO IT IN MUTATION

Slide 14

Slide 14 text

LINE TODAY

Slide 15

Slide 15 text

LINE TODAY refreshAd(adSlots) { this.$nextTick(() => { googletag.pubads().refresh(adSlots) }) } refreshAd(adSlots) { googletag.pubads().refresh(adSlots) }

Slide 16

Slide 16 text

VUE Router

Slide 17

Slide 17 text

Bundle Bundle Bundle Bundle

Slide 18

Slide 18 text

VUE Router

Slide 19

Slide 19 text

VUE Router

Slide 20

Slide 20 text

VUE Router First page? window.history? document.referrer? document.referrer = ”” document.referrer = ”https://today.line.me/tw”

Slide 21

Slide 21 text

VUE Router history.back() setTimeout(() => fallback(), 1000)

Slide 22

Slide 22 text

VUE Router WRAPPER ● Store history path in to custom array ● SessionStorage ● When history index === 1 history.length === 1 https://today.line.me/tw/article/LL8prz?_hlst=1

Slide 23

Slide 23 text

VUE SSR

Slide 24

Slide 24 text

VUE SSR APP Server Entry Client Entry Server Bundle Client Bundle Bundle Renderer HTML HYDRATION

Slide 25

Slide 25 text

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. Bailing hydration and performing full client-side render. VUE SSR

Slide 26

Slide 26 text

VUE SSR Hello World Hello World

Slide 27

Slide 27 text

VUE SSR https://today.line.me/tw?hidecp=184015 DO IT IN VUEX….

Slide 28

Slide 28 text

document.addEventListener('DOMContentLoaded', () => { ... }) VUE SSR DO IT WHEN Mounted

Slide 29

Slide 29 text

Vue-Apollo

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Vue-Apollo ● ServerPrefetch before beforeCreate ● Cannot solve api with dependency

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text