Vue in LINE and choice

2019/08/06 v-tw meetup #003 @LINE TW - Vue 開發上的實務問題與經驗分享
https://vuejs.kktix.cc/events/v-tw-meetup-003

Transcript

1. Vue Ted Wu - ted.wu@linecorp.com 開發上的實務問題與經驗分享
4. Progressive framework
5. LINE TODAY
6. LINE TODAY
7. LINE TODAY
8. 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 })
9. LINE TODAY VUEX VUE Router VUE SSR
10. VUEX
11. LINE TODAY
13. computed: { _displayCategoryList() { return this._categoryList.map(category => { return { id: idParser(category.id), underLoading: true } }) • PURE FUNCTIONS • DO IT IN MUTATION
14. LINE TODAY
15. LINE TODAY refreshAd(adSlots) { this.$nextTick(() => { googletag.pubads().refresh(adSlots) }) } refreshAd(adSlots) { googletag.pubads().refresh(adSlots) }
16. VUE Router
17. Bundle Bundle Bundle Bundle
18. VUE Router
19. VUE Router
20. VUE Router First page? window.history? document.referrer? document.referrer = ”” document.referrer = ”https://today.line.me/tw”
21. VUE Router history.back() setTimeout(() => fallback(), 1000)
22. 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
23. VUE SSR
24. VUE SSR APP Server Entry Client Entry Server Bundle Client Bundle Bundle Renderer HTML HYDRATION
25. [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
26. VUE SSR <table> <tr><td>Hello World</td></tr> </table> <table> <tbody> <tr><td>Hello World</td></tr> <tbody> </table>
27. VUE SSR https://today.line.me/tw?hidecp=184015 DO IT IN VUEX….
28. document.addEventListener('DOMContentLoaded', () => { ... }) VUE SSR DO IT WHEN Mounted
29. Vue-Apollo
31. Vue-Apollo • ServerPrefetch before beforeCreate • Cannot solve api with dependency
32. Vue-Apollo Remove Vue-Apollo and write a WRAPPER of Vue-Apollo
33. https://career.linecorp.com/linecorp/zh-hant/career/list?classId=&locationCd=TW
36. Thanks! Q & A