Front-end Engineer at LINE KYOTO
譯者註解： 這裡指的 LINE MUSIC 在日本上線的產品 。 大家好，我是柴阪浩行 (Shibasaka Hiroyuki)，在LINE的京都開發工程團隊負責前端的開發。大家在工作的時候用電腦聽音樂嗎？LINE MUSIC 不僅有手機版本 App，還有 Web 版網站應用。我們開發的 Web 版網站應用使用 Vue.js 作爲 JS 框架。 https://music.line.me/webapp/ 到目前爲止，這個Web版本的網站應用使用的是Vue2，2022 年 6 月，我們發佈了升級到 Vue 3 的版本。我們的團隊在開發Web版網站應用的功能的同時，也致力於提高性能。性能方面也有很多方面，其中 package 檔案的肥大化是最大的課題。構成應用程序的js和css的 package 大小爲6MB，使用名爲Sentry的監控工具測量對Web版網站應用的訪問量時，顯示時間超過2秒的訪問量約佔一半。我們進行了重構、整理依存套件等，致力於縮小檔案。其中，我們研究了我們網站用最多的 Vue.js，發現升級到 Vue3 可以減少整體的檔案大小。 遷移到 Vue3 本身已計劃就緒，以便將來部署 TypeScript，因此我們決定優先執行此計劃。這篇報道將一邊回顧如何進行移植作業，以及他們在什麼地方下了功夫，一邊寫下去。此外，我們還將結合性能方面的結果進行介紹，這些性能方面的實際改進非常顯著。 使用「遷移構建」進行升級 升級到 Vue 3 需要進行許多更改，很難一步到位。值得慶幸的是，在 Vue3 中，名爲 @vue/compat 的套件提供了兼容模式，稱爲"遷移構建" ("the migration build")。通過在升級 Vue.js 的同時安裝遷移版本，您可以在最低限度的調整下運行 Vue3。此外，文檔 (en) 中還列出了所需的更改，以便可以順利地開始遷移工作。包含遷移版本時，需要修改的部分將顯示爲錯誤或警告。通過解決這些問題，可以毫無猶豫地進行遷移作業。在升級到 Vue 3 時，您還需要升級許多相依的套件。這次多虧了遷移構建，我們才能逐一進行升級，一邊確認運行情況一邊進行工作。 Step 1 首先升級到 Vue 3 相關流程 升級 vue-cli、Vue.js @vue/compat 安裝和啓用兼容模式 支持webpack-dev-server設定的版本變更 修復編譯錯誤 由於 @vue/cli-service 升級會將 webpack-dev-server 版本從 v3 更改爲 v4，因此可能需要更改相關設定。此外，由於相依的套件中有些套件已停止維護，因此我們還進行了升級。由於主要版本號碼的更改，需要進行較大的設置更改，因此花費了很長時間。到處都需要這樣的應對。至此 ， 暫時可通過 Dev Server 來做相關的升級測試 。 Step 2 對應主要規格變更 在此，移植文檔要求以下2處對應。 <transition> 相關類別名稱變更的修改 支持新的全局安裝 API <transition> 的類別名稱在文檔中也有記載，但不會作爲錯誤出現，因此要提前進行更改，以免忘記。 另一個新的全局掛載 API 要求對每個 API 進行大量更改，因爲有些方法已更改或已刪除。此外，由於 Vue I18n 在此時間不再維護了，因此進行了升級。Vue I18n 的移植也提供官方文檔，供您參考。順便說一下，在設置 props 的預設值時，Vue3 無法使用 this 作爲 Vue 實例，因此，如果使用以下方法調用 Vue I18n 文本，則需要進行更改: props: { title: { type: String, default() { return this.$t('title'); // It will not work }, }, } Step 3 升級關鍵套件 然後升級 Vuex 和 Vue-router。剛開始印象最深的是這裏，但只要不做特別的事情，就很容易升級。除了文檔中的說明之外，不需要進行任何更改。 Step 4 修復錯誤並升級相依套件 然後 ， 從此逐個消除剩餘的錯誤和警告 。您可能會覺得您已經完成了大部分工作，因爲您已經完成了重大更改，而且每次升級依賴性套件時，您可能會覺得您已經完成了大部分工作。但是實際上，從這裏開始的工作需要花費很長的時間，因爲有些東西必須找出原因。到目前爲止，只有大約一天的工作時間，而錯誤和測試修復的總時間大約爲 6 天。順便說一下，因爲實際上也在推進其他的項目，所以作爲時間整體花費了1個月的時間。在找到需要升級的相關軟件包或在瀏覽器中運行之前，有些軟件包不會出現錯誤。在此移植中，"從出現錯誤的套件開始依次升級"的方針完全沒有問題。這樣想的話，不就可以輕鬆地開始工作了嗎？首先消除 terminator上顯示的警告（錯誤到此爲止已消除），然後消除瀏覽器控制檯的警告和錯誤。瀏覽器錯誤當然會因頁面和組件而異，並且會按每個 js 顯示使用位置，以查看其行爲並找出問題所在。執行時發生的錯誤中 ， 某些變更後會發生錯誤 ， 因此仔細的提交非常重要 。因爲那樣的話容易判斷原因，所以我覺得能夠回到任何階段是非常好的。 Step 5 修改測試 最後修復了測試程式碼。 我在這個項目中使用 Vue Testing Library 我還需要升級 Vue3，但沒有關於遷移的文章。截至 2022 年 4 月，當我在開發它時，Vue3 的版本在下一個分支中，我通過閱讀其中的原始碼和範例程式碼來收集信息。 一個特別大的變化是對 Vuex 和 Vue-router 的處理。到目前為止，每個實例都是在 render 函數中創建的，您可以在 render 函數的第三個參數中將其與 vue 實例一起處理。https://github.com/testing-library/vue-testing-library/blob/96c0c2d/src/render.js#L30-L43 此版本已棄用此功能，因此您需要創建自己的 Vuex 和 Vue-router 實例。https://github.com/testing-library/vue-testing-library/blob/03c53e1/src/render.js#L22-L26 我們為渲染創建了一個包裝函數並為它編寫了一個單元測試，但讓我們看看我們如何改變它。 修改前 export const initAndRender = (TestComponent, options, configure) => { return render(TestComponent, options, (vue, store, router) => { /* common settings */ const addtionalResponse = configure ? configure(vue, store, router) : {}; return { ...(addtionalResponse ? addtionalResponse : {}) }; }); }; 修改後 export const initAndRender = (TestComponent, options) => { const global = options?.global || {}; const plugins = global?.plugins || []; /* common settings */ // vuex if ('store' in options) { const storeInstance = createStore(options.store); plugins.push(storeInstance); delete options.store; } // vue-router const router = createRouter({ history: createWebHistory(), routes: [...(options.routes || [])], }); plugins.push(router); delete options.routes; // merge options global.plugins = plugins; global.mocks = mocks; options.global = global; return { ...render(TestComponent, options), router }; }; 這是程式碼修改的摘錄，但主要區別在於缺少 render 函數的第三個參數以及增加了對 Vuex 和 vue-router 的描述。為了減少測試程式碼端的更改次數，我們讓小幅改動後可以繼續使用 store 和 routes 選項，並在包裝函數端創建了 Vuex 和 Vue-router 實例。 另外，有一部分我使用了在 render 中生成的 Vue-router 實例，所以我將 router 連同 render 的內容一起返回，以便我可以繼續在測試中使用 router。 很高興我們最初為 render 準備了一個包裝函數，因此我們能夠吸收其中的重大變化。 除此之外，還有很多地方需要修改測試程式碼，所以我們通過反複試驗修改測試程式碼，直到所有測試通過。 第 6 步完成 最後，刪除您一直在使用的遷移構建。如果您沒有收到任何錯誤，那麼它就是在 Vue 3 上運行的正式 Web 應用程序！ 開發完成後，我們要求 QA 團隊進行回歸測試以檢查整體行為。進行這些測試很重要，因為仍然存在一些錯誤。發現的所有錯誤均已修復，現已正式發布。 改進結果 1 捆綁包大小 好吧，這裡是 Omachikane 的性能改進。 我們記錄了在引入 Vue3 和過渡構建之前和之後包大小如何變化，以及何時移除過渡構建。 首先，我比較了在開發模式下構建時的包大小。 圖表從左到右是 遷移工作前 [Step1] 引入Vue3和遷移構建後立即 [Step6] 遷移工作後的比較（刪除遷移構建）。 Central 剛剛升級到 Vue3，他們的大小減半，當我向團隊報告這個結果時，他們大吃一驚。完成遷移工作後，移除遷移構建並成為純 Vue 3 應用程序進一步減小了包大小。 接下來是生產模式下的構建結果。開發模式下，js中的css是外化的，所以文件配置略有不同。 無論它在引入遷移構建期間的行為是否像 Vue 2 一樣，都與遷移工作之前幾乎相同。另一方面，刪除遷移構建並成為純 Vue 3 應用程序將包大小減少了一半。 改進結果 2 頁面顯示速度及其得分 除了 Vue3，我們還推進了 Vite 的引入。Vite 是 webpack 的前端替代品，擁有快速的開發服務器。編譯器也很強大，可以輸出為每個組件分段的文件。由於只加載訪問頁面所需的文件，因此可以進一步提高頁面加載速度。 當我們發布一個包含 Vue 3 和 Vite 引入的版本時，我們決定將其與 Google Lighthouse 上的先前版本進行比較。結果，性能得分從 44 顯著提高到 65。 不是Vue2和Vue3的純粹對比，但效果似乎很棒。 此外，以下爲顯示通過Sentry測量的首頁所需的時間。圖表清楚地顯示，從 Release 之後，頁面顯示時間實際減少了一半。現在，75%的用戶可以在兩秒鐘內查看。 最後 我們部署了Vue3以提高性能，但我們計劃部署Composition API和TypeScript，並希望進一步利用Vue3。今後將繼續致力於重構和改善 ， 推進LINE MUSIC的Web版應用程序的開發 。LINE京都開發室正在招募一起工作的前端工程師。如果您想在京都工作，並且對團隊中的前端開發和產品改進感興趣，有沒有興趣加入我們和我們一起開發？ https://linecorp.com/ja/career/position/1659 譯者註解： 如果對於台灣的 UIT (Front-end) 開發有興趣的朋友，也可以參考以下職缺： Front-End Engineer
LINE Taiwan Technology Evangelist
前言碰巧最近有個日文五十音消除遊戲的 Side Project 正在實作中，參考之前鐵人賽文章，實作上發現有些內容可能是年久失修，導致實作上不太順利，碰巧近期 LINE Login 的官方文件也有更新，並且搭配之前實作的範例是使用 (Screen-LINE-Bullets)，來延伸 Side Project，以下就為各位介紹一下其中使用 LINE Login 的一些過程。TL;DRLINE Login 範例從 Flask 轉到 Vue + FastAPI前後端分離前端用兩個頁面清楚展示 LINE Login SSO 步驟後端兩個 API取得認證導向網址認證 JWT 中的使用者參數環境變數都放後端(較安全)LINE Login 事主專案介紹LINE Login 綁定步驟進入 LINE Developer Console建立 Provider建立 LINE Login channel點選最右面選項把 LINE Login channel 設定為 published啟動 Web App 選項並設定 Callback URL 為 http://localhost:8080/line/authLINE Login 開發時不用 SSL+Domain，但上線後記得改成自家 Domain + SSL把 client_id、client_secret、Callback URL 複製到後端 FastAPI 的環境變數中開始以下文章內容用戶看見的頁面首先先參考前端的路由(後續實作上可能有差){ path: '/line', component: Setting,}, { path: '/line/auth', component: Line,},將用戶導向 Login 頁面 - 前端路由 /line【前端】用戶透過訪問 /line 按下登入鈕 (Setting.vue)取得後端需要導向至 LINE Login 的網址透過 window.location 把用戶轉去 Login 頁面setup() { let url = 'http://localhost:8000'; function login(){ fetch(url+'/login/uri').then(res=>{ res.json().then(el=>{ window.location.replace(el.result) }) }) }}【後端】 FastAPI API 路由位置r_uri = os.environ.get("LINE_LOGIN_URI")client = os.environ.get("LINE_LOGIN_CLIENT_ID")取得兩個環境變數並放入 OAuth2 網址中回傳給前端導向uri = f"https://access.line.me/oauth2/v2.1/authorize?response_type=code&client_id={client}&redirect_uri={r_uri}&scope=profile%20openid%20email&state={state}&initial_amr_display=lineqr"參數 r_uri 以及網址中的 redirect_uri 為 LINE Login 用戶輸入正確登入後會導向的網址，網址就存放在後端 FastAPI 的環境變數中，數值則填上前端頁面的路由，也就是 line/auth 上網址組成方式請參考文件LINE 認證用戶後回到 redirect_uri 的頁面中 - 前端路由 /line/auth當用戶輸入完帳密(QR Code)後 LINE 會重新導向 /line/auth，導回來的網址會有兩個 Query parameter，範例如下(官方文件說明)：http://localhost:8000/?code=xxx&state=ooo參考官方文件，拿到 code 之後要再拿著 redirect_uri、client_id、client_secret 去換用戶資訊，但三個參數安全性問題因此需要放後端，因此由後端 call LINE API 來取得用戶的 JWT 資訊，Query parameter 放置的方式參考 FastAPI 文件，Python code 如下：@router.post("/")def read_users(code: str, state: str): client_id = os.environ.get('LINE_LOGIN_CLIENT_ID') secret = os.environ.get('LINE_LOGIN_SECRET') r = requests.post( "https://api.line.me/oauth2/v2.1/token", data={ "grant_type": "authorization_code", "code": code, "redirect_uri": os.environ.get('LINE_LOGIN_URI'), "client_id": client_id, "client_secret": secret, }, headers={"Content-Type": "application/x-www-form-urlencoded"}) payload = json.loads(r.text)離奇事蹟：JWT 解不開我參考 18 年寫的鐵人賽文章中的 LINE Login 範例程式碼，當我到了 token = token.encode() 步驟時一直顯示 algorithms 有問題TypeError: encode() got multiple values for argument 'algorithm'當初寫的文章中要透過這步驟會把 token 換成 binary 的形式 -> b'xxxxx'，再丟到 decode() 去解密，但即便把 encode 移除後把 id_token 丟進去也是出錯。在百思不得起解的狀態下，決定先不用 JWT 相關的函示庫，參考官方文件最下方的驗證程式來將 ID Token 解碼並進行驗證，如此一來就成功可以解出 JWT 並把使用者的資訊存到 DB 中並回傳給前端頁面使用了。解開範例：{ "iss": "https://access.line.me", "sub": "U1234567890abcdef1234567890abcdef", "aud": "1234567890", "exp": 1504169092, "iat": 1504263657, "nonce": "0987654asdf", "amr": ["pwd"], "name": "Taro Line", "picture": "https://sample_line.me/aBcdefg123456"}結論有些日子沒回來寫 LINE Login 的相關操作步驟，伴隨著 LINE Login 文件有更改後，過往一些自己寫的文章程式碼可能有點年久失修，導致再回來看文章寫程式時出了些錯誤。過程中除了修程式碼外還有個收穫，就是可以透過 使用 LINE Login API 的 Endpoint 來取得用戶的資訊，只要透過 Client_id + id_token 即可取得，甚至不用透過 JWT 解密就可以拿到上述的用戶資訊，實在是很方便(嘗試過很讚)，只是我個人還是比較信任透過 channel_secret 換到的用戶資訊，因此大家在選擇上時可以依照自己的需求去選用喔！
Developer Relations Team, LINE Corporation.
我是Developer Relations室的三木。10月11日，我們邀請了各位Vue.js核心成員到LINE新宿辦公室作客，並與LINE的前端工程師召開簡單的交流會（meet-and-greet）。以下將以照片為中心，介紹交流會的情況。關於LINE的前端組織LINE設有一個稱為前端開發中心(通稱: UIT)的開發組織，負責所有前端的更新，包含各服務的UI、APP內的WebView。在東京、福岡、京都、韓國與台灣等處，設立多個據點，並由許多工程師組成。在時常接觸新的前端技術下工作，將Vue.js、React、AngularJS等框架，整合至服務中，自由選擇並使用。這次，Vue.js核心成員的來訪，雖然是因為他們希望來訪才得以實現，但對於平常就將Vue.js應用於工作之中，並對其動向有高度關心的LINE前端工程師而言，這次是非常具有挑戰性的機會。當天的景象當天，以前端工程師為主，有近50名公司員工聚集在會場。可惜的是，Vue.js的作者Evan You取消來訪本公司，但Nuxt.js的作者Alexandre Chopin與Sébastien Chopin、Vue.js的核心團隊成員Pine Wu、Chris Fritz、Kazpon等多名成員，皆蒞臨本公司。Alexandre Chopin與Sébastien ChopinChris FritzPine Wu（中央）kazupon（右） 開始時，我們簡單介紹LINE的服務與開發組織、前端周邊的Tech Stack。 接下來，以從公司員工蒐集來的問題為基礎，對核心成員進行Q&A。蒐集的問題有10個以上。被提出的問題如以下所示。請問有哪些您認為比React優秀的點？請問是因為什麼因緣際會而參與 Vue.js的開發社群？很好奇平常是從事什麼工作？身為Nuxt的開發者，是怎麼看Next？（是否在意？在意哪些點？）關於Web Components有什麼想法？關於Vue 3.0的取向有什麼想法？Vue為什麼這麼受歡迎？覺得以後會繼續維持如此受歡迎的程度嗎？Vue.js在亞洲圈的使用率特別高，您認為主要原因是什麼？關於TypeScript有什麼想法？ Vue 3.0以後可使用TSX，請問會支援到什麼程度？(以Nuxt.js支援或以editor與CSS in JS整合等) 針對問題的實際回答，將於11/7公開的 UIT INSIDE中介紹，請一併閱讀該篇文章。https://uit-inside.linecorp.com/總時間只有短暫的1個小時，但我認為討論十分熱烈。最後大家拍了大合照後，結束了交流會。很高興各位來賓也都能盡興。 最後 LINE設有許多可在前端領域嘗試新技術的工作。 我們正以以下各招募要項，招募前端工程師，有興趣者請務必考慮應徵。Front End Engineer (台灣)フロントエンドエンジニア (日本)フロントエンドエンジニア（銀行/証券/仮想通貨etc）【LINE Financial】(日本)フロントエンドエンジニア【LINE Game Platform】(日本)フロントエンドエンジニア【O2O開発室】(日本)フロントエンドエンジニア(Ad SDK開発)【LINE Ads Platform】(日本)インフラ開発エンジニア(フロントエンド担当)【全事業対象】(日本)Senior Front-end Engineer【Kyoto Office】(日本)
LINE Taiwan Technical Writer
大家好，我是 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 投影片 https://speakerdeck.com/line_developers_tw/vue-in-line-and-choice 今晚活動的第一個講座，是由 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 投影片 https://speakerdeck.com/kurotanshi/chu-tan-vue-3-dot-0-function-api 活動的第二個講座由 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
