Jing Tech 前端技術週報 #1
🛠️ Signals | 🎨 shadcn/ui 的設計思維 | 🚀 JavaScript 的第三時代 | 👨💻 本週精選
Hi 大家好，我是 Jing，這是 Jing Tech 第一期的前端技術週刊！
本週刊每週日發刊，並且會分成兩個部分：
本週深度閱讀：這部分主要是分享筆者覺得有趣的文章，並且寫下對於該文章內容的一些想法。
本週熱點與選讀：這部分主要是分享當週前端時事以及有趣或值得學習資源。
本週深度閱讀
Signals are fast by default, automatically optimizing updates behind the scenes for you.
Signals 是一個高效能的狀態管理的庫，主要是用來解決狀態更新後導致組件重新渲染進而引起的效能問題，而其主打的特色就是快 (fast by default)。
當應用越來越複雜時，專案內的組件也會隨著增加，這時候最令人頭痛的問題就是組件間的狀態傳遞與共享，在 Signals 的解決方案提出來前，最常見就是 Lift State Up (圖左) 或是使用類似 Context & Selector (圖右) 方式來解決狀態傳遞，並搭配使用 useMemo 或是 memo 來防止組件進行不必要的重新渲染。然而，這些方案仍不足以成為大型專案中的最佳解決策略。
最終 Preact 團隊在 2022 年 9 月發佈了 Signals 這個概念作為狀態管理的解決方案，Signals 的核心概念就是將狀態封裝在 Signal 物件中的 `value` 屬性。當 Signal 的值發生變化時，Signal 物件本身保持不變，並且當 Signal 的狀態發生變化時，只對有使用該 Signal 的組件重新渲染，透過局部更新就能夠大幅的減少不必要的渲染。
至今已經有許多 UI 套件 (Vue, Angular, Svelte, Preact & Lit 等等) 都在內部實現了 Signals。
那 React 呢？React 的核心成員 Andrew Clark 則在 X 上發表對於其看法。大意是因為 React 的設計理念與 Signals 的不相符，所以現階段沒有打算將 Signals 透過 React 底層進行實現，取而代之則是用 Complier 的方式來解決，也就是眾多 React 開發者引頸期盼的 React forgot。如果想要在 React 使用 Signals 也是可以的，但就需要安裝第三方套件，像是 preact/signals-react 或是 zustand-signal。
shadcn/ui 可以說是在 2023 年竄升最快的 UI 庫，與眾不同之處在於它是透過 CLI 直接將組件程式碼放到本地專案底下，而不是透過 npm 去安裝。這樣最大的好處是讓開發者對組件擁有百分之百的主控權，不需要再依賴以及找查套件有提供哪些 API，也不會再遇到組件無法客製化的窘境。
shadcn/ui 核心的特色就是將組件分成 Style 層與 Structure & Behavior 層
Style 層: 使用的是 TailwindCSS，優點就是快、可擴充以及近乎零的學習成本，可以藉由 tailwind config 設定視覺元素 (Visual Element) 快速的打造出 Design System。對於管理樣式的變體 (variant) 使用 Class Variance Authority (CVA) 以及對於一些樣式的衝突 shadcn/ui 則採用 tailwind-merge 作為解決方案。
Structure & Behavior 層: 實作一個好用的組件庫，其實並不簡單，每個組件需要有良好的架構設計才能讓開發者體驗 (DX)、使用者體驗 (UX) 以及可訪問性 (A11y) 達到一定的水準。幸運的是現在前端已經有許多 UI 庫替我們解決這些問題，它們稱為 Headless UI 主要專注在組件的功能但沒有 Style。以 React 來說著名的有 @radix-ui, @headlessui/react。而 shadcn/ui 就是將 radix-ui, react-hooks-form, react-day-picker 與 react-table 等等的 headless 庫作為基礎打造而成的。
題外話: radix-ui 在 2023 年一舉成為當今 npm 下載最高的 React UI 庫，有一部分是與 shadcn/ui 爆紅有關。
筆者認為 shadcn/ui 之所以會成為當今 UI 庫的新星，有以下特色
最佳實踐: shadcn/ui 是在眾多套件基礎上封裝出一個開箱及用且好用的 UI 庫。
客製化不再是一個問題，因為組件主控權在開發者手中。
不用再考慮到套件選用。舉例來說，一個複雜的表單系統，需要考慮到如何實作 UI，表單狀態套件的選用 (react-hooks-form / formik)，驗證套件的選用 (Yup/Zod) 等等的問題， shadcn/ui 都提供了最佳實踐。
Design for Copypaste: React 核心成員 Dan Abramov 曾在 X 提到 Design for copypaste 的原則，而 shadcn/ui 應證了這個原則且將其發揮到極致的例子。
“design for copypaste” is one of the best principles i’ve learned in software. better than SOLID or any what-have-you acronym. it seems trivial but it combines deeply useful properties: safe (non-erroring) removal, safe (non-conflicting) duplication, safe (non-splintered) moving. - Dan Abramov
JavaScript 的第一個時代 (1996 ~ 2007) - 建構
JavaScript 最初開發於 1996 年，但在 1996 - 2007 年間，卻沒有在市場中取得一席之地，即使當時 ECMAScript 4 的推出，但依然無法突破 Flash 與 ActionScript 這類的封閉生態，最終以失敗而告終。
JavaScript 的第二個時代 (2009 - 2019) - 探索與擴展
從 2009 到 2019 年這之間發生了非常多事情，從一開始 NodeJS 的誕生，它就像是那把關鍵的鑰匙開啟了新的時代。同時這時候智慧型手機才正要蓬勃發展，RWD (Responsive web design) 開始成為顯學。 JavaScript 一舉將應用範圍從桌面擴展到伺服器與移動端。這當中許多重要的框架、函式庫以及基礎建設的工具也如雨後春筍般地湧現。
JavaScript 的第三個時代 (2020 ~ ) - 收斂
隨著 2023 年逼近尾聲，從 2020 至今整個生態已經開始有了變化，首先是 ES 模組，它為前端建置工具迎來革新，由於各大瀏覽器開始支援 ES Module，讓我們可以不用透過打包工具，就可以將程式碼在瀏覽器上運行。以這個概念為核心的 Vite 也因此成為當今最火紅的建制工具。
各大廠也開始將 TypeScript 作為開發標準語言，皆紛紛將既有的程式碼遷移到 TypeScript，不外乎就是加強型別的安全 (Type Safety)。
最後則是基礎建設工具開始以 Rust 進行改寫，不外乎就是追求更快的效能，使建構效能提升 10 倍甚至 100 倍，可以看到 Relay, Deno, SWC, Parcel 等等的工具基於 Rust 改寫。
筆者則是非常看好以 Rust 語言改寫基建工具的發展，以字節跳動近期推出的 Rspack 以及 Vue 團隊正在規劃的 Rolldown 都是值得關注的焦點。
本週熱點與選讀
文章
Storybook 在 8.0 版本支援 RSC (React Server Component)
Module Federation 最近更新了官方文檔，對於微前端有興趣的讀者們可以參考看看。
Remix 官方最近在 X 推出一個系列帶大家復刻 Trello 應用。
這篇文章可以快速了解什麼是 SSR、為什麼需要 SSR, 與 SPA 的興起、缺點以及演化出來的各種解決方案。
這是一款網頁小遊戲，推薦大家花 5 分鐘體驗當公車司機，聲音與背景很舒服，接近藝術品的小品遊戲。
Meta 上週終於正式開源內部使用的 CSS library - Stylex，值得持續關注後續的發展。
影音
Why Signals Are Better Than React Hooks
這個影片介紹了 Signals 並透過一個簡單的 React 應用，解釋了 Signals 的優點與它如何解決了 React 重新渲染的問題。
React Forgot 是在 2021 年在 React Conference 所提出來的概念，目的是解決當前 React 重新渲染的問題。這個概念沈寂兩年之後終於在今年的 React Advanced Conference 被提及，非常值得一看。目前 React forgot 已經在內部測試階段，在不久的將來就會正式開源給社群使用。
播客
Web Worker - 和 Vue.js & Vite 作者尤雨溪聊專案進度、開源社群協作與前端思考
Web Worker 是一個非常適合在通勤的時候聽的技術 Podcast，主要是會邀請一些開源創作者聊近期前端的大小事。這期是邀請到 Vue 的作者尤雨溪 (Evan You)，回顧了 Vue, Vite 的當前現況以及展望，也聊到了 Evan 對於前端生態的想法。非常值得一聽。
Lenny’s Podcast - The future of AI in software development with Inbal Shani (CPO of Github)
Lenny’s Podcast 會邀請業界的專家來聊一些該領域展望的對話型節目。這集邀請到 Github CPO - Inbal Shani，透過這集我們可以了解 Github 旗下產品 Github Copilot 的未來的計畫，他們想要改變什麼以及 Copilot 如何去改變以及幫助當前的產品開發。
本期內容就更新到這裡，感謝大家的閱讀，如果有任何問題或想法歡迎一起討論，也歡迎分享給更多人知道！你的每一份支持，都是我持續創作的動力！更多關於我的創作可以點擊這裡。