前言
大家好，我是來自 LINE 購物的 Luke，非常榮幸能夠與來自各地的開發者分享我的經驗和知識。這場研討會是一個難得的機會，能夠聚集 Laravel 和 Vue.js 的頂尖開發者，共同探討這兩個框架的最新技術和最佳實作。在這次的演講中，我分享了關於使用 LINE 購物中使用 Vue 開發的一些技巧和技術，以下就與大家分享一下這次演講的內容，希望能對其他開發者也有所啟發。
介紹
LINE 購物 是 2018/01 上線，當時 Vue 主流都還是在使用第二版，許多現在常見的功能在當時都只能由團隊自行實作，如當時的 SSR 也是使用 Vue2 自行實作，若是現在就會直接用 Nuxt（1.0.0 發佈於 2018/1/9）。LINE 購物在前端上分成兩層，一個是 Web App、另一邊則是 API 層，這個 API server 的主要用途是整合不同來源的後端 API，並提供 SSR 所需的功能。
由於我們的 Tech Stack 選擇了 GraphQL，所以在 client side 的套件上，我們一開始就選用了知名的 Vue-Apollo-3.0.0 Beta，除了在當時是功能最為齊全的套件，而且也支援 SSR。但畢竟該套件在當時還只是 beta，仍有需多 bug，且還有少數安全性問題（如 Prefetch XSS(#158) 與 SSR issue(#392)）需要解決，同時我們也有一些需求套件無法提供，因此，在一次 breaking change 的升級中，團隊就乾脆拋棄這個套件，自行實作了一個系統滿足自身需求。
這個 ApolloProvider 就是團隊實作的結果，利用了 Vue 後來引入的 serverPrefetch hook，簡化了 SSR 流程中，在 server side 等待資料載入的邏輯。同時，自行實作的套件還增加了 cache invalidation 及 runtime 決定 query string 等等的客制化需求。
而在一個平台當中當然會有廣告來吸引不同的用戶客群，因應不同的步驟需要展示的廣告也都不同(對應各種 Component)，對應 Vue 渲染週期中都會需要知道之前的步驟是否完成，也有可能遇到先前步驟還沒完成就需要執行的挑戰。
History state - How ScrollPosition works in Vue Router
在開發 LINE 購物的過程中，我們發現了一個滿特別的需求：傳統的 web app，對於重覆進到同一個頁面，通常會有兩種行為，一種是無論何時進到該頁面都會顯示預期狀態（例如下拉式選單預設不展開等），另一種是會記錄該頁面最後一次操作的狀況讓使用者無論何時回到這一頁都會看到最後的結果。但我們這邊發現了第三種的狀態的需求，就是如果使用者是透過瀏覽器的上一頁回到頁面，則我們希望回覆使用者在該頁最後操作的狀態，但如果是透過點擊連結前進到這一頁，則希望顯示預設內容。通常的使用情境會是使用者在一個表單輸入文字，如果使用者打了一些字後進到下一頁，但發現有錯字而按瀏覽器上一頁回去，則我們希望留住使用者最後一次編輯的文字在輸入框裡；但如果使用者是點擊連結重新進入這個表單，但無需保留該表單最後一次的輸入結果，而是顯示預設內容。
-
Form Inputs
-
Popup/Tab State
-
Infinite Scrolling
-
使用下面參考的內容來對應 router 上操作
- https://github.com/vuejs/vue-router/blob/dev/src/util/state-key.js
- window.history.state.key
- history.pushState({ key })
要做到這個需求，一般來說會考慮使用 Vue 的 keep-alive 屬性，但事實上 keep-alive 無法滿足我們的需求，因為 keep-alive 不會知道你是怎麼進到這一頁的，只會知道這一頁是不是重新出現了，此外，keep-alive 會需要保留完整 component 以所有 sub component 的資訊（即使沒有回覆狀態的需求），增加記憶體的用量。因此團隊從 ScrollPosition 的實作方式獲得靈感，設計了一個利用 window.history.state 記錄頁面狀態的 plugin，完成上述的需求。
開發小技巧分享
通常開發者可能 80% 都使用 Mac 做開發，但實際市場上市 80% 用戶在使用 Windows，因此開發上也需要模擬一般用戶會遇到的體驗問題，除了可以從 Mac 的設定上操作，也可以透過 CSS 的方式處理這個問題：
結論
參加技術研討會是一個非常寶貴的經驗，能夠讓我們與其他頂尖開發者交流思想，學習最新的技術和最佳實踐。這樣的活動不僅能夠讓我們擴展技術視野，也能夠讓我們認識更多志同道合的開發者。在這次的研討會上，我學到了很多關於 Laravel 和 Vue 的最新技術和最佳實踐，並且與其他開發者交流了我自己的經驗和見解。這樣的交流和分享能夠讓我們更加成長，不斷提高自己的技能和能力。若以上的內容對於各位開發上有幫助，也歡迎大家分享出去！
活動小結
立即加入「LINE 開發者官方社群」官方帳號，就能收到第一手 Meetup 活動，或與開發者計畫有關的最新消息的推播通知。▼
「LINE 開發者官方社群」官方帳號 ID：@line_tw_dev
關於「LINE 開發社群計畫」
LINE 於 2019 年開始在台灣啟動「LINE 開發社群計畫」，將長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等，已經舉辦 30 場以上的活動。歡迎讀者們能夠持續回來查看最新的狀況。詳情請看: