這篇文來記錄一下 Laravel x Vue 2023 議程的參加心得。這次議程辦在近東門站的政大公企中心，和去年一樣，除了開幕外都是拆成前後端不同議程以吻合不同工程師的需求。前端議程內容如下：
- 重新发明 Vue：经验和教训－－尤雨溪
- 被 Vue 框架耽誤的構建工具 — Vite－－高見龍
- 從 Vorms 出發的一場開源大冒險－－Alex Liu
- 從MVC到前後端分離的策略－－Eric
- 開發的未來，Nuxt3 重新定義開發體驗－－成智遠
- 成為火影還是航海王!? 踏上升級與重構的冒險－－Alex（Alex 宅幹嘛）
重新发明 Vue：经验和教训
今年不得不說真的很厲害，籌備團隊請到了 Vue.js 作者尤雨溪本人（以下簡稱講者）來到現場做為第一個議程的主講。重點摘要如下：
- Vue.js 從發布至今已有十年歷史
- Vue 3 原始碼使用 TypeScript 撰寫
- Options API 限制了可重構性、型別推論不友善、重複邏輯過於仰賴 Mixin，因此誕生了 Composition API。仰賴 Mixin 這點我自己是很有感的，在 Vue 3 發布前我在 Vue 專案曾嘗試用 Mixin 去複用一些組件的資料、計算屬性、方法等。當時困擾的點便是當需要改組件時，有些東西就必須從 Mixin 一個一個去找，確實造成了不少困擾。
- Vue 2 因為最低要支援到 IE9，一些 ES2015 的 API 如 Proxy, Weakmap 使用上都受到限制，因此 Vue 3 捨棄了 IE 以便使用 ES2015 語法。
- Composition API 寫法雖然像是 React Hooks，但實作的方法更佳（講者有實際舉例，但我沒抄錄下來）。
- Pinia（aka 鳳梨）其實就是 Vuex 5 的 Successor。聽到這句話我以後勢必是選 Pinia 做狀態管理了。
- 反思：Vue 3 發布了過多破壞性改動、低估了對生態中庫的影響、發布 3.0 時，文件、Vuex、Vue Router、Migration Build 等都還不穩定。這部分有提及之後會採用 Deprecated -> Opt-in -> 棄用這種比較漸進式的作法，axios 的 cancelToken 就是採用類似這樣的方式（但 axios 從 v0.22 發布至今的版本都依然能使用 cancelToken...）
- 好的部分：擁抱 TypeScript、堅持 Composition API、對提升開發體驗的持續投入（Vite, Volar...）
講者也提及到 TypeScript 是一個趨勢，它也會是我今後學習新技術的重點之一。
被 Vue 框架耽誤的構建工具 — Vite
第二個議程則是由為你自己學 Git 的作者高見龍擔任講者（以下簡稱講者）。這個講座主要是講者在 showcase 自己怎麼去看 Vite 的原始碼。重點摘要如下：
- Vite 本身就是 dev server，只要在專案目錄下輸入 vite 就會直接幫忙起一個類似 Live Server 的服務
- Vite 本身依賴了 esbuild, postcss, rollup 等套件
- 若要看 Source code 可直接去 Clone 專案
- 進入點：node_modules/.bin/vite.js
- 透過 HMR 讓瀏覽器自己重整節省開發者的手指力氣，底層其實就是 WebSocket 發通知給瀏覽器
- Vite 會在我們跑 npm run dev 後在 node_modules/.vite 裡面放一些東西（如果打開瀏覽器看 Network Tab，的確會看到它對 node_modules/.vite 發了一些請求去下載資源）
從 Vorms 出發的一場開源大冒險
第三個議程由 Alex Liu 擔任講者（以下簡稱講者）。講者主要介紹了自己的開源庫 Vorms。重點摘要如下：
- 原始碼基於 TS 並有 TSDoc 文件註解（Alova.js 的源碼也是這樣寫，用 VSCode 的話其實可以就直接透過 Ctrl 看到方法的註解、輸入輸出型別等，非常方便）
- Gzip 後加上 Tree Shaking 可以小於 4KB
- 支持 Composition API
- 支持 Yup, Zod 以及自訂驗證方式
- 可設定觸發驗證的時機
另外講者也分享了如何開 Issue、提交 PR 等。
從MVC到前後端分離的策略
下午的第一個議程由 Erik 擔任講者（以下簡稱講者）。這講者很特別的是，他在擔任軟體工程師前曾經擔任了十年的電競選手。重點摘要如下：
- 如何說服 PO 給自己翻新專案的時間：未來的 Story point 可以降低、增強使用體驗、減少伺服器負擔、帶來經營影響
- 翻新的好處：他們規劃的方法是可以逐頁翻新的、即時的用戶回饋、對複雜組件更快的開發、允許本地開發（因為都走 API 的話在 local 起個 mock server 把 API Base URL 切過去就好）
- 翻新的壞處：維護成本會隨時間提高、SEO （因為採 CSR）
- SEO Issue 講者提及了 Custom Nuxt3 module 和 Astro，實際解決方式我沒有很完整摘錄到
- 結論：要翻新架構的話，要先了解問題是什麼、說服 PO 提供時間、想出翻新的做法、解決 SSR 問題
開發的未來，Nuxt3 重新定義開發體驗
下午的第二個議程由 Mike 擔任講者（以下簡稱講者），這是我第四次（前幾次分別在天瓏書局、快樂學程式和去年的議程）在公開場合中聽他的講座。重點摘要如下：
- Nuxt 3 提供許多 Built-in composables
- 提供 SEO 工具
- 提供 $fetch 讓我們不用去拉 axios
- 提供 Component 和 Composable 的自動引入
- Nuxt 3 提供了許多 Conventions（打個比方：組件只要取對名字，他會直接幫忙做好 Routing，不必像 Express.js 要自己寫 Route）。只要照他的規則走，可以省略掉海量的架構面程式碼。
- 上面的 Convetions 也造成了一個問題：提高入門/學習門檻。今天把一個高度開發的 Nuxt3 專案交給一個剛從 React 跳到 Vue 的開發者，他可能要花很長時間閱讀官方文件後才會上手。
講者這邊有提到一句話我覺得蠻有感的：「框架給的，你可以不用，但是框架不給就超麻煩。」與其抱著「反正我也沒有需要很多東西」去選用一個輕量框架，在自己做一大堆設定，選用一個包含了許多功能的框架，在拔掉用不掉的部分，也未必是件壞事。
成為火影還是航海王!? 踏上升級與重構的冒險
最後一個議程由 Alex 宅幹嘛的 Alex 擔任講者（以下簡稱講者），講者的 Youtube 頻道是目前所有 Youtube 頻道中我唯一有自發性贊助過的（雖然只有一次）我個人還是非常喜歡他佛系營利靠熱情撐起自媒體的精神。重點摘要如下：
- 當初選用 Vue 的原因正是開發者體驗
- Node 奇數版本為不穩定版本
- 若要維護大量專案，可用 Docker 解決版本問題
- 父組件在 scope 情況下也能用 :deep 將樣式傳入子層
- 運用 Codium AI 檢查程式碼
講者主要都是分享 2.6.x 升級到 2.7.x 以及 Vue-cli 轉換到 Vite 的一些經驗談，由於我們專案是從 2.6.x 直接跳到 3.2.x，這些經驗談對我的幫助還是比較有限的，因此沒有摘要很多。
場地與環境
這次場地在近東門站的政大公企中心，相比去年不會有被前面會眾擋住的問題，可用空間相對沒那麼大，但不至於擠到旁邊的人。場地禁止飲食，所以早上沒有咖啡因刺激的我一度昏昏欲睡......。
午餐部分吃的是肌肉海灘的便當，非常滿意；下午茶部分是 Buffet，不過因為我正在戒零食和添加糖就沒有去拿。
動線的話沒什麼好挑剔的，因為會場就在二樓，結束後也不用等電梯。
個人心得
我自己對這場議程的內容是很滿意的，學到了很多也聽到很多關鍵字。我自己參加議程的話還是比較希望聽到講者的經驗談、實際用什麼方法解決過什麼問題等。所以對於介紹框架或庫這類可以透過網路資源自學的部分就會比較興趣缺缺（畢竟自己去查閱官方文件就好了），如果要排前三喜歡的議程：
- 重新发明 Vue：经验和教训
- 從MVC到前後端分離的策略
- 成為火影還是航海王!? 踏上升級與重構的冒險
這三個是我最喜歡，認為含金量最高也最值得聽的議程。
此外，也真的很開心可以跟尤大拍到照，期待往後每次來議程都會有這種好運！
由於休息時間蠻長的，我跑去了附近的 Aesop 聞了四個品項，其中馬拉喀什馥郁和格歐暮都超喜歡的，腦波弱一點可能就買下去了，還好有克制住（但我覺得未來如果有預算我還是會買，下午一直忍不住狂聞試聞時噴在手背的味道）。以上是題外話。
以上就是 {Laravel x Vue}Conf Taiwan 2023 我的個人心得，我覺得如果時間和預算許可的話，這類議程是非常值得參加的，因為能親眼見到並和這些講者交流的機會可能也只有這時候了（尤其是尤大，我覺得我這輩子可能很難再見到他了，除非主辦單位明年也邀請他）。
希望這篇文能幫助到你，若內文有任何錯誤也歡迎指正。
