大家新好呀，我是你們的 貓哥，那個不喜歡吃魚、又不喜歡喵 的超級貓 ~

先來看看排行榜吧，知道一下目前最流行的項目都有哪些。

React 首次成為頭號 UI 框架，但如果我們考慮到 Vue.js 被分成了兩個倉庫（第二和第三版本），實際上 Vue.js 才是第一名。

最大的變化是 Svelte 的崛起，它超越 Angular 占據第三位。

越來越多的工具或組件將 Svelte 納入目標框架中（例如我們提到的 Vite）。

1. react

一個聲明性，高效且靈活的 JavaScript 庫，用于構建用戶界面。

聲明式

React 使創建交互式 UI 變得輕而易舉。為你應用的每一個狀態設計簡潔的視圖，當數據改變時 React 能有效地更新并正確地渲染組件。

以聲明式編寫 UI，可以讓你的代碼更加可靠，且方便調試。

組件化

創建擁有各自狀態的組件，再由這些組件構成更加復雜的 UI。

組件邏輯使用 JavaScript 編寫而非模板，因此你可以輕松地在應用中傳遞數據，并使得狀態與 DOM 分離。

一次學習，隨處編寫

無論你現在正在使用什么技術棧，你都可以隨時引入 React 來開發新特性，而不需要重寫現有代碼。

React 還可以使用 Node 進行服務器渲染，或使用 React Native 開發原生移動應用。

https://github.com/facebook/react

React 相關的項目可以看: 一個 React 技術揭秘的項目，自頂向下的 React 源碼分析。

2. vue

Vue.js 是一個漸進式 JavaScript 框架，也是目前前端最流行的框架。

易用

• 已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

靈活

• 不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運行大小

• 超快虛擬 DOM

• 最省心的優化

https://github.com/vuejs/vue

Vue 相關的項目可以看看：推薦 7 個 Vue2、Vue3 源碼解密分析的開源項目 和 Vue3 的學習教程匯總、源碼解釋項目、支持的 UI 組件庫、優質實戰項目 ，你會找到 Vue 的學習寶藏庫。

3. svelte

Svelte 是一個前端 UI 框架。

特性：

• 解決網站的臃腫危機。Svelte 將你的模板變成快速、輕量級的 vanilla JavaScript。

• 簡單易用。使用你掌握的語言，從可組合、易寫的模塊中構建應用。

• 快速而又堅固。編譯時靜態分析確保瀏覽器不再需要更多的工作。

https://github.com/sveltejs/svelte

4. angular

AngularJS 是一個應用設計框架與開發平臺，用于創建高效、復雜、精致的單頁面應用，通過新的屬性和表達式擴展了 HTML，實現一套框架，多種平臺，移動端和桌面端。

AngularJS有著諸多特性，最為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。

https://github.com/angular/angular

5. solid

用于構建用戶界面的聲明式、高效且靈活的 JavaScript 庫。

它把 React Vue 的精華給吸取過來了，jsx，響應式。

Solid 為什么性能這么快，主要三個方面：

• 直接使用瀏覽器的 DOM, 沒有虛擬 DOM， DOM diff 一整套算法

• 響應式原理，精準更新對應的值

• 提前編譯，更小的包體積，尺寸小

https://github.com/solidjs/solid

6. alpine

Alpine.js 通過很低的成本提供了與 Vue 或 React 這類大型框架相近的響應式和聲明式特性。

你可以繼續操作 DOM，并在需要的時候使用 Alpine.js。

可以理解為 JavaScript 版本的 Tailwind。

Alpine 的優勢在于 DOM 操作的簡便性，例如：

• 在某些條件下顯示和隱藏 DOM 節點，

• 綁定用戶輸入，

• 監聽事件并相應地更改UI，

你還可以使用 Alpine.js 來模板化數據是否可以在 JSON 中使用。

https://github.com/alpinejs/alpine

7. vue-next

易用

• 已經會了 HTML、CSS、JavaScript？即刻閱讀指南開始構建應用！

靈活

• 不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。

高效

• 20kB min+gzip 運行大小

• 超快虛擬 DOM

• 最省心的優化

https://github.com/vuejs/core

8. petite-vue

尤雨溪發布了一款針對漸進增強（progressive enhancement）進行優化的 Vue 發行版——petite-vue，大小僅有約 5kb。

與標準 Vue 相比，petite-vue 具備相同的模板語法和響應式心理模型，而二者的差別在于 petite-vue 專門針對在服務器框架渲染的一個現有 HTML 頁面上 “sprinkle” 少量交互進行了優化。

petite-vue 的亮點不僅在于體積小，還在于它能夠使用針對漸進增強的最優實現。

服務端渲染一般會有注水（hydrate）過程，而在 petite-vue 要做的事情比較簡單，被稱為"灑水（sprinkling）"

https://github.com/vuejs/petite-vue

9. lit

Lit 是一個基于 Web-Component 構建的前端框架，前身基本可以理解為即 Polymer ， Lit 提供了如下具有競爭力的特性

基于 Web-Component 的更高層封裝，提供了現代前端開發習慣的響應式數據，聲明式的模版，減少了web component的一部分樣板代碼.

小。運行時僅有5K

性能強悍。規避了 VDOM 的一些弊端，更新時僅處理 UI 中的異步部分（可以理解成僅處理響應式的部分）

兼容性較好。因為 web-component 是 HTML 的原生能力，也就代表著 web-component 可以在任何使用 HTML 的地方使用，框架無關。

https://github.com/lit/lit

10. htmx

HTML 的高性能工具。

htmx 允許您使用屬性直接以 HTML 訪問 AJAX、WebSockets 和服務器發送的事件，因此您可以使用超文本的簡單性和強大功能構建現代用戶界面

htmx 很小（~7k 最小 gz'd），dependency-free，可擴展，與 IE11 兼容。

https://github.com/bigskysoftware/htmx

最后

平時如何發現好的開源項目，可以看看這篇文章：GitHub 上能挖礦的神仙技巧 - 如何發現優秀開源項目

更多精彩項目，請看下方寶藏倉庫，請慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

不知不覺，原創文章已經寫到第 67 期了呢，幾乎每一篇都是貓哥精心挑選的優質開源項目，推送的每一篇文章里面的項目幾乎都是對前端開發很有幫助的。

原創不易，一篇優質的文章都是要肝幾個晚上才能肝出來的，花費很多時間、精力去篩選和寫推薦理由，大佬們看完文章后順手點個贊或者轉發吧，就當給貓哥一點鼓勵吧。

往期精文

• 2021 最流行的十大項目，新項目居榜首，總有長江后浪推前浪！

• 推薦 10 個好用的 Vue3 的開源項目，開發效率又能提升了！

• JS 加強篇！推薦 10 個好用的 TypeScript 的開源項目 YYDS ！

• 推薦 12 個好用的 React 的開源項目，開發效率又能提升了！

關注公眾號：前端GitHub，回復 電子書 即可以獲得下面 1000 本技術精華書籍哦，貓哥微信號：CB834301747 。

如果不想錯過精彩內容，請多給本公眾號點贊哦，這樣就會先收到內容推薦的。

總結

以上是生活随笔為你收集整理的2021 最流行的十大 JS 框架，前三又换牌了，最值得关注的是 Svelte 和 Solid 的崛起！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。