2024 WebConf 心得
第一次參加 WebConf，原本還在猶豫要不要參加，但看到有 antfu 就覺得超級心動，要來瞻仰一下！ 這篇就來簡單紀錄一下這兩天的所見所聞，而我所挑選的議程都是以前端為主，有興趣的讀者就繼續看下去吧！
有限狀態機與 RxJS
第一場選擇了前端的講題，是 xstate 和 rxjs，其實很巧地這剛好是 JSDC 2019 的兩場議程的融合 （很值得找來看，當年是 library creator 和 maintainer 來講的，連結附在最下方）
可以看出這幾年 xstate 整合了蠻多開發體驗的部分，有 vscode extension 把 state chart 整合進來，超讚！過了五年還是認為能導入 xstate 的話真的很不錯，因為背後是狀態機，程式碼會變得更加嚴謹，但實際上這套的使用門檻應該蠻高的，能不能把狀態拆分好真的是門學問 (遠觀大學時上的 formal language…) 只能繼續保留在自己的狀態管理口袋名單中。
不過真的很可惜，講者沒有特別著墨在這兩套一起整合的部分，只是分開介紹而已，蠻好奇整合在一起會是什麼樣子。但回想這幾年前端各種狀態管理工具不斷出現，真的讓技術選型又增加更多可能與難度，但也只能走一步算一步了，盡量選擇主流的工具才不會有被棄坑的風險！
DevOps, GitOps, and AIOps
是 Weithenn 主講的！大學在修 SA 瘋狂查資料的時候還蠻常看到他的文章，覺得需要瞻仰一下就選擇這場了。有簡單介紹了一下 DevOps 所做的事情，以及自動化可以省時間的故事。覺得講者所說的「不要因為一個工具比較潮就用」、「能解決問題就是好工具」很有道理，不過沒寫過講者很推的 過氣 ansible，改天可以來玩玩看。
而當天的簡報也有發佈在講者的 blog 中，https://www.weithenn.org/2024/11/webconf-taiwan-2024.html。
來一場兼顧程式碼品質以及開發效率的 Code Review
這場在講如何 code review，過去五年工作的時候也都有在 code review，所以聽下來沒有特別新穎的地方。不過有學到一個新名詞「Stacked PR」，先前都只能說一隻串著一隻的那種，以後可以說這個酷名詞了！
從單體應用到微服務的監控演化淺談
是 Nic 主講的，最早是看朋友貼的面試影片才知道他的，所以其實沒有特別期待這場，但實際聽下來其實講的很好，台風也超穩，推！
分享的內容也很實用，該導入什麼樣的工具取決於現有公司的規模 ($$)，如何使用數據說服 PM 也是一門學問，Be on the same page 真的很重要，要學習如何關聯數據！
十年回首：React 的過去、現在與未來發展
內容是蠻詳盡的 react 介紹，有帶到 fiber, reconciliation, concurrent mode, streaming SSR, selective hydration, react compiler，基本是從 16 - 19 的重要功能都點到了，是很好的複習大會！
最後講者有分享投影片，也附在這邊 https://slides.com/tz5514/react-webconf2024
《天下》如何思考數位敘事？從流程到技術大公開
是第一天最期待的場次之一，真的超級好奇他們的實作。一開始由 PM 介紹為什麼會開始有這個專案，是因為 2012 The New York Times 的 Snow Fall 發布，讓新聞界對於數位敘事有了更多想像，因此才開始探索要如何用數位的方式讓讀者更能理解、貼近真實。
開發上他們用了超多沒看過的工具，很多圖資、地理、建模相關的軟體，因為目前大部分的主題都是透過地圖的方式呈現。
而實作的背後也有很多 Domain Knowledge，像是以衛星地圖為例，並不是每天的空拍圖都可以使用，需要去 EO Browser 這個網站去查詢每個時段的雲量，從中找到乾淨無雲的時刻再來調圖。而圖本身也需要後製才能夠拿來使用，原本是黑白的 (第一次知道！）
而因為是報導文學，真實性很重要，所以講者提到的計算衛星運行軌跡，因為有效能上的要求需要簡化實作，也有特別和大學教授確認，很有趣。但因為報導有時效性，所以專案大多都是在蠻壓縮的時間內完成，但他們的產出真的很不錯，很期待未來他們的作品！
網站專案時程的挑戰跟威脅
第一次看到 TonyQ，有聽到一些鬼故事。而印象最深刻的是「公司同事是一種抽卡，公司的等級影響出卡機率」xD
Zeabur：雲端部署平台 PaaS 核心技術大揭秘
來到第一天最後一場，這場雖然講者說沒有到大揭秘，只有淺談，但實際上著墨了很多開發的細節了。這場技術含量真的滿滿，有提到每個 cloud provider 的眉角，很有趣，覺得做這個創業主題真的很厲害，雖然目前我都用 Cloudflare (Worker & Pages) 來做部署了，但感覺改天可以來試試看。
最後講者也有分享投影片，真的很強，很多細節，推 https://cdn.zeabur.com/webconf.pdf
實戰！以 Web 3D 技術開發商品客製編輯器
第二天早上第一場，其實對於 3D 莫名的有種嚮往，今年 JSDC 也有類似的主題，看到 r3f 和 Drei 大家都很推，真的該找一天來試試看。
講者也有介紹幾個專有名詞，先筆記筆記，說不定未來會用到
擁抱漸進式體驗 — 設計驅動企業改革動能
這是全場聯播的場次，也是這次我聽的唯一一場設計場次，講者的職涯很厲害，待過 Frog Design 和十年 Yahoo!。這次分享了很多設計故事，其中我覺得改版那段很厲害。要如何找尋該改版的地方，是要找「中度使用頻率，營收影響力大」作為起手式。重點在於影響不會太劇烈，但有感。而後續有做出成績後對於營收是有影響的，所以也更能說服高層繼續推進改版。
而最後也有提到一些 Design System 的概念，第一次知道原來 Token 可以拆分成三層：Global Token, Alias Token 和 Component Token。而最後講者也有分享一套 amzn/style-dictionary 可以讓專案快速導入 Design System (使用 Figma export 的 json 來轉換成 css variable 們)，第一次聽到，改天可以來研究一下。
ESLint One for All Made Easy
終於迎來最期待的一場，antfu 真的是開發能量滿滿的開發者，因為主題是 eslint，所以介紹了很多他所發想的 eslint 應用， 而因為 eslint 本身實作是有依賴 ast，所以他還拿來做成 codemod，很嶄新的想法，有趣！
而他對於 Formatter 是有要做在 linter 上的論點也很有意思，因為我原先都認為像 Prettier 這樣的工具速度上比 Linter 快得多，所以應該優先使用，選擇關閉 Linter 部分功能，讓兩者可以互相搭配，但是 antfu 認為其實兩者都是會依序使用，因為大多數的 use case 都是 formmater, linter 都要跑過，既然這樣其實也不用擔心 Formatter 用 Linter 跑會比較慢的問題，畢竟 ast 也只要 parse 一次，而且用 Linter 可以達到更客製化的 Formatting。詳細的可以參考講者的文章，真的蠻有道理的，開始思考是不是該轉回來都用 Linter 來做。
最後也有拿到 antfu 的貼紙，開心！！
Flex out！ CSS Grid 玩起來！
滿滿的 css grid 教學，有提到 subgrid，是第一次聽到的酷東西，但看起來要 safari 16 才能使用，應該得過幾年才能開始導入。
不過其實有時候使用過度複雜的 grid 後會發現，拆分方式的邏輯會和 Component 拆分衝突，或是會四散在各處導致不好維護，雖然說 DOM 最好不要建立太深，所以 grid 其實是好方法，但多數的時候可能用 Flex 來做會更有邏輯性。但 grid 來做 accordion 真的是好方法，先前也有在 StackOverflow 查到，他能讓高度 transition 出現，是個很值得記下來的一點！
用 AI 幫助開發 Apple Watch App 實戰分享
十歲的海馬社長，改天來去看 YouTube 直播寫扣
(筆記：海馬社長喜歡吃泰式料理)
這些年，你所不知道的 Angular & 當 Vue 與 View 分手之後⋯
雖然是分開的兩個講題，但這兩場想拉來一起講。雖然本身是 React 的開發者，對於這兩套都不熟，但真的蠻好奇這兩套目前的發展。
有趣的是這兩場都有提到 Signal，這真的是一個很高效率的 Reactive 機制，最早知道是 Preact 作者有實作這套。而看起來這兩套主流的框架都走向這套了！但 Angular 現在的模樣真的蠻驚艷的，語法也變得優雅不少，也看到了不少其他框架的影子。
而 Vue Vapor 也很酷，看起來更新效率變得好高，雖然還在實驗中，但聽講者所說，應該是因為只要支援 Web Browser 所以丟棄了 vDOM 這層，直接操作 DOM，感覺真的得找一天來玩玩看！
以上就是這次的 WebConf，其實這是第一次自費來聽 Conference，議題真的都很有趣，收穫滿滿，還見到 antfu 本人，真的很值得，期待未來台灣能邀到更多厲害的開源作者！
連結們
- JSDC 2019 YouTube