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 篇》