前言
大家好，我是 LINE TODAY 團隊的 Angela Wang。感謝 LINE 讓我有機會可以在新辦公室與Vue.JS 社群聯合舉辦線下活動，讓我能分享開發上的經驗。透過討論前端主題讓現場觀眾們可以對該領域有更深入的了解，當然大家會想要知道現場活動內容，讓我們繼續看下去！
本次報名連結：https://vuejs.kktix.cc/events/v-tw-meetup-008
玩轉 Vue component, 積木堆起來
簡述: 元件設計與切割一直是個有趣的課題，如何活用 Vue 做出具備復用性,彈性,同時兼顧效能的元件？今天來分享 LINE TODAY 的一些想法與經驗
LINE TODAY 介紹
LINE TODAY 的目標是成為最大內容入口網站，目前已經陸續推出新聞、賽事直播、電影訂票、選情專區等服務，以台灣為例，LINE TODAY 月活躍用戶超過 1800 萬，最高同時在線人數超過 40 萬。主要開發團隊以台灣團隊為主力隊服務跨國產品，除了使用者多流量大之外，系統也整合了許多 LINE 內部的技術服務。歡迎對產品前端、後端有興趣、希望服務廣大使用者的工程師們加入我們！
技術細節
今晚以 LINE TODAY 多元的文章列表呈現為例，分享 LINE 台灣 Front-end 工程師一些元件設計的想法。在LINE TODAY中，文章列表可能是傳統直式列表、橫式swiper、燈箱型式、塊狀排列等等，而我們希望能夠減少duplicate coding，盡可能保持元件的彈性和復用性，以降低維護難度和提高效率品質。
在實作LINE TODAY時，我們盡量以堆積木的形式拼出想要的頁面。首先定義岀屬於LINE TODAY的text, heading, image, link, button等等基礎元件。
這個步驟除了定調網站的視覺系統，像各大css framework一樣定義好各種typographic/variant外，也會將各元間專屬的邏輯打包封裝，例如image元件就包含了圖片lazy loading、載入大小選擇、及default/error image處理等等。這是我們可以用來打造component的迷你積木。
接著建構通用的container，事先將結構固定好，透過slot挖洞的方式讓使用時填入不同內容。今晚的分享介紹了兩種，第一是單純固定好header, content, footer，會處理module框架樣式的module container，這裡也補充了若需要將參數傳給距離遙遠的Vue component，我們可以考慮使用inject/provide來避免層層props傳遞的困擾 ;
第二是打包listing通用邏輯的list container，將API request, pagination, loading, error/empty stage都預先處理好，透過slot scoped-binding來將資料傳給填入的slot做呈現。
再來是具體呈現文章資訊的內容元件，由於資料跟邏輯相同，我們希望能用一個component就通用於上述所列的各種情境需求，在LINE TODAY的做法是透過傳入type和資料內容來設定class name，並搭配BEM css來滿足不同情境下的樣式邏輯及需求。
此時我們已有呈現文章資訊、處理列表邏輯、定義module框架三種較大積木，我們只需要將不同type的文章積木分別塞入listing container，再填入module container，就能獲得各式的文章列表module並滿足今晚舉例的user story requirement。
最後分享了LINE TODAY的頁面是如何透過API給予的template搭配Vue dynamic component堆疊出來的，這個template機制使得編務相關的需求就完全與工程團隊脫鉤，任何版面的更動調整只需編輯在後台更改設定就能快速完成，既節省開發資源並讓編輯團隊更有效率，也使得LINE TODAY的頁面能夠妥善利用component lazy-loading，動態的根據需求載入需要的元件和相關的i18n檔案，來降低網路的負擔和提昇網頁效能。
活動現場分享
現場提供美味的餐點讓大家在下班過來活動後，還可以吃飽來聽聽社群活動的分享，飽餐一頓！
開場前介紹一下公司現在的職缺以及舉辦活動的相關辦法，讓對於有公司的各位可以關注，LINE CAREERS (linecorp.com)
如何與我們合作
想知道如何申請校園授課與分享嗎？ 歡迎各個系學會與相關社團發送各位的需求到這個連絡信箱： dl_twn_devrel@linecorp.com
如果想加入 LINE 台灣前端部門的大家庭，歡迎大家參考以下連結，投遞你的履歷！期待你們的加入：
結論
很高興經過了這麼久時間可以在線下與大家見面，透過社群分享的活力讓大家可以面對面討論各種不同面向的技術主題，不管你是技術社群、學校、社團、系學會，若對於來 LINE 辦公室舉辦活動有興，歡迎發送各位的需求到這個連絡信箱： dl_twn_devrel@linecorp.com
那我們就下次活動見囉！
活動小結
立即加入「LINE 開發者官方社群」官方帳號，就能收到第一手 Meetup 活動，或與開發者計畫有關的最新消息的推播通知。▼
「LINE 開發者官方社群」官方帳號 ID：@line_tw_dev
關於「LINE 開發社群計畫」
LINE 於 2019 年開始在台灣啟動「LINE 開發社群計畫」，將長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等，已經舉辦 30 場以上的活動。歡迎讀者們能夠持續回來察看最新的狀況。詳情請看: