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 端渲染，可以在后台生成图表，通过图片加载到页面

移动端的解决方案