JavaScript Rising Stars 回顧了在 2021 年最受關注的那些 JavaScript 專案。 有些大家可能已經很熟悉，有些可能還是第一次看到。
今天就一起來回顧 2021 年的熱門專案，來暸解最新的前端開發趨勢吧！
綜合區
ZX
綜合區由 Google 推出的 ZX 登上榜首。
ZX 是一個讓你能方便地用 JavaScript 來寫 Shell Script 的工具。 用過 Bash 寫過一些腳本的人應該會知道，這類的語言寫簡單的東西方便， 但稍微複雜一點的邏輯和資料結構就遠不如一般的程式語言好用了。
在以前工作需要寫比較複雜的腳本時我會改用 Ruby 或 Python 來寫。現在 ZX 提供了更方便的選擇。
它提供了執行命令的 $ 讓開發者能執行 shell 指令並回傳 Promise，如
await $`touch ${filename}`
並以函式的形式提供了在寫 Shell Script 時常需要用到的命令，如 cd、sleep 等等。
下次有需要寫 Shell Script 時應該會是首選工具吧！
綜合區其他
這區其他的專案會在接下來的其他分區也提到，就簡單略過吧。
發源於 Vue 社群的 build tool Vite 拿下第二。 React 最熱門的 Framework Next.js 和 React 本身則緊追在後。
足見 React 和 Vue 在 2021 年仍是最有影響力的兩大集團。
前端框架
React 和 Vue 毫無懸念的排在前二。由於都是大家熟悉的老面孔就不用介紹了吧！
React 也即將迎來九週年，演進上沒有大破大立而是穩定的改進並維持相容性。 過了八年依然保持領先定位，社群也十分活躍，真的是設計經得起考驗的成功案例啊！
在這邊我想多介紹一些較新的框架。
Svelte
Svelte 以主打高效能與開發容易在最近獲得高度關注。 Svelte 不同於 React 和 Vue 使用 Virtual DOM， 而是在編譯時建立變數與 UI 的相依關係來達成 reactive。
我個人用 Svelte 開發過兩個正式的專案，學習容易開發體驗也不差。
然而設計的美感和生態系的穩定度就差強人意了。
之後可能會再寫一篇文章來詳細說明，我目前的想法是： Svelte 是值得一玩的框架，但我並不特別享受與推薦 Svelte。
Solid
僅 6.4kb 的 bundle size 、勝過 Svelte 的效能，並和 React 一樣使用 JSX。 是一個主打效能優異的框架。
雖還沒有用 Solid 開發過什麼正式的專案，但我認為它的設計更為巧妙而成熟。
其實絕大多數的應用 React 或 Vue 的效能都足以讓使用者滿意了。 （工程師亂寫導致效能低落就是另外一回事了）
真正會需要用到 Svelte 或 Solid 才能做好的特殊專案其實是不多的， 但如果之後遇到這類需求的話我會想積極嘗試使用 Solid。
特別篇：Mitosis
Mitosis 雖然本身不在榜單上，但在介紹 Solid 時有被提到。 由於是一個我十分期待的專案，就特別介紹一下。
簡單說： 用 Mitosis 開發的 Component 可以編譯成各種其他框架的 Component，包含：React、Vue、Svelte、Angular等等。
對於所有專案只用一種框架的小公司來說，可能還不會有這個需求。 然而當公司規模大到一定程度，往往不會只有一種框架。可能是工程師喜好的差異，又或是針對專案需求而選擇不同的技術鏈。但同時也會需要 Design System 和各種可共用的 Component。
然而同時為各種框架開發不同版本的 Component 耗力費時，又沒有能讓各種框架共用的標準。
......等等，Web Components 不是公定的標準嗎？ 詳細談的話大概要再寫一篇文章，這邊直接說結論：Web Components 目前還無法完美的擔當這個任務。
這也是為什麼我十分期待 Mitosis 接下來的發展。 目前 Mitosis 還在 Alpha 階段，但你可以在他的網站上看到十分令人振奮的 demo。
Build Tools
我個人覺得在 2021 變化最顯著的當屬 Build Tools 這一區。 由於這一區彼此的關係頗為複雜，比起各自分別介紹，我想全部一起談可能會更合適。
前端工程師，你睡著了嗎？
在 Webpack 和 Babel 這些老牌工具已發展成熟並被廣泛使用的今日， 為什麼又有大量的 Build Tools 如雨後春筍般地冒出呢？
最主要的原因就是：太慢了。
在現今的開發中，我們會用到：TypeScript、CSS Preprocessor、CSS in JS、 框架各自的 template 語言... 你會需要 compile、minify、bundle 各種東西。
一個中規模的前端專案，可能在你修改一行程式碼到看到結果要等待三秒五秒， 更別提大型專案的開發簡直讓人想起十年前寫 C 專案時編譯按下去先去泡杯咖啡的經驗。
而這個問題的主要原因就是： 以往前端社群所發展出的工具很自然的是由前端社群最熟悉的語言 JavaScript 所開發。
JavaScript 雖然是一個優秀的程式語言， 我相信絕大多數人在選擇開發編譯器的程式語言時，首選應該不會是 JavaScript。 然而長年以來，前端的工具鏈都是由 JavaScript 所打造，而且也習以為常。最終導致了令人痛苦的開發體驗。
前端工具鏈的新趨勢：使用其他程式語言來開發工具！
終於，最近趨勢走向：使用其他語言來打造前端開發工具。
這些工具雖非 2021 年才誕生，但應該可以蠻明顯的感受到最近熱度大幅上升並開始被更廣泛的使用。
其中最受矚目的當屬以 Go 開發的 esbuild 和以 Rust 開發的 swc。
esbuild 的官方網站上可以看到，它的速度是其他現有工具的一百倍左右。
swc 在四核心處理器上的速度也達到 Babel 的七十倍，兩者相較於以往的工具，效能的提升都非常顯著。
Vue 社群利用 esbuild 打造出了 Vite， React 和 Svelte 的使用者們也開始使用它。Svelte 官方的 SvelteKit 也使用了 Vite。
Next.js 在 Next 12 也使用了基於 swc 的 Rust compiler，在編譯效能上帶來了顯著的提升。
其他知名專案也走向了類似的路，如 Rome 也正在以 Rust 重寫。
另外我也非常推薦對於技術感興趣的人，可以一讀 esbuild 官網的 FAQ: Why is esbuild fast。
其他
接下來的部分由於因領域的不同，這些專案並非人人都會用到，我就依造自己的喜好做一些簡單的介紹。
狀態管理: Zustand & Jotai
相較於 Redux 等大家已經非常熟悉的 React 狀態管理 Library， Zustand 和 Jotai 有著更為簡單明瞭的 API 和更小的 bundle size。
在設計上 Zustand 與 Redux 接近，Jotai 則類似 Recoil。
由於簡明的 API，我認為它們更易於學習，並能產出簡短而易理解的程式碼。 同時你也能繼續使用那個超好用的 Redux Devtools 來開發。
我現在所有個人的專案都已經改用 Jotai 來開發了，並且感受到非常舒適快樂。
Tauri: 新的跨平台桌面程式開發框架
說到用前端技術開發跨平桌面程式開發， 相信大家都很熟悉 Electron。就算沒有寫過也大都用過使用 Electron 所開發的程式，例如 VS Code、Slack 和 Discord。
由於 Electron 的架構基本上就是把大家最熟悉的 Chromium 和 Node.js 包再一起， 開發十分容易。尤其是將 Web 版移植到桌面版時，有一大部分的程式碼可以重複使用。
然而 Electron 也有非常明顯的缺點：肥。
畢竟他把 Chromium 包了進來，就算你的程式內容非常簡單， 發布的執行檔大小還是包含了一個 Chromium 在裡面的大小。
除了檔案大以外，Chromium 執行時佔用大量記憶體的問題也是 Electron 的問題。
Tauri 用 Rust 寫了後端代替原本 Node.js 在 Electron 中的角色。 你可以用 Rust 或繼續像 Electron 一樣使用 JavaScript 來開發程式的後端。
前端則使用系統的 WebView，避免了 Chromium 造成執行檔巨大的問題。
Tauri 預計在今年釋出正式版，相信能為桌面程式開發能帶來正面的影響。
其他
- Playwright: 由微軟推出的 E2E 測試工具。最大的強項是跨平台的測試，尤其是 Cypress 所缺乏的 Mobile Device 測試。
- Prisma: Node.js 用的 ORM 。我去年也在開發一個後端小專案時使用過，執得推薦。
- vanilla-extract: Build time 的 CSS in JS。
總結
近期前端的發展趨勢我認為是讓前端開發者越來越幸福的。
尤其在開發體驗上有了大幅的改進，但並未增加太多的學習成本， 對於新加入的人來說甚至是越來越簡單了。
例如 Zustand 和 Jotai 提供了輕量而簡單的狀態管理方案。
雖然有興趣的話也能當作理由花時間學習 Rust 或 Go ， 但什麼都不做也能享受到這些 build tools 的改進。
Next.js 的開發者可能只是把 Next.js 升級到 12， 就在不明所以的情況下發現 reload 速度比以前還快了。
如 Svelte 和 Solid 這類的新框架也讓有特別效能需求的專案有了新的選擇， 並且相較於 React 與 Vue 也並沒有很多難以理解的新概念需要適應。
除了本篇提到的各種專案以外， ES Modules 逐漸得以被更廣泛的使用也是我在 2021 年中明顯感受到的變化。
讓我們繼續期待 2022 年吧！新年快樂！