2018-12-12 21:11:56 IT技術圈

前端

1.數據驅動的高交互可視化圖形語法 AntV - G2

G2 是一套基於可視化編碼的圖形語法，以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。

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

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

2.企業級中後臺 UI 解決方案 Fusion Design

Fusion Design 是一種旨在提升設計與開發之間 UI 構建效率的工作方式。通過建設基於 DPL 模式的，設計、前端之間的標準協議與工作流，來快速構建符合業務訴求的 DPL，提升 DPL 的構建效率和應用效率，幫助業務快速實現 UI 構建。

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

3.設計語言 & 前端框架 Ant Design

Ant Design 是螞蟻金服開發和正在使用的一套企業級的前端設計語言和基於 React 的前端框架實現。它的特性：企業級金融產品的交互語言和視覺體系；豐富實用的 React UI 組件；基於 React 的組件化開發模式；背靠 npm 生態圈；基於 webpack 的調試構建方案，支持 ES6。

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

4.基於 G2 封裝的 React 圖表庫 BizCharts

BizCharts 是一個基於 G2 封裝的 React 圖表庫，具有 G2、React 的全部優點，可以讓用戶以組件的形式組合出無數種圖表；並且集成了大量的統計工具，支持多種座標系繪製，交互定製，動畫定製以及圖形定製等等。相信 BizCharts 定能成為您的數據可視化項目的強力助手。

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

5.企業級 Node.js 框架 Egg

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

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

6.基於 React 的前端框架 umi

umi 是可插拔的企業級 React 框架，類似 Next.js。

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

7.前端構建和工程化工具 Dawn

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

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

8.頁面邏輯原型 Ant UX

這是一套製作頁面邏輯的素材庫，當你在產品設計初期，可以用它來繪製頁面與頁面之間的邏輯圖，幫助你瞭解產品架構，業務流程。

配合工具: OmniGraffle ,Sketch

OmniGraffle 可以用來繪製圖表，流程圖，組織結構圖以及插圖，也可以用來組織頭腦中思考的信息，組織頭腦風暴的結果，繪製心智圖，作為樣式管理器，或設計網頁或PDF文檔的原型。

Sketch 是一個矢量設計軟件，可以幫助你快速投入UI設計當中。

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

9.跨容器的渲染引擎 Rax

Rax 是阿里開源的一個通用的 JavaScript 庫，主要有 React 兼容的 API 。使用 React 的就應該已經知道如何使用 Rax。

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

10.基於 WebGL 的 Javascript 3D 繪圖引擎 G3D

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

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

11.跨平臺移動開發工具 Weex