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

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

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

項目地址：https://github.com/antvis/g2

企業(yè)級中后臺 UI 解決方案 Fusion Design

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

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

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

項目地址：https://fusion.design/

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

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

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

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

基于 G2 封裝的 React 圖表庫 BizCharts

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

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

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

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

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

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

基于 React 的前端框架 umi

umi，中文可發(fā)音為烏米，是一個可插拔的企業(yè)級 react 應(yīng)用框架。umi 以路由為基礎(chǔ)的，支持類 next.js 的約定式路由，以及各種進階的路由功能，并以此進行功能擴展，比如支持路由級的按需加載。然后配以完善的插件體系，覆蓋從源碼到構(gòu)建產(chǎn)物的每個生命周期，支持各種功能擴展和業(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)部用戶，同時希望他也能服務(wù)好外部用戶。

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

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

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

特點

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

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

頁面邏輯原型 Ant UX

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

配合工具: OmniGraffle ,Sketch

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

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

跨容器的渲染引擎 Rax

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

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

還記得 React Native 的口號：

Learn once, write anywhere.

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

Write once, run everywhere.

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

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

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

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

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

跨平臺移動開發(fā)工具 Weex

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

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

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

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

基于 Weex 的 UI 組件庫 Weex UI

Weex UI 是一個基于 Weex 的富交互、輕量級、高性能的 UI 組件庫

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

動效語言& React 框架動效解決方案 Ant Motion

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

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

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

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

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

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

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

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

模塊化 UI 界面方案 Tangram UI

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

特性：

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

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

自動化測試解決方案 Macaca

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

其有如下特點：

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

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

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

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

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

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

HTML5 互動游戲引擎 Hilo

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

主要特性

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

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

JavaScript 模板引擎 Velocity.js

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

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

非侵入式運行期 AOP 框架 Dexposed

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

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

自動化測試解決方案 UI Recorder

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

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

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

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

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

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

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

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

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

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

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

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

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

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

功能/特性

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

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