盤(pán)點(diǎn)阿里巴巴 15 個(gè)前端開(kāi)源項(xiàng)目（盤(pán)點(diǎn)阿里巴巴 15 個(gè)前端開(kāi)源項(xiàng)目是什么）

大家好，我是 Echa。

今天來(lái)盤(pán)點(diǎn)一下阿里巴巴那些熱門(mén)的前端開(kāi)源項(xiàng)目，你都用過(guò)哪些？

全文概覽：

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

1. Ant Design

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

• 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺(jué)風(fēng)格。
• 開(kāi)箱即用的高質(zhì)量 React 組件。
• 使用 TypeScript 開(kāi)發(fā)，提供完整的類(lèi)型定義文件。
• 全鏈路開(kāi)發(fā)和設(shè)計(jì)工具體系。
• 數(shù)十個(gè)國(guó)際化語(yǔ)言支持。
• 深入每個(gè)細(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 是一套為開(kāi)發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫(kù)。

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

3. Egg.js

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

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

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

4. Icejs

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

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

image.png

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

5. UmiJS

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

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

image.png

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

6. G2

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

image.png

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

7. ahooks

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

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

image.png

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

8. Formily

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

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

image.png

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

9. Rax

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

• Rax 語(yǔ)法層面以 React 為標(biāo)準(zhǔn)，可以使用 Hooks、Context 等 80% 以上支持度的 React API
• 官方配套的研發(fā)框架 Rax App，支持 TypeScript、Less/Sass 等基礎(chǔ)工程能力，同時(shí)支持 MPA、SPA、SSR 多種能力
• 支持通過(guò)完整的 Rax 語(yǔ)法開(kāi)發(fā)跨支付寶/微信/字節(jié)等不同廠(chǎng)商的小程序，同時(shí)可降級(jí)到 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 低代碼引擎是一款為低代碼平臺(tái)開(kāi)發(fā)者提供的，具備強(qiáng)大擴(kuò)展能力的低代碼研發(fā)框架。由阿里巴巴前端委員會(huì)、釘釘宜搭聯(lián)合出品。使用者只需要基于低代碼引擎便可以快速定制符合自己業(yè)務(wù)需求的低代碼平臺(tái)。其具有以下特點(diǎn)：

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

image.png

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

11. Midway

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

image.png

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

12. BizCharts

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

image.png

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

13. Hilo

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

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

image.png

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

14. XRender

XRender 是一個(gè)很易用的中后臺(tái)「表單 / 表格 / 圖表」解決方案。

image.png

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

15. Fusion Design

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

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

如果你覺(jué)得有用的話(huà)，請(qǐng)點(diǎn)贊我，關(guān)注我，最后，感謝你的閱讀，編程愉快！