本文作者：AntV 架构师-萧庆
简介
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 的新架构要怎样调整？
- 越来越多的中后台产品开始要求运行在移动端，PC 端开发一套移动端开发一套，使得很多业务方抱怨颇多。
- 钱包对应用包的大小限制不再那么严格，大小已经不是核心因素，但是对体验、交互和动画的要求越来越高。
- G2 也面临各种移动端的诉求，一些交互、组件和动画都需要针对移动端改造，但是负责的同学并不熟悉移动端（特别是 C端）的业务。
G2 V4.0 在交互语法、组件约束布局、状态管理等多方面进行了优化，这些特性是未来统计图表必备的特性，将 F2 和 G2 放到一起进行设计势在必行。
F2 的 V4.0 版本将在 G2 4.0 的基础上按需打包出来，所有的机制共同实现，F2 选择适合自己的渲染引擎、组件和交互，在保证大小的同时提供更好的功能和体验，同时 G2 也具备了移动端的各种能力。
![]()
总结
F2 在过去一年面临很多困难，我们的业务本身移动端的场景并不多，人力资源也不足。通过协商后我们将 F2 交接给了在移动端更加专业的财富团队，他们已经在对小程序的支持做了更多的优化，正在开发支持 Native (ios、android）的版本，近期将要发布。在 VR、AR 即将来临的时代，F2 一定有更加广阔的应用场景！
最后
非常感谢您的耐心阅读，如果您对 F2 感兴趣，可以通过以下渠道关注我们：
系列文章：
