AntV 架構演進-F2 篇

簡介

F2，源於 Fast & Flexible 兩個單詞首字母，是 AntV 家族中專爲移動端定製、開箱即用的可視化解決方案。已經普遍應用於支付寶錢包、淘票票、釘釘、微信小程序等各類移動端場景，每日有幾千萬的用戶在使用。在 F2 的 3.6 版本發佈之際，讓咱們一塊兒來回顧一下 F2 的發展。本文的內容有：

• F2 的前生
• 1.0 時代 -- 誕生
• 2.0 時代 -- 發展
• 3.0 時代 -- 成熟
• 4.0 時代 -- 面向將來

F2 的前生

在阿里/螞蟻集團內部在 2015 年以前並無針對移動端的圖表，在 2014 年時螞蟻前端開發了一套移動端的框架 AnimaJs（AntD Mobile 的前身），我在參與 AnimaJs 組件開發的同時，嘗試性的開發過一套圖表 Anima-Charts，實現了常見的圖表（折柱餅）的功能。受限於當時的移動端的環境，andorid 版本對 canvas 的支持很是很差，因此這個版本只應用在少數幾個業務上，並無獲得普遍的使用。

1.0 時代 -- 誕生

時間推動到 2015 年末，支付寶錢包的業務飛速發展，一些資金展現需求開始出現。當時錢包對代碼大小要求很是嚴格，一個應用包不能超過200k，他們找到咱們提供圖表的支持的時候，社區上找不到合適的移動端圖表，咱們開始基於 G2 開發一款針對於移動端的圖表庫，當時起名爲 G2-mobile。
G2-mobile 做爲 G2 的精簡版本應運而生，本質上是圖形語法的精簡實現。這個版本開發和上線週期很是短，僅花了不到 2 個月的時間就在錢包上上線。其特點就是小，很是小的一個版本，壓縮 (非 zip)後僅有 40k (zip 後 12k)。另外一個特點（貶義）是很是難用，由於小因此不少功能缺失：座標軸刻度須要本身計算、缺乏動畫、不支持交互，僅僅支持 3 種常見圖表（折、柱、餅）。

V1.0 版本正式發佈於 2016 年 3 月，因爲沒有設計師的參與，風格很是程序員化。這個版本的架構很是簡單，本質上就是 G2 的一個精簡版本，架構同當時的 G2 1.0 一致：

能夠經過架構圖看出這個版本小的緣由，也能夠看出缺乏功能：

• 底層沒有獨立的繪圖引擎，繪圖代碼不超過 100行。
• 沒有事件機制、動畫機制。
• 也沒有統計模塊，所以不具有 G2 自由組合出各類圖表的能力。

這個版本初步知足了業務上的要求，保證了精簡的最小圖表集合，也知足了錢包上一些展現的需求。可是隨着錢包業務的發展，對圖表類型和功能的要求愈來愈高，G2-mobile 面臨新一輪的升級。

2.0 時代 -- 發展

V1.0 版本僅僅延續了 4 個月，2016 年 7 月咱們就發佈了 V2.0 版本，這個版本除了增長新的圖表類型（面積圖、k線圖）外，還支持了座標軸 ticks 的自動計算、動畫和輔助元素。爲了保持代碼的大小，全部的模塊都進行了分包，能夠按需引用。其架構有較大的調整，咱們將一些同 G2 共用的模塊提取成 G2-Core ，其架構以下：

因爲 G2 和 G2-mobile 的開發人員都是一批人，因此採用這套架構沒有什麼問題。可是因爲二者的上層實現有一些差別，致使 G2-Core 裏面有一些雜糅的代碼，帶來了一些維護的成本：

• 更新包時，兩個框架都會受到影響。
• 須要將 G2 的一些代碼模塊拆分的更細，例如數據處理模塊，要保證 G2-mobile 僅加載本身須要的方法。

這個版本在視覺設計上依然沒有改進，須要業務方本身進行設計，開發人員經過更改配置來實現，其結果依然是是知足需求。

3.0 時代 -- 成熟

2017 年有專門的設計師團隊加入 AntV，AntV 的全部產品都有了脫胎換骨的變化。這時候 PC 端的圖表要求和移動端的圖表要求的差別已經愈來愈清晰：移動端的圖表定位於對性能、大小敏感的移動端場景，主要是面向 C 端用戶的各類 APP。錢包對圖表的要求也更高，基金、理財和帳單等場景已經不知足如今 G2-Mobile 的功能和體驗，所以咱們進行了設計、架構的全面升級，由此 G2-Mobile 改名爲 F2。

F2 3.0 於 2018 年 4 月正式發佈，這個版本持續的時間很是長，發展到如今已經有 6 個版本，逐漸實現了設計改造、動畫優化、移動端交互和多平臺支持，同時基於實踐咱們提供了多個成熟的解決方案。咱們將 3.x 的特點總結以下：

設計的提高，圖表類型的豐富

動畫和交互的提高

多平臺支持

• H5 端支持全部的圖表、動畫和交互
• 支持支付寶小程序和微信小程序，一些 HTML 的組件使用存在限制
• 支持 node 端渲染，能夠在後臺生成圖表，經過圖片加載到頁面

移動端的解決方案

🆕🥰支持 Native 的版本🥰

目前索丘同窗正在進行 F2 3.6 版本的開發，將要提供 Native (ios 和 android) 的支持，目標是一次開發到處能夠運行。將於今年 3 月中旬對外發布，敬請期待！

4.0 時代 -- 面向將來

爲何要進行 F2 4.0 的開發，F2 的新架構要怎樣調整？

1. 愈來愈多的中後臺產品開始要求運行在移動端，PC 端開發一套移動端開發一套，使得不少業務方抱怨頗多。
2. 錢包對應用包的大小限制再也不那麼嚴格，大小已經不是核心因素，可是對體驗、交互和動畫的要求愈來愈高。
3. G2 也面臨各類移動端的訴求，一些交互、組件和動畫都須要針對移動端改造，可是負責的同窗並不熟悉移動端（特別是 C端）的業務。

G2 V4.0 在交互語法、組件約束佈局、狀態管理等多方面進行了優化，這些特性是將來統計圖表必備的特性，將 F2 和 G2 放到一塊兒進行設計勢在必行。

F2 的 V4.0 版本將在 G2 4.0 的基礎上按需打包出來，全部的機制共同實現，F2 選擇適合本身的渲染引擎、組件和交互，在保證大小的同時提供更好的功能和體驗，同時 G2 也具有了移動端的各類能力。

總結

F2 在過去一年面臨不少困難，咱們的業務自己移動端的場景並很少，人力資源也不足。經過協商後咱們將 F2 交接給了在移動端更加專業的財富團隊，他們已經在對小程序的支持作了更多的優化，正在開發支持 Native (ios、android）的版本，近期將要發佈。在 VR、AR 即未來臨的時代，F2 必定有更加廣闊的應用場景！

最後

很是感謝您的耐心閱讀，若是您對 F2 感興趣，能夠經過如下渠道關注咱們：

• F2 官網：f2.antv.vision/zh
• github: github.com/antvis/F2

系列文章：

• 《AntV 架構演進-G2 篇》
• 《AntV 架構演進-G6 篇》