大家好，我是 Echa。

今天來盤點一下阿里巴巴那些熱門的前端開源項目，你都用過哪些？

全文概覽：

1. Ant Design： 企業(yè)級 UI 設(shè)計語言和 React 組件庫
2. Element UI： 基于 Vue 2.0 的桌面端組件庫
3. Egg.js： 企業(yè)級 Node.js 框架
4. Icejs： 基于 React 中后臺應(yīng)用解決方案
5. UmiJS： 可插拔的企業(yè)級 React 應(yīng)用框架
6. G2： 數(shù)據(jù)驅(qū)動的高交互可視化圖形語法
7. ahooks： 高質(zhì)量可靠的 React Hooks 庫
8. Formily： MVVM 表單解決方案
9. Rax： 跨容器的渲染引擎
10. LowCodeEngine： 低代碼引擎
11. Midway： 面向未來的云端一體 Node.js 框架
12. BizCharts： 通用圖表組件庫
13. Hilo： HTML5 互動游戲引擎
14. XRender： 中后臺表單、表格、圖表解決方案
15. Fusion Design： 企業(yè)級中后臺 UI 解決方案

1. Ant Design

Ant Design 是一套企業(yè)級 UI 設(shè)計語言和 React 組件庫。其具有以下特性：

• 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風(fēng)格。
• 開箱即用的高質(zhì)量 React 組件。
• 使用 TypeScript 開發(fā)，提供完整的類型定義文件。
• 全鏈路開發(fā)和設(shè)計工具體系。
• 數(shù)十個國際化語言支持。
• 深入每個細(xì)節(jié)的主題定制能力。

• Ant Design Github（?? 81.5k）：https://github.com/ant-design/ant-design
• Ant Design Pro Github（?? 32.7k）：https://github.com/ant-design/ant-design-pro
• Ant Design Mobile Github（?? 10.5k）：https://github.com/ant-design/ant-design-mobile

2. Element UI

Element 是一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。

Github（?? 52.5k）：https://github.com/ElemeFE/element

3. Egg.js

Egg.js 是一個企業(yè)級 Node.js 框架，Egg 的插件機(jī)制有很高的可擴(kuò)展性，一個插件只做一件事。Egg 通過框架聚合這些插件，并根據(jù)自己的業(yè)務(wù)場景定制配置，這樣應(yīng)用的開發(fā)成本就變得很低。其具有以下特性：

• 提供基于 Egg 定制上層框架的能力
• 高度可擴(kuò)展的插件機(jī)制
• 內(nèi)置多進(jìn)程管理
• 基于 Koa 開發(fā)，性能優(yōu)異
• 框架穩(wěn)定，測試覆蓋率高
• 漸進(jìn)式開發(fā)

Github（?? 18.1k）：https://github.com/eggjs/egg

4. Icejs

飛冰是一個基于 React 的研發(fā)解決方案，圍繞應(yīng)用研發(fā)框架 icejs 提供基礎(chǔ)的構(gòu)建、路由、調(diào)試等基礎(chǔ)能力以及微前端、一體化等領(lǐng)域能力，同時結(jié)合可視化操作、物料復(fù)用等方案降低研發(fā)門檻。其具有以下特性：

• 同時支持 Vite & Webpack 模式，業(yè)務(wù)可以按需選擇
• 開箱即用的工程能力：TypeScript/Webpack5/Vite/樣式方案/Mock/…
• 貼合業(yè)務(wù)的最佳實踐：目錄規(guī)范、代碼規(guī)范、路由方案、狀態(tài)管理、數(shù)據(jù)請求等
• 多種應(yīng)用模式：支持 SPA、MPA，同時支持服務(wù)端渲染 SSR 以及靜態(tài)構(gòu)建 SSG
• 強(qiáng)大的插件能力：官方所有能力都通過插件實現(xiàn)，業(yè)務(wù)可以通過插件擴(kuò)展各種能力
• 豐富的領(lǐng)域方案：微前端解決方案 icestark、一體化方案、React Hooks 解決方案 ahooks、表單方案 Formily 等

image.png

Github（?? 17.3k）：https://github.com/alibaba/ice

5. UmiJS

umi 是一個可插拔的企業(yè)級 react 應(yīng)用框架。Umi 以路由為基礎(chǔ)的，同時支持配置式路由和約定式路由，保證路由的功能完備，并以此進(jìn)行功能擴(kuò)展。然后配以生命周期完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求。它具有有很多非常有意思的特性，比如：

• 企業(yè)級，在安全性、穩(wěn)定性、最佳實踐、約束能力方面會考慮更多
• 插件化，啥都能改，Umi 本身也是由插件構(gòu)成
• MFSU，比 Vite 還快的 Webpack 打包方案
• 基于 React Router 6 的完備路由
• 默認(rèn)最快的請求
• SSR & SSG
• 穩(wěn)定白盒性能好的 ESLint 和 Jest
• React 18 的框架級接入
• Monorepo 最佳實踐

image.png

Github（?? 12.9k）：https://github.com/umijs/umi

6. G2

G2 一套面向常規(guī)統(tǒng)計圖表，以數(shù)據(jù)驅(qū)動的高交互可視化圖形語法，具有高度的易用性和擴(kuò)展性。使用 G2，你可以無需關(guān)注圖表各種繁瑣的實現(xiàn)細(xì)節(jié)，一條語句即可使用 Canvas 或 SVG 構(gòu)建出各種各樣的可交互的統(tǒng)計圖表。

image.png

Github（?? 11.3k）：https://github.com/antvis/g2

7. ahooks

ahooks 是一套高質(zhì)量可靠的 React Hooks 庫，在當(dāng)前 React 項目研發(fā)過程中，一套好用的 React Hooks 庫是必不可少的，希望 ahooks 能成為您的選擇。其具有以下特性：

• 易學(xué)易用
• 支持 SSR
• 對輸入輸出函數(shù)做了特殊處理，且避免閉包問題
• 包含大量提煉自業(yè)務(wù)的高級 Hooks
• 包含豐富的基礎(chǔ) Hooks
• 使用 TypeScript 構(gòu)建，提供完整的類型定義文件

image.png

Github（?? 10.1k）：https://github.com/alibaba/hooks

8. Formily

Formily 是一個抽象了表單領(lǐng)域模型的 MVVM 表單解決方案。在 React 中，在受控模式下，表單的整樹渲染問題非常明顯。特別是對于數(shù)據(jù)聯(lián)動的場景，很容易導(dǎo)致頁面卡頓，為了解決這個問題，F(xiàn)ormily 將每個表單字段的狀態(tài)做了分布式管理，從而大大提升了表單操作性能。同時，深度整合了 JSON Schema 協(xié)議，可以幫助你快速解決后端驅(qū)動表單渲染的問題。其具有以下特點：

• 高性能
• 開箱即用
• 聯(lián)動邏輯實現(xiàn)高效
• 跨端能力，邏輯可跨框架，跨終端復(fù)用
• 動態(tài)渲染能力

image.png

Github（?? 8.3k）：https://github.com/alibaba/formily

9. Rax

Rax 是阿里巴巴應(yīng)用最廣泛的跨端解決方案，支持開發(fā)者通過類 React DSL 編寫 Web、小程序、Flutter 等不同容器的跨端應(yīng)用。其具有以下特性：

• Rax 語法層面以 React 為標(biāo)準(zhǔn)，可以使用 Hooks、Context 等 80% 以上支持度的 React API
• 官方配套的研發(fā)框架 Rax App，支持 TypeScript、Less/Sass 等基礎(chǔ)工程能力，同時支持 MPA、SPA、SSR 多種能力
• 支持通過完整的 Rax 語法開發(fā)跨支付寶/微信/字節(jié)等不同廠商的小程序，同時可降級到 Web
• 基于 Web 標(biāo)準(zhǔn)支持跨多容器的跨端應(yīng)用，包含 Web 應(yīng)用、Flutter 應(yīng)用（Kraken）、Weex 應(yīng)用
• 豐富的跨端生態(tài)，比如跨端組件 Fusion Mobile，跨端 API Uni API

image.png

Github（?? 7.8k）：https://github.com/alibaba/rax

10. LowCodeEngine

LowCodeEngine 低代碼引擎是一款為低代碼平臺開發(fā)者提供的，具備強(qiáng)大擴(kuò)展能力的低代碼研發(fā)框架。由阿里巴巴前端委員會、釘釘宜搭聯(lián)合出品。使用者只需要基于低代碼引擎便可以快速定制符合自己業(yè)務(wù)需求的低代碼平臺。其具有以下特點：

• 提煉自企業(yè)級低代碼平臺的面向擴(kuò)展設(shè)計的內(nèi)核引擎，奉行最小內(nèi)核，最強(qiáng)生態(tài)的設(shè)計理念
• 開箱即用的高質(zhì)量生態(tài)元素，包括 物料體系、設(shè)置器、插件 等
• 完善的工具鏈，支持 物料體系、設(shè)置器、插件 等生態(tài)元素的全鏈路研發(fā)周期
• 強(qiáng)大的擴(kuò)展能力，已支撐近 100 個各種垂直類低代碼平臺
• 使用 TypeScript 開發(fā)，提供完整的類型定義文件

image.png

Github（?? 7.6k）：https://github.com/alibaba/lowcode-engine

11. Midway

Midway 是一個適用于構(gòu)建 Serverless 服務(wù)，傳統(tǒng)應(yīng)用、微服務(wù)，小程序后端的 Node.js 框架。它可以使用 Koa，Express 或 Egg.js 作為基礎(chǔ) Web 框架。它還提供了獨立使用的基本解決方案，例如 Socket.io，GRPC，Dubbo.js 和 RabbitMQ 等。此外，Midway 也適用于前端/全棧開發(fā)人員的 Node.js 無服務(wù)器框架。構(gòu)建下一個十年的應(yīng)用程序?？稍?AWS，阿里云，騰訊云和傳統(tǒng) VM /容器上運(yùn)行。與 React 和 Vue 輕松集成。

image.png

Github（?? 5.9k）：https://github.com/midwayjs/midway

12. BizCharts

BizCharts是阿里通用圖表組件庫，致力于打造企業(yè)中后臺高效、專業(yè)、便捷的數(shù)據(jù)可視化解決方案，基于 G2與G2Plot封裝的React圖表庫，已經(jīng)歷阿里復(fù)雜業(yè)務(wù)場景長達(dá)三年的洗禮，在靈活性、易用性、豐富度上滿足常規(guī)圖表和高度自定義圖表的業(yè)務(wù)實現(xiàn)。

image.png

Github（?? 5.9k）：https://github.com/alibaba/BizCharts

13. Hilo

Hilo 是阿里巴巴集團(tuán)開發(fā)的一款HTML5跨終端游戲解決方案，ta可以幫助開發(fā)者快速創(chuàng)建HTML5游戲。其具有以下特性：

• Hilo 支持多種模塊范式的包裝版本，包括AMD，CMD，COMMONJS，Standalone多種方式接入。另外，你可以根據(jù)需要新增和擴(kuò)展模塊和類型；
• 極精簡的模塊設(shè)計，完全面向?qū)ο螅?/span>
• 多種渲染方式, 提供DOM，Canvas，Flash，WebGL等多種渲染方案（目前已經(jīng)申請專利）；
• 全端瀏覽器的支持和高性能方案，獨有的Flash渲染方案，即使在低版本IE瀏覽器下也可以跑起來“酷炫”游戲；DOM渲染方案能顯著解決低性能手機(jī)瀏覽器遇到的性能問題；
• 物理引擎支持——Chipmunk，支持自擴(kuò)展物理實現(xiàn)；骨骼動畫支持——DragonBones，同時內(nèi)建骨骼動畫系統(tǒng)——Tahiti（目前內(nèi)部使用）；
• 案例豐富，框架成熟，已經(jīng)經(jīng)歷多屆阿里巴巴雙十一，年中大促互動營銷活動考驗；

image.png

Github（?? 5.8k）：https://github.com/hiloteam/Hilo

14. XRender

XRender 是一個很易用的中后臺「表單 / 表格 / 圖表」解決方案。

image.png

Github（?? 4.9k）：https://github.com/alibaba/x-render

15. Fusion Design

Fusion Design 是一種旨在提升設(shè)計與開發(fā)之間 UI 構(gòu)建效率的工作方式。通過建設(shè)基于 DPL 模式的，設(shè)計、前端之間的標(biāo)準(zhǔn)協(xié)議與工作流，來快速構(gòu)建符合業(yè)務(wù)訴求的 DPL，提升 DPL 的構(gòu)建效率和應(yīng)用效率，幫助業(yè)務(wù)快速實現(xiàn) UI 構(gòu)建。

Github（?? 4.2k）：https://github.com/alibaba-fusion/next

如果你覺得有用的話，請點贊我，關(guān)注我，最后，感謝你的閱讀，編程愉快！