AntV 架构演进-F2 篇

原创
03/05 22:52
阅读数 5.9K

本文作者: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 的新架构要怎样调整?

  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
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部