內容簡介:AntVG2 是一套基於可視化編碼的圖形語法,以數據驅動,具有高度的易用性和擴展性,用戶無需關注各種繁瑣的實現細節,一條語句即可構建出各種各樣的可交互的統計圖表。
數據驅動的高交互可視化圖形語法 AntV - G2
AntV
G2 是一套基於可視化編碼的圖形語法,以數據驅動,具有高度的易用性和擴展性,用戶無需關注各種繁瑣的實現細節,一條語句即可構建出各種各樣的可交互的統計圖表。
同時,G2 也是 AntV 最重要的組成,始於 《The Grammar of Graphics》 一書描述的視覺編碼語法系統(這也是 G2 項目命名的由來)。
項目地址:https://github.com/antvis/g2
AntV
企業級中後臺 UI 解決方案 Fusion Design
Fusion Design
Fusion Design 是一套企業級中後臺UI的解決方案,致力於解決設計師與前端在工作協同、產品體驗一致性、開發效率方面的問題。
你可以通過一站式協作平臺靈活地定製自己的 DesignSystem,生成設計物料與代碼分片到設計師的 工具 端 FusionCool 及開發者的工具端 Iceworks,同時保證代碼和視覺稿之間的一致性。
@alifd/next配合 Fusion Design 解決在頁面開發時設計師和前端協同的問題。通過這套體系設計師可以自由的定製組件的 UI 併產出一個 npm 主題包,前端可以直接使用這個主題包不需要關注組件的還原度問題。省去了和設計師反覆的去做還原度 Review 的工作量,大幅度的提高了開發效率。
項目地址:https://fusion.design/
Fusion Design
設計語言 & 前端框架 Ant Design
Ant Design
Ant Design 是螞蟻金服開發和正在使用的一套企業級的前端設計語言和基於 React 的前端框架實現。它的特性:企業級金融產品的交互語言和視覺體系;豐富實用的 React UI 組件;基於 React 的組件化開發模式;背靠 npm 生態圈;基於 webpack 的調試構建方案,支持 ES6。
- 提煉自企業級中後臺產品的交互語言和視覺風格。
- 開箱即用的高質量 React 組件。
- 使用 TypeScript 構建,提供完整的類型定義文件。
- 全鏈路開發和設計工具體系。
地址:https://github.com/ant-design/ant-design
Ant Design
基於 G2 封裝的 React 圖表庫 BizCharts
BizCharts
BizCharts 是一個基於 G2 封裝的 React 圖表庫,具有 G2、React 的全部優點,可以讓用戶以組件的形式組合出無數種圖表;並且集成了大量的統計工具,支持多種座標系繪製,交互定製,動畫定製以及圖形定製等等。相信 BizCharts 定能成爲您的數據可視化項目的強力助手。
地址:https://github.com/alibaba/BizCharts
BizCharts
企業級 Node.js 框架 Egg
EggJS
阿里開源的企業級 Node.js 框架。Egg.js 的插件機制有很高的可擴展性,一個插件只做一件事。Egg.js 通過框架聚合這些插件,並根據自己的業務場景定製配置,這樣應用的開發成本就變得很低。
Egg 奉行『約定優於配置』,按照一套統一的約定進行應用開發,團隊內部採用這種方式可以減少開發人員的學習成本,開發人員不再是『釘子』,可以流動起來。沒有約定的團隊,溝通成本是非常高的,比如有人會按目錄分棧而其他人按目錄分功能,開發者認知不一致很容易犯錯。但約定不等於擴展性差,相反 Egg 有很高的擴展性,可以按照團隊的約定定製框架。使用 Loader 可以讓框架根據不同環境定義默認配置,還可以覆蓋 Egg 的默認約定。
地址:https://github.com/eggjs/egg
EggJS
基於 React 的前端框架 umi
UmiJS
umi,中文可發音爲烏米,是一個可插拔的企業級 react 應用框架。umi 以路由爲基礎的,支持類 next.js 的約定式路由,以及各種進階的路由功能,並以此進行功能擴展,比如支持路由級的按需加載。然後配以完善的插件體系,覆蓋從源碼到構建產物的每個生命週期,支持各種功能擴展和業務需求,目前內外部加起來已有 50+ 的插件。
umi 是螞蟻金服的底層前端框架,已直接或間接地服務了 600+ 應用,包括 java 、node、H5 無線、離線(Hybrid)應用、純前端 assets 應用、CMS 應用等。他已經很好地服務了我們的內部用戶,同時希望他也能服務好外部用戶。
地址:https://github.com/umijs/umi
前端構建和工程化工具 Dawn
Dawn
Dawn 取「黎明、破曉」之意,原爲「阿里雲·業務運營團隊」內部的前端構建和工程化工具,現已完全開源。它通過 pipeline 和 middleware 將開發過程抽象爲相對固定的階段和有限的操作,簡化並統一了開發人員的日常構建與開發相關的工作。
特點
- 採用中間件技術,封裝常用功能,易於擴展,方便重用
- 支持 pipeline 讓多個 task 協同完成構建任務
- 簡單、一致的命令行接口,易於開發人員使用
- 支持基於「中心服務」管理中間件和工程模板
- 支持搭建私有中心服務,並統一下發構建規則,易於團隊統一管理
地址:https://alibaba.github.io/dawn/
Dawn
頁面邏輯原型 Ant UX
Ant UX
Ant UX 是一套製作頁面邏輯的素材庫,當你在產品設計初期,可以用它來繪製頁面與頁面之間的邏輯圖,幫助你瞭解產品架構,業務流程
配合工具: OmniGraffle ,Sketch
- OmniGraffle 可以用來繪製圖表,流程圖,組織結構圖以及插圖,也可以用來組織頭腦中思考的信息,組織頭腦風暴的結果,繪製心智圖,作爲樣式管理器,或設計網頁或PDF文檔的原型。它具有采用拖放的所見即所得界面。所謂的 "Stencils" 一組用於拖放的形狀—可以作爲 OmniGraffle 的插件使用,用戶也可以創建自定義的 Stencils。
- Sketch 是一個矢量設計軟件,可以幫助你快速投入UI設計當中
地址:http://ux.ant.design/
Ant UX
跨容器的渲染引擎 Rax
Rax
Rax 是一個全新的思路。它是一個 通用的跨容器的渲染引擎 , 如果你使用過 React , 那麼你就已經知道了該如何使用 Rax , 因爲它們的 API 是完全兼容的。
Rax 的誕生,主要還是爲阿里巴巴廣泛的業務來服務的。現在,我們讓它走向開源,服務更多的開發者。
還記得 React Native 的口號:
Learn once, write anywhere.
但對於我們來說,或許這還不夠。真正的釋放我們的勞動力,纔是 Rax 要做的事情。 Rax 旨在
Write once, run everywhere.
我們只要開發一次,便不用再擔心各個平臺的兼容。
地址:https://alibaba.github.io/rax/
Rax
基於 WebGL 的 Javascript 3D 繪圖引擎 G3D
G3D
G3D 是一款基於 WebGL 的 javascript 3D 繪圖引擎。與其他的 WebGL 3D 引擎相比,G3D 是更加「純粹」的渲染引擎,也就是說,它完全不依賴任何 DOM API,而是僅僅依賴一個 canvas 對象(或者類 canvas 對象)。該特性使得 G3D 不僅能夠運行在瀏覽器環境中,也能夠運行在一些非瀏覽器的 js 終端環境下(hybrid 環境),比如 GCanvas 環境(基於 Weex 或 ReactNative)。
地址:https://alibaba.github.io/G3D/
G3D
跨平臺移動開發工具 Weex
Weex
Weex 致力於使開發者能基於當代先進的 Web 開發技術,使用同一套代碼來構建 Android 、 iOS 和 Web 應用。具體來講,在集成了 WeexSDK 之後,你可以使用 JavaScript 和現代流行的前端框架來開發移動應用。
Weex 的結構是解耦的,渲染引擎與語法層是分開的,也不依賴任何特定的前端框架,目前主要支持 Vue.js 和 Rax 這兩個前端框架。
Weex 的另一個主要目標是跟進當代先進的 Web 開發和原生開發的技術,使生產力和性能共存。在開發 Weex 頁面就像開發普通網頁一樣;在渲染 Weex 頁面時和渲染原生頁面一樣。
地址:https://github.com/apache/incubator-weex/
weex
基於 Weex 的 UI 組件庫 Weex UI
Weex UI
Weex UI 是一個基於 Weex 的富交互、輕量級、高性能的 UI 組件庫
地址:https://github.com/alibaba/weex-ui
Weex UI
動效語言& React 框架動效解決方案 Ant Motion
Ant Motion
Ant Motion 是從螞蟻金服的 Ant Design 中提煉出來的動效語言。它不僅僅是動效語言,同時也是一套 React 框架動效解決方案,提供了單項,組合動畫,以及整套解決方案,幫助開發者更容易的在項目中使用動效。
- 增加體驗舒適度: 讓用戶認知過程更爲自然。
- 增加界面活力: 第一時間吸引注意力,突出重點。
- 描述層級關係: 體現元素之間的層級與空間關係。
- 提供反饋、明確意向: 助力交互體驗。
地址:https://motion.ant.design/index-cn
Ant Motion
多頁面切換場景統一解決方案 UltraViewPager
UltraViewPager 是阿里開源的一個封裝多種特性的 ViewPager ,主要是爲多頁面切換場景提供統一解決方案。
UltraViewPager繼承自RelativeLayout,將ViewPager和indicator置於其中,同時UltraViewPager提供了一些ViewPager常用方法的代理,這樣在日常使用上保持和ViewPager無差異,如果需要調用ViewPager的所有方法,可通過getViewPager()方法拿到真正的ViewPager進行操作。
豎向滑動是通過在ViewPager的onInterceptTouchEvent和onTouchEvent中交換橫豎向的event location,同時設置特殊PageTransformer實現,詳見源碼。
地址:https://github.com/alibaba/UltraViewPager
模塊化 UI 界面方案 Tangram UI
Tangram UI
Tangram,七巧板,幾塊簡單的積木就能拼出大千世界。我們用Tangram來命名這套界面方案,也是希望他能像七巧板一樣可以通過幾塊積木就搭出豐富多彩的界面。
特性:
- 跨平臺支持: 已有Android&iOS支持,一份數據,多端渲染一致
- 面向業務: 流式佈局,瀑布流佈局,吸頂,浮標,輪播,內置佈局可適應大多數場景,開放的API,易於拓展自己的佈局和解析器
- 高性能: 高效的回收複用算法,可定製化的複用粒,適應複雜佈局的場景,爲絲滑般順暢提供基礎
- 動態組件: 通過 VirtualView,支持自定義 XML 動態創建組件視圖
- TAC: 配套的後端微服務設施,靈活構建 Tangram 業務所需的數據
地址:http://tangram.pingguohe.net/
Tangram
自動化測試解決方案 Macaca
Macaca
Macaca 是一套面向用戶端軟件的測試解決方案,提供了自動化驅動,環境配套,周邊工具,集成方案,旨在解決終端上的測試、自動化、性能等方面的問題。
其有如下特點:
- 跨平臺: 支持在移動端和PC端的Native, Hybrid, 移動端Web應用
- 支持真機: 支持真機和模擬器,以及大量樣板示例
- 更加容易: 支持多種語言棧編寫腳本,提供調試,元素查看器,數據Mock,錄製回放等周邊
- 提供CI方案: 提供持續集成方案及持續集成平臺的私有部署方案
地址:https://github.com/alibaba/macaca
Macaca
基於 React 的中後臺應用解決方案 飛冰 ICE
Ice
飛冰(ICE) 是一套基於 React 的中後臺應用解決方案,ICE 包含了一條從設計端到開發端的完整鏈路,幫助用戶快速搭建屬於自己的中後臺應用。
面向設計者端,ICE 提供了 ICE Design 設計語言,來給 UI 界面提供專業的視覺指導。面向開發者端,ICE 提供了 Iceworks 工具,這是一個圖形化界面的開發平臺,它承載了 ICE 的物料體系和開發體驗。
地址:https://alibaba.github.io/ice/
Ice
HTML5 互動遊戲引擎 Hilo
Hilo
Hilo 是阿里巴巴集團開發的一款 HTML5 跨終端遊戲解決方案,ta可以幫助開發者快速創建 HTML 5遊戲。
主要特性
- Hilo 支持多種模塊範式的包裝版本,包括AMD,CMD,COMMONJS,Standalone多種方式接入。另外,你可以根據需要新增和擴展模塊和類型;
- 極精簡的模塊設計,完全面向對象;
- 多種渲染方式, 提供DOM,Canvas,Flash,WebGL等多種渲染方案(目前已經申請專利);
- 全端瀏覽器的支持和高性能方案,獨有的Flash渲染方案,即使在低版本IE瀏覽器下也可以跑起來“酷炫”遊戲; DOM渲染方案能顯著解決低性能手機瀏覽器遇到的性能問題;
- 物理引擎支持——Chipmunk,支持自擴展物理實現;骨骼動畫支持——DragonBones,同時內建骨骼動畫系統——Tahiti(目前內部使用);
- 案例豐富,框架成熟,已經經歷多屆阿里巴巴雙十一,年中大促互動營銷活動考驗;
地址:https://github.com/hiloteam/Hilo
Hilo
JavaScript 模板引擎 Velocity.js
Velocity.js 是 velocity 模板語法的 JS 版本實現。Velocity 是基於Java 的模板引擎,廣泛應用在阿里體系的各個子公司項目。Velocity 模板適用於存在大量模板使用的場景,支持各種複雜的邏輯運算,包含 基本數據類型、變量賦值和函數等功能。Velocity.js 支持 Node.js 和 瀏覽器環境。
地址:https://github.com/shepherdwind/velocity.js
Velocity
非侵入式運行期 AOP 框架 Dexposed
Dexposed 是一個功能強大但非侵入性的運行時 AOP(面向方面編程)框架,用於 Android 應用程序開發,基於ROOT 社區著名開源的 Xposed 框架項目的工作。其改造剝離了 ROOT 部分,演化爲服務於所在應用自身的 AOP 框架。它支撐了阿里大部分 App 的在線客戶端 BugFix 和線上調試的能力。
地址:https://github.com/alibaba/dexposed
Dexposed
自動化測試解決方案 UI Recorder
UI Recorder
UI Recorder 是一款零成本的整體自動化測試解決方案,一次自測等於多次測試,測一個瀏覽器等於測多個瀏覽器!
地址:https://github.com/alibaba/uirecorder
UI Recorder
Android 應用熱修復工具 AndFix
AndFix 是阿里巴巴開源的一個爲 Android 應用提供熱修復工具,幫助 Anroid 開發者能夠及時修復應用的線上問題。Andfix 是 "Android hot-fix" 的縮寫。
地址:https://github.com/alibaba/AndFix
AndFix
基於 Node.js 的自動化持續集成 Reliable
Reliable
Reliable 是分佈式架構的持續集成系統,由Macaca 團隊的成員開發。適用於集成構建、集成構建等場景。她是典型的主從結構,分爲reliable-master 與 reliable-slave 兩部分。
地址:https://github.com/macacajs/reliable
Reliable
模擬數據生成器 Mock.js
Mock
Mock.js 是阿里巴巴開源的一款模擬數據生成器,旨在幫助前端工程師獨立於後端進行開發,幫助編寫單元測試。提供了以下模擬功能:
- 根據數據模板生成模擬數據
- 模擬 Ajax 請求,生成並返回模擬數據
- 基於 HTML 模板生成模擬數據。
地址:https://github.com/nuysoft/Mock
React 應用的 服務器 渲染框架 Beidou
Beidou(北斗) 是阿里巴巴開源的一個 NodeJS & React 同構框架,基於Egg.js開發。
功能/特性
- ✔︎ 高性能, 相比客戶端渲染 2-5 倍性能提升
- ✔︎ 搜索引擎友好(SEO)
- ✔︎ 支持 ES6/ES7/ES8 JavaScript 語法
- ✔︎ 支持 TypeScript
- ✔︎ 支持 SCSS/Sass
- ✔︎ 支持自動路由
- ✔︎ 提供擴展默認 webpack 配置的接口
- ✔︎ 可自定義視圖渲染中間件
- ✔︎ 易使用的 CLI 工具
- ✔︎ 可拔插的同構能力
地址:https://github.com/alibaba/beidou
最後
以上就是爲你介紹的阿里巴巴開源的 25 個項目,希望能夠幫到你,如果你有什麼好的項目推薦,可以在下方評論留言喲,期待你的每一次評論~
想要整理更多的碎片知識,掃碼關注下面的公衆號,讓我們在哪裏接着嘮!