Vue in LINE and choice

Vue in LINE and choice

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

2102a6b8760bd6f57f672805723dd83a?s=128

line_developers_tw

August 06, 2019
Tweet

Transcript

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

  2. None
  3. None
  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

  12. None
  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

  30. None
  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

  34. None
  35. None
  36. Thanks! Q & A