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

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

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

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

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

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

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

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

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

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

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

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

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

基于 G2 封裝的 React 圖表庫(kù) BizCharts

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

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

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

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

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

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

基于 React 的前端框架 umi

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

umi 是螞蟻金服的底層前端框架，已直接或間接地服務(wù)了 600+ 應(yīng)用，包括 java、node、H5 無(wú)線、離線（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 取「黎明、破曉」之意，原為「阿里云·業(yè)務(wù)運(yùn)營(yíng)團(tuán)隊(duì)」內(nèi)部的前端構(gòu)建和工程化工具，現(xiàn)已完全開(kāi)源。它通過(guò) pipeline 和 middleware 將開(kāi)發(fā)過(guò)程抽象為相對(duì)固定的階段和有限的操作，簡(jiǎn)化并統(tǒng)一了開(kāi)發(fā)人員的日常構(gòu)建與開(kāi)發(fā)相關(guān)的工作。

特點(diǎn)

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

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

頁(yè)面邏輯原型 Ant UX

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

配合工具: OmniGraffle ,Sketch

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

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

跨容器的渲染引擎 Rax

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

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

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

Learn once, write anywhere.

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

Write once, run everywhere.

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

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

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

G3D 是一款基于 WebGL 的 javascript 3D 繪圖引擎。與其他的 WebGL 3D 引擎相比，G3D 是更加「純粹」的渲染引擎，也就是說(shuō)，它完全不依賴(lài)任何 DOM API，而是僅僅依賴(lài)一個(gè) canvas 對(duì)象（或者類(lèi) 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/

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

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

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

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

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

基于 Weex 的 UI 組件庫(kù) Weex UI

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

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

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

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

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

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

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

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

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

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

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

模塊化 UI 界面方案 Tangram UI

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

特性：

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

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

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

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

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

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

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

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

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

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

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

HTML5 互動(dòng)游戲引擎 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ū)ο螅?/li>
• 多種渲染方式, 提供DOM，Canvas，F(xiàn)lash，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)；

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

JavaScript 模板引擎 Velocity.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

功能/特性

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

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