數(shù)據(jù)驅(qū)動(dòng)的高交互可視化圖形語法 AntV - G2

AntV

10年積累的成都網(wǎng)站建設(shè)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有聶拉木免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

同時(shí)，G2 也是 AntV 最重要的組成，始于《The Grammar of Graphics》一書描述的視覺編碼語法系統(tǒng)（這也是 G2 項(xiàng)目命名的由來）。

項(xiàng)目地址：https://github.com/antvis/g2

AntV

企業(yè)級(jí)中后臺(tái) UI 解決方案 Fusion Design

Fusion Design

Fusion Design 是一套企業(yè)級(jí)中后臺(tái)UI的解決方案，致力于解決設(shè)計(jì)師與前端在工作協(xié)同、產(chǎn)品體驗(yàn)一致性、開發(fā)效率方面的問題。

你可以通過一站式協(xié)作平臺(tái)靈活地定制自己的 DesignSystem，生成設(shè)計(jì)物料與代碼分片到設(shè)計(jì)師的工具端 FusionCool 及開發(fā)者的工具端 Iceworks，同時(shí)保證代碼和視覺稿之間的一致性。

@alifd/next 配合 Fusion Design 解決在頁面開發(fā)時(shí)設(shè)計(jì)師和前端協(xié)同的問題。通過這套體系設(shè)計(jì)師可以自由的定制組件的 UI 并產(chǎn)出一個(gè) npm 主題包，前端可以直接使用這個(gè)主題包不需要關(guān)注組件的還原度問題。省去了和設(shè)計(jì)師反復(fù)的去做還原度 Review 的工作量，大幅度的提高了開發(fā)效率。

項(xiàng)目地址：https://fusion.design/

Fusion Design

設(shè)計(jì)語言 & 前端框架 Ant Design

Ant Design

Ant Design 是螞蟻金服開發(fā)和正在使用的一套企業(yè)級(jí)的前端設(shè)計(jì)語言和基于 React 的前端框架實(shí)現(xiàn)。它的特性：企業(yè)級(jí)金融產(chǎn)品的交互語言和視覺體系；豐富實(shí)用的 React UI 組件；基于 React 的組件化開發(fā)模式；背靠 npm 生態(tài)圈；基于 webpack 的調(diào)試構(gòu)建方案，支持 ES6。

• 提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語言和視覺風(fēng)格。
• 開箱即用的高質(zhì)量 React 組件。
• 使用 TypeScript 構(gòu)建，提供完整的類型定義文件。
• 全鏈路開發(fā)和設(shè)計(jì)工具體系。

地址：https://github.com/ant-design/ant-design

Ant Design

基于 G2 封裝的 React 圖表庫 BizCharts

BizCharts

BizCharts 是一個(gè)基于 G2 封裝的 React 圖表庫，具有 G2、React 的全部優(yōu)點(diǎn)，可以讓用戶以組件的形式組合出無數(shù)種圖表；并且集成了大量的統(tǒng)計(jì)工具，支持多種坐標(biāo)系繪制，交互定制，動(dòng)畫定制以及圖形定制等等。相信 BizCharts 定能成為您的數(shù)據(jù)可視化項(xiàng)目的強(qiáng)力助手。

地址：https://github.com/alibaba/BizCharts

BizCharts

企業(yè)級(jí) Node.js 框架 Egg

EggJS

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

Egg 奉行『約定優(yōu)于配置』，按照一套統(tǒng)一的約定進(jìn)行應(yīng)用開發(fā)，團(tuán)隊(duì)內(nèi)部采用這種方式可以減少開發(fā)人員的學(xué)習(xí)成本，開發(fā)人員不再是『釘子』，可以流動(dòng)起來。沒有約定的團(tuán)隊(duì)，溝通成本是非常高的，比如有人會(huì)按目錄分棧而其他人按目錄分功能，開發(fā)者認(rèn)知不一致很容易犯錯(cuò)。但約定不等于擴(kuò)展性差，相反 Egg 有很高的擴(kuò)展性，可以按照團(tuán)隊(duì)的約定定制框架。使用 Loader 可以讓框架根據(jù)不同環(huán)境定義默認(rèn)配置，還可以覆蓋 Egg 的默認(rèn)約定。

地址：https://github.com/eggjs/egg

EggJS

基于 React 的前端框架 umi

UmiJS

umi，中文可發(fā)音為烏米，是一個(gè)可插拔的企業(yè)級(jí) react 應(yīng)用框架。umi 以路由為基礎(chǔ)的，支持類 next.js 的約定式路由，以及各種進(jìn)階的路由功能，并以此進(jìn)行功能擴(kuò)展，比如支持路由級(jí)的按需加載。然后配以完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個(gè)生命周期，支持各種功能擴(kuò)展和業(yè)務(wù)需求，目前內(nèi)外部加起來已有 50+ 的插件。

umi 是螞蟻金服的底層前端框架，已直接或間接地服務(wù)了 600+ 應(yīng)用，包括 java、node、H5 無線、離線（Hybrid）應(yīng)用、純前端 assets 應(yīng)用、CMS 應(yīng)用等。他已經(jīng)很好地服務(wù)了我們的內(nèi)部用戶，同時(shí)希望他也能服務(wù)好外部用戶。

地址：https://github.com/umijs/umi

前端構(gòu)建和工程化工具 Dawn

Dawn

Dawn 取「黎明、破曉」之意，原為「阿里云·業(yè)務(wù)運(yùn)營團(tuán)隊(duì)」內(nèi)部的前端構(gòu)建和工程化工具，現(xiàn)已完全開源。它通過 pipeline 和 middleware 將開發(fā)過程抽象為相對(duì)固定的階段和有限的操作，簡化并統(tǒng)一了開發(fā)人員的日常構(gòu)建與開發(fā)相關(guān)的工作。

特點(diǎn)

• 采用中間件技術(shù)，封裝常用功能，易于擴(kuò)展，方便重用
• 支持 pipeline 讓多個(gè) task 協(xié)同完成構(gòu)建任務(wù)
• 簡單、一致的命令行接口，易于開發(fā)人員使用
• 支持基于「中心服務(wù)」管理中間件和工程模板
• 支持搭建私有中心服務(wù)，并統(tǒng)一下發(fā)構(gòu)建規(guī)則，易于團(tuán)隊(duì)統(tǒng)一管理

地址：https://alibaba.github.io/dawn/

Dawn

頁面邏輯原型 Ant UX

Ant UX

Ant UX 是一套制作頁面邏輯的素材庫，當(dāng)你在產(chǎn)品設(shè)計(jì)初期，可以用它來繪制頁面與頁面之間的邏輯圖，幫助你了解產(chǎn)品架構(gòu)，業(yè)務(wù)流程

配合工具: OmniGraffle ,Sketch

• OmniGraffle 可以用來繪制圖表，流程圖，組織結(jié)構(gòu)圖以及插圖，也可以用來組織頭腦中思考的信息，組織頭腦風(fēng)暴的結(jié)果，繪制心智圖，作為樣式管理器，或設(shè)計(jì)網(wǎng)頁或PDF文檔的原型。它具有采用拖放的所見即所得界面。所謂的 "Stencils" 一組用于拖放的形狀—可以作為 OmniGraffle 的插件使用，用戶也可以創(chuàng)建自定義的 Stencils。
• Sketch 是一個(gè)矢量設(shè)計(jì)軟件，可以幫助你快速投入U(xiǎn)I設(shè)計(jì)當(dāng)中

地址：http://ux.ant.design/

Ant UX

跨容器的渲染引擎 Rax

Rax

Rax 是一個(gè)全新的思路。它是一個(gè)通用的跨容器的渲染引擎， 如果你使用過 React ， 那么你就已經(jīng)知道了該如何使用 Rax ， 因?yàn)樗鼈兊?API 是完全兼容的。

Rax 的誕生，主要還是為阿里巴巴廣泛的業(yè)務(wù)來服務(wù)的。現(xiàn)在，我們讓它走向開源，服務(wù)更多的開發(fā)者。

還記得 React Native 的口號(hào)：

Learn once, write anywhere.

但對(duì)于我們來說，或許這還不夠。真正的釋放我們的勞動(dòng)力，才是 Rax 要做的事情。 Rax 旨在

Write once, run everywhere.

我們只要開發(fā)一次，便不用再擔(dān)心各個(gè)平臺(tái)的兼容。

地址：https://alibaba.github.io/rax/

Rax

基于 WebGL 的 Javascript 3D 繪圖引擎 G3D

G3D

G3D 是一款基于 WebGL 的 javascript 3D 繪圖引擎。與其他的 WebGL 3D 引擎相比，G3D 是更加「純粹」的渲染引擎，也就是說，它完全不依賴任何 DOM API，而是僅僅依賴一個(gè) canvas 對(duì)象（或者類 canvas 對(duì)象）。該特性使得 G3D 不僅能夠運(yùn)行在瀏覽器環(huán)境中，也能夠運(yùn)行在一些非瀏覽器的 js 終端環(huán)境下（hybrid 環(huán)境），比如 GCanvas 環(huán)境（基于 Weex 或 ReactNative）。

地址：https://alibaba.github.io/G3D/

G3D

跨平臺(tái)移動(dòng)開發(fā)工具 Weex

Weex

Weex 致力于使開發(fā)者能基于當(dāng)代先進(jìn)的 Web 開發(fā)技術(shù)，使用同一套代碼來構(gòu)建 Android、iOS 和 Web 應(yīng)用。具體來講，在集成了 WeexSDK 之后，你可以使用 JavaScript 和現(xiàn)代流行的前端框架來開發(fā)移動(dòng)應(yīng)用。

Weex 的結(jié)構(gòu)是解耦的，渲染引擎與語法層是分開的，也不依賴任何特定的前端框架，目前主要支持 Vue.js 和 Rax 這兩個(gè)前端框架。

Weex 的另一個(gè)主要目標(biāo)是跟進(jìn)當(dāng)代先進(jìn)的 Web 開發(fā)和原生開發(fā)的技術(shù)，使生產(chǎn)力和性能共存。在開發(fā) Weex 頁面就像開發(fā)普通網(wǎng)頁一樣；在渲染 Weex 頁面時(shí)和渲染原生頁面一樣。

地址：https://github.com/apache/incubator-weex/

weex

基于 Weex 的 UI 組件庫 Weex UI

Weex UI

Weex UI 是一個(gè)基于 Weex 的富交互、輕量級(jí)、高性能的 UI 組件庫

地址：https://github.com/alibaba/weex-ui

Weex UI

動(dòng)效語言& React 框架動(dòng)效解決方案 Ant Motion

Ant Motion

Ant Motion 是從螞蟻金服的 Ant Design 中提煉出來的動(dòng)效語言。它不僅僅是動(dòng)效語言，同時(shí)也是一套 React 框架動(dòng)效解決方案，提供了單項(xiàng)，組合動(dòng)畫，以及整套解決方案，幫助開發(fā)者更容易的在項(xiàng)目中使用動(dòng)效。

• 增加體驗(yàn)舒適度： 讓用戶認(rèn)知過程更為自然。
• 增加界面活力：***時(shí)間吸引注意力，突出重點(diǎn)。
• 描述層級(jí)關(guān)系：體現(xiàn)元素之間的層級(jí)與空間關(guān)系。
• 提供反饋、明確意向：助力交互體驗(yàn)。

地址：https://motion.ant.design/index-cn

Ant Motion

多頁面切換場景統(tǒng)一解決方案 UltraViewPager

UltraViewPager 是阿里開源的一個(gè)封裝多種特性的 ViewPager ，主要是為多頁面切換場景提供統(tǒng)一解決方案。

UltraViewPager繼承自RelativeLayout，將ViewPager和indicator置于其中，同時(shí)UltraViewPager提供了一些ViewPager常用方法的代理，這樣在日常使用上保持和ViewPager無差異，如果需要調(diào)用ViewPager的所有方法，可通過getViewPager()方法拿到真正的ViewPager進(jìn)行操作。

豎向滑動(dòng)是通過在ViewPager的onInterceptTouchEvent和onTouchEvent中交換橫豎向的event location，同時(shí)設(shè)置特殊PageTransformer實(shí)現(xiàn)，詳見源碼。

地址：https://github.com/alibaba/UltraViewPager

模塊化 UI 界面方案 Tangram UI

Tangram UI

Tangram，七巧板，幾塊簡單的積木就能拼出大千世界。我們用Tangram來命名這套界面方案，也是希望他能像七巧板一樣可以通過幾塊積木就搭出豐富多彩的界面。

特性：

• 跨平臺(tái)支持：已有Android&iOS支持，一份數(shù)據(jù)，多端渲染一致
• 面向業(yè)務(wù)：流式布局，瀑布流布局，吸頂，浮標(biāo)，輪播，內(nèi)置布局可適應(yīng)大多數(shù)場景，開放的API，易于拓展自己的布局和解析器
• 高性能：高效的回收復(fù)用算法，可定制化的復(fù)用粒，適應(yīng)復(fù)雜布局的場景，為絲滑般順暢提供基礎(chǔ)
• 動(dòng)態(tài)組件：通過 VirtualView，支持自定義 XML 動(dòng)態(tài)創(chuàng)建組件視圖
• TAC：配套的后端微服務(wù)設(shè)施，靈活構(gòu)建 Tangram 業(yè)務(wù)所需的數(shù)據(jù)

地址：http://tangram.pingguohe.net/

Tangram

自動(dòng)化測試解決方案 Macaca

Macaca

Macaca 是一套面向用戶端軟件的測試解決方案，提供了自動(dòng)化驅(qū)動(dòng)，環(huán)境配套，周邊工具，集成方案，旨在解決終端上的測試、自動(dòng)化、性能等方面的問題。

其有如下特點(diǎn)：

• 跨平臺(tái)：支持在移動(dòng)端和PC端的Native, Hybrid, 移動(dòng)端Web應(yīng)用
• 支持真機(jī)：支持真機(jī)和模擬器，以及大量樣板示例
• 更加容易：支持多種語言棧編寫腳本，提供調(diào)試，元素查看器，數(shù)據(jù)Mock，錄制回放等周邊
• 提供CI方案：提供持續(xù)集成方案及持續(xù)集成平臺(tái)的私有部署方案

地址：https://github.com/alibaba/macaca

Macaca

基于 React 的中后臺(tái)應(yīng)用解決方案 飛冰 ICE

Ice

飛冰(ICE) 是一套基于 React 的中后臺(tái)應(yīng)用解決方案，ICE 包含了一條從設(shè)計(jì)端到開發(fā)端的完整鏈路，幫助用戶快速搭建屬于自己的中后臺(tái)應(yīng)用。

面向設(shè)計(jì)者端，ICE 提供了 ICE Design 設(shè)計(jì)語言，來給 UI 界面提供專業(yè)的視覺指導(dǎo)。面向開發(fā)者端，ICE 提供了 Iceworks 工具，這是一個(gè)圖形化界面的開發(fā)平臺(tái)，它承載了 ICE 的物料體系和開發(fā)體驗(yàn)。

地址：https://alibaba.github.io/ice/

Ice

HTML5 互動(dòng)游戲引擎 Hilo

Hilo

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

主要特性

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

地址：https://github.com/hiloteam/Hilo

Hilo

JavaScript 模板引擎 Velocity.js

Velocity.js 是 velocity 模板語法的 JS 版本實(shí)現(xiàn)。Velocity 是基于Java 的模板引擎，廣泛應(yīng)用在阿里體系的各個(gè)子公司項(xiàng)目。Velocity 模板適用于存在大量模板使用的場景，支持各種復(fù)雜的邏輯運(yùn)算，包含 基本數(shù)據(jù)類型、變量賦值和函數(shù)等功能。Velocity.js 支持 Node.js 和 瀏覽器環(huán)境。

地址：https://github.com/shepherdwind/velocity.js

Velocity

非侵入式運(yùn)行期 AOP 框架 Dexposed

Dexposed 是一個(gè)功能強(qiáng)大但非侵入性的運(yùn)行時(shí) AOP（面向方面編程）框架，用于 Android 應(yīng)用程序開發(fā)，基于ROOT 社區(qū)著名開源的 Xposed 框架項(xiàng)目的工作。其改造剝離了 ROOT 部分，演化為服務(wù)于所在應(yīng)用自身的 AOP 框架。它支撐了阿里大部分 App 的在線客戶端 BugFix 和線上調(diào)試的能力。

地址：https://github.com/alibaba/dexposed

Dexposed

自動(dòng)化測試解決方案 UI Recorder

UI Recorder

UI Recorder 是一款零成本的整體自動(dòng)化測試解決方案，一次自測等于多次測試，測一個(gè)瀏覽器等于測多個(gè)瀏覽器！

地址：https://github.com/alibaba/uirecorder

UI Recorder

Android 應(yīng)用熱修復(fù)工具 AndFix

AndFix 是阿里巴巴開源的一個(gè)為 Android 應(yīng)用提供熱修復(fù)工具，幫助 Anroid 開發(fā)者能夠及時(shí)修復(fù)應(yīng)用的線上問題。Andfix 是 "Android hot-fix" 的縮寫。

地址：https://github.com/alibaba/AndFix

AndFix

基于 Node.js 的自動(dòng)化持續(xù)集成 Reliable

Reliable

Reliable 是分布式架構(gòu)的持續(xù)集成系統(tǒng)，由Macaca 團(tuán)隊(duì)的成員開發(fā)。適用于集成構(gòu)建、集成構(gòu)建等場景。她是典型的主從結(jié)構(gòu)，分為reliable-master 與 reliable-slave 兩部分。

地址：https://github.com/macacajs/reliable

Reliable

模擬數(shù)據(jù)生成器 Mock.js

Mock

Mock.js 是阿里巴巴開源的一款模擬數(shù)據(jù)生成器，旨在幫助前端工程師獨(dú)立于后端進(jìn)行開發(fā)，幫助編寫單元測試。提供了以下模擬功能：

• 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
• 模擬 Ajax 請求，生成并返回模擬數(shù)據(jù)
• 基于 HTML 模板生成模擬數(shù)據(jù)。

地址：https://github.com/nuysoft/Mock

React 應(yīng)用的服務(wù)器渲染框架 Beidou

Beidou(北斗) 是阿里巴巴開源的一個(gè) NodeJS & React 同構(gòu)框架，基于Egg.js開發(fā)。

功能/特性

• ? 高性能, 相比客戶端渲染 2-5 倍性能提升
• ? 搜索引擎友好(SEO)
• ? 支持 ES6/ES7/ES8 JavaScript 語法
• ? 支持 TypeScript
• ? 支持 SCSS/Sass
• ? 支持自動(dòng)路由
• ? 提供擴(kuò)展默認(rèn) webpack 配置的接口
• ? 可自定義視圖渲染中間件
• ? 易使用的 CLI 工具
• ? 可拔插的同構(gòu)能力

地址：https://github.com/alibaba/beidou

 

***

以上就是為你介紹的阿里巴巴開源的 25 個(gè)項(xiàng)目，希望能夠幫到你，如果你有什么好的項(xiàng)目推薦，可以在下方評(píng)論留言喲，期待你的每一次評(píng)論~

新聞標(biāo)題：細(xì)數(shù)阿里25個(gè)開源的前端項(xiàng)目
文章來源：http://www.dlmjj.cn/article/cdgggdc.html