阿裡最受歡迎的16個前端開源項目

大家好，我是Echa。

今天小編要說的主角是阿裡巴巴，一說到阿裡，作為程式員的小編，馬上就能聯想到阿裡巴巴中的達摩院，達摩院人才濟濟，能進去的人都是有一技之長，都是絕世高手。小編盤點阿裡巴巴的達摩院的前沿實驗室就有五大類前沿技術的實驗室，那是神一般的存在地方。也是國人的驕傲。具體如下：

1. 機器智能實驗室

• 語音實驗室
• 視覺實驗室
• 語言技術實驗室
• 決策智能實驗室
• 城市大腦實驗室

1. 資料計算實驗室

• 計算技術實驗室
• 智能計算實驗室
• 資料庫與存儲實驗室
• 作業系統實驗室

1. 機器人實驗室

• 自動駕駛實驗室

1. 金融科技實驗室

• 金融智能實驗室
• 區塊鍊實驗室
• 生物識别實驗室

1. X實驗室

• 量子實驗室
• XG實驗室
• XR實驗室

今天小編先簡單分享阿裡最受歡迎的16個前端開源項目，希望對大家有所幫助。至于複雜的達摩院實驗室相關項目先發個預告，後續小編挨個挨個給大家分析講解。

全文大綱

1. ant-design-螞蟻金服開源的一套企業級的前端設計語言和基于 React 的前端架構實作。
2. g2-資料驅動的高互動可視化圖形文法，一條語句即可建構出各種各樣的可互動的統計圖表。
3. fusion-企業級中背景 UI 解決方案，旨在提升設計與開發之間 UI 建構效率的工作方式。
4. BizCharts-基于 G2 封裝的 React 圖表庫，資料可視化項目可能會用到
5. egg-企業級 Node.js 架構
6. umi-基于 React 的前端架構
7. dawn-前端建構和工程化工具，簡化并統一了開發人員的日常建構與開發相關的工作。
8. G3D-一個基于 WebGL 的 Javascript 3D 繪圖引擎。
9. Weex-跨平台移動開發工具。
10. Weex Ui-基于 Weex 的 UI 元件庫
11. Ant Motion 動效語言& React 架構動效解決方案。
12. Hilo- HTML5 互動遊戲引擎。這個項目可以幫助開發者快速建立HTML5遊戲。
13. Velocity.js -JavaScript 模闆引擎。
14. React Web -通過與 React Native 一緻的 API 建構 Web 應用。
15. Mock.js -模拟資料生成器，幫助前端開發者獨立于後端進行開發，幫助編寫單元測試。
16. formilyjs-基于React的表單解決方案。

ant-design

官網：https://ant.design/

Github：https://github.com/ant-design/ant-design

antd 是基于 Ant Design 設計體系的 React UI 元件庫，主要用于研發企業級中背景産品。

特性

• 提煉自企業級中背景産品的互動語言和視覺風格。
• 開箱即用的高品質 React 元件。
• 使用 TypeScript 開發，提供完整的類型定義檔案。
• ⚙️ 全鍊路開發和設計工具體系。
• 數十個國際化語言支援。
• 深入每個細節的主題定制能力。

如下圖：

g2

官網：https://g2.antv.antgroup.com/

Github：https://github.com/antvis/g2

G2 起源于 Leland Wilkinson 的圖形文法：《The Grammar of Graphics》，但又不止于圖形文法。

G2 是一個簡潔的、漸進式的可視化文法。文檔将按照下面的順序去分别介紹每一個子產品，你可以把它當做一個字典去搜尋和查詢。

特色

• 漸進式文法：結合工業和學術實踐，實作圖形文法、動畫文法和互動文法。
• 豐富的标記：内置 10+ 基礎标記，8+ 高階标記。
• 高可擴充性：提供統一機制擴充所有可視化元件。
• 個性化風格：支援手繪、圓角、紋理等風格。
• 多環境渲染：支援 Canvas、SVG 以及 WebGL，和 Node.js 服務端渲染。

如下圖：

fusion

官網：https://fusion.design/pc/?themeid=2

Github： https://github.com/alibaba-fusion/next

fusion-企業級中背景 UI 解決方案，旨在提升設計與開發之間 UI 建構效率的工作方式。

特色

1. 企業級的中背景設計系統解決方案

基于對阿裡集團中背景業務的總結和抽象， 提供了一套開箱即用的核心模式

1. 強大的配置平台，輕松維護品牌統一

通過設計系統站點，統一管理設計物料和前端物料； 使用 Design Token，輕松定制全局樣式

1. 子產品化研發，讓效率突飛猛進

配合前端工具，開發子產品模闆更高效

1. 原生插件，讓設計和研發無縫銜接

設計系統裡所有設計物料和前端物料，都能通過 Sketch 插件直接使用，真正做到 Design to Code

如下圖：

BizCharts

官網：https://bizcharts.taobao.com/products/bizCharts

Github： https://github.com/alibaba/BizCharts

BizCharts - 基于 G2 封裝的 React 圖表庫，資料可視化項目可能會用到。

特性

• 是基于 G2 4.X 封裝的 React 圖表庫，具有 G2、React 的全部優點，可以讓使用者以元件的形式組合出無數種圖表
• 內建了大量的統計工具，支援多種坐标系繪制，互動定制，動畫定制以及圖形定制等
• 性能穩定且具有強大的擴充能力和高度自定義能力
• 内置了g2Plot的42個基礎圖表

如下圖：

egg

官網：https://eggjs.org/

Github： https://github.com/eggjs/egg

Egg.js 為企業級架構和應用而生，我們希望由 Egg.js 孕育出更多上層架構，幫助開發團隊和開發人員降低開發和維護成本。

設計原則

我們深知企業級應用在追求規範和共建的同時，還需要考慮如何平衡不同團隊之間的差異，求同存異。是以我們沒有選擇社群常見架構的大集市模式（內建如資料庫、模闆引擎、前端架構等功能），而是專注于提供 Web 開發的核心功能和一套靈活可擴充的插件機制。我們不會做出技術選型，因為固定的技術選型會使架構的擴充性變差，無法滿足各種定制需求。通過 Egg，團隊的架構師和技術負責人可以非常容易地基于自身的技術架構在 Egg 基礎上擴充出适合自身業務場景的架構。

Egg 的插件機制有很高的可擴充性，一個插件隻做一件事（比如 Nunjucks 模闆封裝成了 egg-view-nunjucks、MySQL 資料庫封裝成了 egg-mysql）。Egg 通過架構聚合這些插件，并根據自己的業務場景定制配置，這樣應用的開發成本就變得很低。

Egg 奉行『約定優于配置』，按照一套統一的約定進行應用開發，團隊内部采用這種方式可以減少開發人員的學習成本，開發人員不再是『釘子』，可以流動起來。沒有約定的團隊，溝通成本是非常高的，比如有人會按目錄分棧而其他人按目錄分功能，開發者認知不一緻很容易犯錯。但約定不等于擴充性差，相反 Egg 有很高的擴充性，可以按照團隊的約定定制架構。使用 Loader 可以讓架構根據不同環境定義預設配置，還可以覆寫 Egg 的預設約定。

與社群架構的差異

Express 是 Node.js 社群廣泛使用的架構，簡單且擴充性強，非常适合做個人項目。但架構本身缺少約定，标準的 MVC 模型會有各種千奇百怪的寫法。Egg 按照約定進行開發，奉行『約定優于配置』，團隊協作成本低。

Sails 是和 Egg 一樣奉行『約定優于配置』的架構，擴充性也非常好。但是相比 Egg，Sails 支援 Blueprint REST API、WaterLine 這樣可擴充的 ORM、前端內建、WebSocket 等，但這些功能都是由 Sails 提供的。而 Egg 不直接提供功能，隻是內建各種功能插件，比如實作 egg-blueprint，egg-waterline 等這樣的插件，再使用 sails-egg 架構整合這些插件就可以替代 Sails 了。

特性

• 提供基于 Egg 定制上層架構的能力
• 高度可擴充的插件機制
• 内置多程序管理
• 基于 Koa 開發，性能優異
• 架構穩定，測試覆寫率高
• 漸進式開發

如下圖：

umi

官網：https://umijs.org/

Github： https://github.com/umijs/umi

Umi，中文發音為「烏米」，是可擴充的企業級前端應用架構。Umi 以路由為基礎的，同時支援配置式路由和約定式路由，保證路由的功能完備，并以此進行功能擴充。然後配以生命周期完善的插件體系，覆寫從源碼到建構産物的每個生命周期，支援各種功能擴充和業務需求。

Umi 是螞蟻集團的底層前端架構，已直接或間接地服務了 10000+ 應用，包括 Java、Node、H5 無線、離線（Hybrid）應用、純前端 assets 應用、CMS 應用、Electron 應用、Serverless 應用等。他已經很好地服務了我們的内部使用者，同時也服務了不少外部使用者，包括淘系、飛豬、阿裡雲、位元組、騰訊、口碑、美團等。在 2021 年位元組的調研報告中，Umi 是其中 25.33% 開發者的選擇。

Umi 有很多非常有意思的特性，比如。

1、企業級，在安全性、穩定性、最佳實踐、限制能力方面會考慮更多

2、插件化，啥都能改，Umi 本身也是由插件構成

3、MFSU，比 Vite 還快的 Webpack 打包方案

4、基于 React Router 6 的完備路由

5、預設最快的請求

6、SSR & SSG

7、穩定白盒性能好的 ESLint 和 Jest

8、React 18 的架構級接入

9、Monorepo 最佳實踐

如下圖：

dawn

官網：https://alibaba.github.io/dawn/

Github： https://github.com/alibaba/dawn

dawn 前端建構和工程化工具，簡化并統一了開發人員的日常建構與開發相關的工作。

Dawn 取「黎明、破曉」之意，原為「阿裡雲·業務營運團隊」内部的前端建構和工程化工具，現已完全開源。它通過 pipeline 和 middleware 将開發過程抽象為相對固定的階段和有限的操作，簡化并統一了開發人員的日常建構與開發相關的工作。

有什麼特點？

• 采用中間件技術，封裝常用功能，易于擴充，友善重用
• 支援 pipeline 讓多個 task 協同完成建構任務
• 簡單、一緻的指令行接口，易于開發人員使用
• 支援基于「中心服務」管理中間件和工程模闆
• 支援搭建私有中心服務，并統一下發建構規則，易于團隊統一管理

如下圖：

G3D

官網： https://alibaba.github.io/G3D/

Github： https://github.com/alibaba/G3D

G3D 是一款基于 WebGL 實作的 JavaScript 3D 渲染引擎。本系列教程将教會你如何使用 G3D。

基礎

遵循以下幾個步驟，以建立最基礎的 3D 場景。

1. 建立一個渲染引擎(Engine)，傳入 canvas 對象。
2. 建立一個場景(Scene)，傳入剛剛建立好的渲染引擎。
3. 建立一個相機。在大多數情況下，你需要建立透視相機(PerspectiveCamera)，這裡我們建立一個環繞透視相機(RotatePerspectiveCamera)，它繼承自透視相機。
4. 建立一些光源。G3D 提供了幾種不同類型的光源，這裡我們建立了一個平行光源(DirectionalLight)。
5. 建立一些網格體(Mesh)。這裡，我們建立了一個球形的網格體和一個矩形平面的網格體。
6. 使場景開始渲染。

如下圖：

Weex

官網： http://weex.incubator.apache.org/

Github： https://github.com/apache/incubator-weex/

Weex - 跨平台移動開發工具

如下圖：

weex-ui

官網： https://apache.github.io/incubator-weex-ui/#/

Github： https://github.com/apache/incubator-weex-ui

weex-ui 基于 Weex 的 UI 元件庫 。

如下圖：

Ant Motion

官網： https://motion.ant.design/index-cn

Github： https://github.com/ant-design/ant-motion/

Motion動效

• 動效價值
• 衡量動效意義

界面動效能加強使用者認知且增加活力。

動效價值#

• 增加體驗舒适度： 讓使用者認知過程更為自然。
• 增加界面活力：第一時間吸引注意力，突出重點。
• 描述層級關系：展現元素之間的層級與空間關系。
• 提供回報、明确意向：助力互動體驗。

衡量動效意義#

衡量一個動效是否有意義，我們可以通過以下幾個标準來考核：

• 一個動效的存在是否合理：是否帶有明确的目的性，助力互動體驗，沒有多餘的動效。
• 動效與性能：不能出現大幅度波動丢幀或者卡頓現象, 動效的體驗須是流暢的，并且不影響産品的性能。

如下圖：

Hilo- HTML5

官網： https://hiloteam.github.io/

Github： https://github.com/hiloteam/Hilo

Hilo是一個跨終端的互動遊戲解決方案。他有以下幾個特點值得被推薦。

Hilo作為一個跨終端的互動遊戲解決方案。它的源碼和架構是無依賴的，子產品化的。同時也是開源的。

為了滿足使用不同腳本子產品加載器的同學的喜好。Hilo提供了多種子產品範式的包裝版本，請看這裡不管你屬于哪一個陣營，都能找到你愛的哪一個。

Hilo對于跨終端的解決方案是：永遠保持最小核心，以漸進增強的獨立Shim Adaptor的方式去包容不同終端。

• 如果你的項目隻需要适配對canvas和css3支援度良好的進階浏覽器或者webview，你可以直接使用Hilo基礎渲染器。
• 如果需要适配不支援canvas的終端，隻需要簡單的引入一個Flash Shim子產品即可。

Hilo不僅僅是一個渲染引擎，它更是一個內建了 Hilo Audio, Hilo Preload 等遊戲建構服務的綜合解決方案。

除此之外，Hilo為動畫紋理集的産出提供了一套自動化的輸出方案，力求為你的建構帶來更多的便利。

如下圖：

Velocity.js

Github：https://github.com/shepherdwind/velocity.js

velocity.js是velocity模闆文法的javascript實作。

特性

• 支援用戶端和伺服器端使用
• 文法分析和模闆渲染分離
• 基本完全支援velocity文法
• Vim Syntax

如下圖：

React Web

Github： https://github.com/taofed/react-web

通過 React Native 相容的 API 建構無線 Web 應用

如下圖：

Mock.js

官網：http://mockjs.com/

Github： https://github.com/nuysoft/Mock/wiki

mockjs 模拟資料生成器，幫助前端開發者獨立于後端進行開發，幫助編寫單元測試。

如下圖：

formilyjs

官網：https://formilyjs.org

Github：https://github.com/alibaba/formily

介紹

在 React 中，在受控模式下，表單的整樹渲染問題非常明顯。特别是對于資料關聯的場景，很容易導緻頁面卡頓，為了解決這個問題，我們将每個表單字段的狀态做了分布式管理，進而大大提升了表單操作性能。同時，我們深度整合了 JSON Schema 協定，可以幫助您快速解決後端驅動表單渲染的問題。

特性

• 可設計，借助 Form Builder 可以快速搭建表單
• 高性能，字段分布式渲染，大大減輕 React 渲染壓力
• 支援 Ant Design/Fusion Next 組建體系
• JSX 标簽化寫法/JSON Schema 資料驅動方案無縫遷移過渡
• 副作用邏輯獨立管理，涵蓋各種複雜關聯校驗邏輯
• 支援各種表單複雜布局方案

如下圖：

最後

一台電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;

一 個靈感,一段程式,推動科技進步,促進社會發展。

創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，後面會不定期更新幹貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。