2023-07-30, 13:40–14:10 (Asia/Taipei), TR 511
Language: Traditional Chinese (Taiwan)
前端開發常常會碰到一些麻煩或者重複的事情，例如：
1. 配置環境非常麻煩(像是 ESLint、Prettier、VSCode settings..等等)
2. 還有表單驗證
3. 型別檢查
4. 手動撰寫大量串接 API 的函數
5. 後端寫超慢，需要等待後端開發完成才能串接等等..
舉例來說:
1. 後端提供 API Spec，但：
* 好多 endpoint 要寫
* 寫 request body 一個一個欄位對，好累
2. 使用 TypeScript，但：
* 各種 schema 都要寫 type，寫不完
* response parse 成 json 後型別是 any，好不方便
所以我們將分享利用各種開源工具來解決或加速處理前端以往會遇到的麻煩事，來讓整個開發變得更彈性且高效。
更重要的是，這個解決方案是 framework agnostic 的。
在開發過程中，開源工具可以幫助開發者解決各種麻煩或重複的事情；我們開發了兩個開源工具，分別是 lai-cmd 與 mswx，其中lai-cmd可以自動下載所需的套件和產生開箱即用的設定，用於快速配置前端開發環境。它可以減少建置環境時的困難，進而可以更快地開始開發工作；而 mswx 則是為 msw(Mock Service Worker) 做一些擴充功能，更方便開發。
我們也分享如何使用 zod 去處理型別檢查、表單驗證等等事情，zod 是一個 TypeScript 的 schema 定義和驗證工具，另外 zod 也擁有非常豐富的生態系，例如 zodios 可以定義 endpoint 自動生成 axios 的 client，另外我們將分享如何快速利用 openAPI 的 spec 去生成 zodios 的 client。
最後將再分享如何利用 zodios 去結合 mswx，並使用 msw-auto-mock 快速定義各個 endpoint 的 handler，也可以利用zod-mock去根據 zod 定義的 schema 快速生成 mock data，不必再等待後端開發完成。
利用這些開源工具可以讓整個前端開發過程變得更加彈性和有效率，並且可以更專注於開發核心功能。同時使用這些工具還可以提高程式碼的可讀性和可維護性，減少犯錯的機率，使得開發過程更加穩定和可靠。
入門
Target Audience –前端開發者
NYCU準碩二生，曾拿過技能競賽網頁金牌。
Github: https://github.com/laijunbin
準碩二生，對自己的期許是有能力把事故變故事