（來源：JSDC 提供） 
（來源：JSDC 提供） 
（來源：JSDC 提供）
大家好，我是 LINE Taiwan Technical Writer – Claire Wang，這次帶著期待的心情以 LINER 身份參加 JSDC 2019，與 JavaScript 社群一起探索 JavaScript 的未來!
JSDC 2019 於 10 月 26 日，在富邦國際會議中心舉辦，並由 LINE 台灣擔任鈦金級贊助。我們特別邀請來自 LINE 福岡的開發人員，透過技術議程為 JSDC 與會者介紹最新的服務與開發技術。此外，我們也在活動現場設置公司攤位，由 LINE 福岡與 LINE 台灣的開發人員定時為與會者帶來精彩短講，介紹日本與台灣各開發團隊，包含 LINE SPOT、LINE SHOPPING、LINE TRAVEL、LINE TODAY、LINE Front-end、LINE Pay 的工作內容，並以最大的熱忱歡迎與會者和 LINERs 面對面互動，暢談對於 LINE 開發技術與職涯的看法。
什麼是 JSDC?
JavaScript 開發者年會 (JavaScript Developer Conference，簡稱 JSDC) 是台灣最大的 JavaScript 年度性技術研討會，旨在提供台灣中高階 JavaScript 技術人才與世界最新 JavaScript 相關技術討論與分享。
JSDC 由 2011 年底開始，由三個台灣開發者社群共同發起，近年各式開發者社群蓬勃發展 Front-End Developer、Angular.tw、ReactJS.tw 等新興社群⼀⼀成立，期許 JSDC 能成為每年網⾴技術開發者的中⾼階技術交流活動，整合來自獨立開發者、企業、組織及機構的科技力量，並致力於知識全球化，讓參與者重新認識 JavaScript。
Keynote 與技術議程
JSDC 2019 邀請眾多國內外知名專家，於兩個 track 同步開講，帶來 JavaScript 最新開發知識饗宴，我也積極把握機會，用心聆聽 keynote 與技術議程．藉由以下的重點整理，與讀者分享 JSDC 2019 的精彩內容!
(Keynote) Deep Learning in JS / Ashi Krishnan
有別於過去多以 Python、C++ 等語言主導人工智慧及機器學習技術的發展，本議程由 Ashi Krishnan 從機器學習的基本概念介紹開始，協助開發者了解如何應用深度學習 (deep learning)，並分享應該以什麼樣的思維，面對深度學習無所不在的未來生活。Ashi 目前是 Github 的資深工程師，擁有 27 年開發經驗，負責下一代開發者工具。
Ashi 首先說明，人工智慧應用已深入社群網路平台，它是機器學習的產物，並為演算法催生了新思維。儘管人工智慧還未能全面取代人類的工作，卻必然將為我們的生活帶來重大改變。因此，必須正視人工智慧和機器學習所帶來的影響，而 model 在其中扮演著重要角色。什麼是 model 呢? Ashi 認為 model 可以是動詞，當看到一個物體或現象，“We want to model it." 代表我們意圖簡化此物體或現象，此時 model 的名詞意義便可理解為「被轉化為數學、簡化版的世界」，開發者透過一次次的訓練和修正，找出最接近真實世界的 model 並據以進行推測。隨著 model 與機器學習系統的成長，人類的認知也同時在被計算、建構著。
Ashi 進而用美國前總統 Barack Obama 發言的實際影片與仿製影片做對比，說明深度學習搭配經過同步化的真人錄音，已可產生如同真人般的動態影像，甚至自行生成逼真的人類臉孔圖像，顛覆我們對於「真實」的認知。然而，這類應用儘管在目前讓我們感到驚艷，幾年後，卻可能變成問題的根源。而身處一個不能相信自己眼睛與耳朵的世界，人類又應該如何自處? Ashi 認為，人類必須意識到，在建立此類技術的同時，也正在控制權轉交給人工智慧，Ashi 並提醒相關技術除了應用於仿製，亦可用來建立辨別真相的工具，值得開發者深思。
如何共用元件
從開發 LINE 隨你填貼圖來談 / Tzu-Lin Huang
LINE 的組織龐大，旗下有相當多的產品，因此在實作前端元件時，能否重複使用是很重要的考量因素。這次嘗試使用後起之秀 - 共用元件 (custom element)，好處是現代瀏覽器原生支援，可相容絕大部分的前端函式庫。
本議程分為兩個部分，第一部分由來自 LINE 福岡的開發人員 - Tzu-Lin Huang 分享使用共用元件、開發共用元件的經驗談。Tzu-Lin 先介紹 LINE 隨你填貼圖讓用戶可輸入客製化文字，購買後更可不限次數更換文字內容 ; 而隨你填貼圖的 CMS 主要供內部設計師使用，原創市集則是供一般貼圖創作者使用。隨你填貼圖和原創市集的共用元件包括文字編輯器，是以 SVG 格式儲存經過編輯的資料。Tzu-Lin 接著說明共用元件的定義、業界實例，提醒使用 custom element 必須考慮瀏覽器相容性，以及前端框架相容性，並以 sample code 說明文字編輯器元件特性。
Tzu-Lin 並透過案例分享使用共用元件的經驗，認為共用元件不是萬靈丹。例如第一個案例大量使用共用元件，可能會導致俄羅斯娃娃效應，以共用元件層層包覆控制項，卻使得一些項目無法傳遞到最外層的 HTML，必須額外寫很多事件傳遞的程式碼，反而導致效率降低。而第二個案例須紀錄 drop-down menu 是否開啟，但由於 attribute 同時也是 property 導致無窮迴圈，因此，開發者必須自行管理共用元件的狀態，以避免無窮迴圈的產生。最後，Tzu-Lin 也分享適合共用元件的場景、開發時可能遇到狀況，以及對應的解法，讓開發者進行實作時更加順利。
Reusing Logic in Vue and in React / Jesse Chen
本議程的第二部分，由同樣來自 LINE 福岡的開發人員 - Jesse 帶領與會者探討 Vue.js 中仍存在的共用作法 - Mixins：為何 React 提出 HOC (Higher Order Component) 來取代 Mixins api，以及最後發展出 Render Props 的技巧，並著重介紹如何共用邏輯。
Jesse 首先澄清真正要共用的不是 utility method，而是 stateful logic，並藉由數個 sample code 介紹 stateful logic 及其定義。接著介紹 "Mixins Considered Harmful" 的相關概念，包括：implicit dependency 導致無法從 code 判斷來源、name clash 命名衝突導致覆寫，以及 snowball complex 像滾雪球般導致問題變得複雜，難以預測共用邏輯在系統規模或複雜度提升後，所可能產生的問題。Jesse 接著驗證 HOC 亦無法徹底解決這些問題，進而提供數個 sample code，說明 Render Props 的優勢與弱點。
接著，Jesse 說明上述想法可應用於 Vue.js 但目前尚未被大量採用，點出 Vue.js 仍大量使用 Mixins 的原因在於 hook 是重複使用邏輯的關鍵，並透過 sample code 分享數種使用 hook 後共用邏輯的方法。最後，Jesse 總結 Mixins、HOC、Render Props 和 hook 的特點，評估其在重複使用 stateful logic 方面的效益，協助與會者思考最適合的選項。
活動小結
這次能以 LINER 身份參加 JSDC 2019 重新認識 JavaScript，並學習到 JavaScript 與人工智慧的結合，以及相關開發趨勢，實在令我大開眼界! LINE 持續支持開源社群，除了關注 JavaScript 在前端框架的多元應用，更樂見其在機器學習等眾多領域大放異彩!
立即加入「LINE 開發者官方社群」官方帳號，就能收到第一手 Meetup 活動，或與開發者計畫有關的最新消息的推播通知。▼
「LINE 開發者官方社群」官方帳號ID：@line_tw_dev
關於「LINE 開發社群計畫」
LINE 自 2019 年初在台灣啟動「LINE 開發社群計畫」，長期投入人力與資源在台灣舉辦對內對外、線上線下的開發者社群聚會、徵才日、開發者大會等，全年舉辦 30 場以上的活動。歡迎讀者們能夠持續回來查看最新的狀況。詳情請看 LINE 開發社群計畫活動時程表 (持續更新) https://engineering.linecorp.com/zh-hant/blog/line-taiwan-developer-relations-2019-plan/)