LINE 開發社群計畫: 20190806 Vue.js Taiwan @LINE

大家好,我是 LINE Taiwan Technical Writer – Claire Wang。LINE 致力於舉辦對內的技術交流、教育訓練,以及對外的社群聚會、校園演講、開發者徵才日與開發者大會等各式各樣的活動。我們希望創造更多技術分享與跨國交流的機會,同時持續招募優秀人才加入 LINE 台灣開發工程團隊!

KKTIX 活動網頁: 活動網址

今晚邀請 Vue.js Taiwan 社群的朋友們前來 LINE 台北辦公室參加聚會,而本次聚會有超過九成的報名者,是在票亭開放後十秒鐘內完成報名,令人驚豔的數字突顯 Vue 社群與應用的魅力! 今晚的講座共有兩大主題,首先由 LINE Front-end 工程師 Ted Wu 分享 Vue 與 Vuex 的設計概念,以及 LINE TODAY 如何轉為以 Vue 為主進行開發和曾經面臨的挑戰。之後則由 organizer of Vue.js Taiwan – Kuro Hsu 用宏觀的角度討論前端框架,並介紹 Vue 3.0 新特性的亮點。現在,跟我們一起看看今晚的講座討論了哪些精彩細節!

Vue 開發上的實務問題與經驗分享 / Ted Wu

投影片

今晚活動的第一個講座,是由 LINE 台灣 Front-end 工程師 Ted Wu 介紹 Vue 和 Vuex 的概念,並透過 LINE TODAY 開發過程中曾發生的實例,分享 Vue 與 Vuex 的相關設計理念。Ted 本次的分享從介紹 Vue 的發展背景出發,說明 Vue 的創作者非常重視新功能的設計可讓使用者快速上手,希望盡量將學習曲線壓低,並讓使用者只需搭配官方配置的 library 即可建立應用。而 Vue 的另一重要特點是漸進式框架 (Progressive Framework),使 web app 得以隨著功能演化,從小型應用逐步成長。即使 app 是以 pure Javascript 或 jQuery 建立,也可以一步步套用 Vue,而不需要完全砍掉重練。

這裡 Ted 以 LINE TODAY 為例,說明以 Vue 開發應用的過程。LINE TODAY 是專為手機閱讀體驗優化的行動入口網頁,新聞內容來自各大新聞媒體,LINE 用戶可瀏覽、分享、按讚留言或儲存多家媒體的新聞。LINE TODAY 最早屬於實驗性質的產品,整體架構是以 Java Freemarker、pure javascript,以及 jQuery 簡單建置,直到確定商業模式與價值,才更進一步加入各類專職人力正式進行開發。隨著產品功能的成長,開始導入 Vue 進行小型開發,讓每個新功能都是一個獨立的 Vue app。而 Vue 同時也是 component-based framework,只需藉由簡單的指令改變,便可達成以非同步方式載入 Vue component。

Ted 接著再從功能、應用方式、遇到挑戰等角度切入,詳細說明 Vue、Vuex,以及 Vue-Router 在 LINE TODAY 開發中扮演的角色;隨著以 Vue 開發的功能越來越多,LINE TODAY 慢慢轉為直接以 Vue 開發整個頁面並導入 Vuex,而新功能的獨立頁面也開始以 Vue-Router 建立。此外,頁面若有 SSR 需求,則改用 Vue SSR 完成建構。Vuex 是專門管理資料的 library,進行 state management,定義資料的 state、action、getter、mutation 等,LINE TODAY 的各種資料皆由 Vuex 管理,開發時只要照著範例進行即可。儘管如此,利用 Vuex 功能進行開發,仍會面臨不同的挑戰,例如 LINE TODAY 進行頁面切換時,使用 getter 或 computed 容易讓 state 產生改變,導致必須重新進行運算,造成瀏覽器的負擔。另外,LINE TODAY 曾為了使用者體驗而採用 KeepAlive,然而,KeepAlive 會緩存已 render 過的頁面元件,導致在低階手機上操作時容易造成記憶體不足,開發團隊只好選擇移除 KeepAlive。而使用了 googletag dfp 等第三方套件,在頁面重建後,實際上 Dom patch 卻還沒有完成,最終則是採用 $nextTick(),對第三方套件而言,可確保 adSlot 在 render 完成前已準備好。

而 Vue Router 是配合製作 SPA 的框架,換頁時會以 Vue render content 讓使用者體驗非常流暢,但仍須注意記憶體測漏等問題。或在開啟新的頁面時,由於瀏覽器對於頁面的保護,導致回到上一頁時無法確認 index 等問題。最後,Ted 也提到太早期採用新的 library: Vue-Apollo 卻因而無法解決 API dependency 問題的經驗,提醒與會者在考慮採用新的 library 時,事先評估是否有資源可解決相關問題。Ted 詳細地分享 Vue 與 Vuex 的相關功能與應用,並以開發 LINE TODAY 的實務經驗說明曾面臨的挑戰,與會者也很踴躍地提出相關問題,在每個問與答之間,開啟新的想法與機會。

初探 Vue 3.0 Functioㄌn-based API / Kuro Hsu

投影片

活動的第二個講座由 organizer of Vue.js Taiwan – Kuro Hsu 帶領與會者探索 Vue 3.0 未來的重大走向。一開始 Kuro 先分享本次活動有超過九成的報名者,是在票亭開放後十秒鐘內完成報名,除了感謝社群朋友的支持,更表達深刻感受到社群活躍的動能! Kuro 接著引用 Vue 創作者 Evan You 釋出的消息,說明儘管 Vue 3.0 將延遲上市時間,效能卻有突破性的成長,令與會者更加好奇 Vue 3.0 將提供哪些新功能。在眾人的期待中,Kuro 介紹 Vue 3.0 新功能的重點包括:將加強對 TypeScript 的支援與 API 設計的一致性、提高可維護性,以及開放更多底層功能。

另外,也將改採 Proxy API,並進行 Virtual DOM 的重構、優化編譯等。而 Vue 3.0 最重要也最大的核心:Vue Function-based API 又將會有哪些變革呢?Kuro 提到為了增強對 TrypeScript 的支援、與現有 API 的相容性差異太大,以及瀏覽器對 native Class API 的支援不完整等原因,Vue 對現行 Class API 的支援將被取消,以 Function-based API 取代。Function-based API 又稱 composition functions,以「組合代替繼承」實現元件重複使用的概念,且擁有更靈活的邏輯。除此之外,對於 TypeScript 的支援將會更加完善,並將更為 tree-shaking friendly,讓程式碼更易於被壓縮。

初步介紹 Vue 3.0 主要特點後,Kuro 透過比對過去的做法,突顯新功能的優勢。以 Mixins、HOC (Higher-order Components),以及 Renderless Components 為例,各有 Namespace 的衝突、引入的屬性難以追蹤來源,以及多餘元件實體造成性能浪費等多項弱點,相較之下,Vue 3.0 Function-based API 能解決以上所有痛點,提供更強大的開發效能。為了讓與會者進一步感受 Vue 3.0 的新功能,Kuro 從安裝開始以 step-by-step 的方式,在操作情境中介紹多個函式的新功能與用法,包括 setup()、value()、state()、computed()、watch() 等,同時也提醒 provide 與 inject 的作用仍與 v2.x 相同。

接著,Kuro 也以 to-do list app 為主題進行 demo,以兩個並列的表格,比較使用 Vue 3.0 Function-based API 與 Vue 2 option-based API 建立的表格分別有哪些行為,而 Vue 3.0 在打包發布時,透過 tree-shaking 技術,將程式碼如同抖落樹葉般,將不需要的部分去掉,保留需要的部分,有利於形成響應式的設計,貼近目前應用開發的主流趨勢。最後,則回到社群最關心的事,也就是轉為使用 Vue 3.0 的成本。之前 Vue 3.0 升級計畫考慮推出只支持部分 2.x 選項的版本,但經過社群的強力反應後,Vue 3.0 主要針對底層設定進行調整,但將完全相容現有的 API,原本的語法也不會被廢棄,過去的功能仍然適用,請開發者不用擔心!

活動小結

感謝與會者於活動前讓報名秒殺,為今晚的聚會帶來更多動力! 講座主題從 Vue 與 Vuex 出發,介紹 Vue 框架的架構與功能、於前端設計扮演的重要角色,以及 LINE TODAY 開發實務中所經歷的挑戰。之後由 Kuro 接棒聚焦於 Vue 3.0 一探最新功能的亮點與發展走向,並帶來 0 轉換成本的好消息,值得開發者耐心等候。也希望將來有更多新功能開發的案例分享,讓我們再次體驗 Vue 強大的效能與魅力!

立即加入「LINE 開發者官方社群」官方帳號,就能收到第一手 Meetup 活動,或與開發者計畫有關的最新消息的推播通知。▼

「LINE 開發者官方社群」官方帳號ID:@line_tw_dev

關於「LINE 開發社群計畫」

LINE 今年年初在台灣啟動「LINE 開發社群計畫」,將長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等,預計全年將舉辦 30 場以上的活動。歡迎讀者們能夠持續回來察看最新的狀況。詳情請看 2019 年 LINE 開發社群計畫活動時程表 (持續更新) https://engineering.linecorp.com/zh-hant/blog/line-taiwan-developer-relations-2019-plan/)

徵才訊息

《LINE 強力徵才中!》與我們一起 Close the Distance 串聯智慧新世界! 歡迎查看相關職缺,並投遞您的履歷 >> Front End Engineer