我与花呗与前端技术

作者：花呗前端 Jothy

掰起手指头一数，这已经是在家办公的第六周了。

回想起我的 2020 年，是在 B 站晚会上，听着五月天的「干杯 」开始的——原以为会开个好头呢。

窗外雨声吧嗒，我的心绪也跟着躁动起来，不如就藉此和大家唠唠我与花呗还有团队的前端技术吧，也算个总结感想之类的杂谈。

2019 年年初，我从广州 UC 转岗到了杭州蚂蚁，所在部门是消费信贷事业部（简称微贷），但我一般都和人说，我的团队是花呗借呗前端。

初春时节，对杭州的第一印象，是美得不像话，像画。要知道，我可是见惯了繁花盛景的华农人，却仍会为杭州随处的花团锦簇赞叹不已。

初来乍到，对花呗的第一印象，是大家晨会上同步的工作内容都好充实啊，人均至少两件事——内心 OS: 真的有那么多事情做吗？

的确，对于没用过花呗，或者说只在消费的时候用花呗的人来说，花呗就只是一款消费工具。

坦白说，我也是来了花呗之后，才知道花呗还有个统一阵地，在支付宝首页的顶部应用、或者「我的」页面进入的「花呗频道」，而频道内部，有我们最关心的花呗额度、待还账单，修改花呗还款日的操作当然也在这里。除此之外，还有花呗不定期举办的营(hao)销(yang)类(mao)活动，超值权益（如曾经的便利店周卡、现在的明星还款语音包），轻会员等等。

为什么选择花呗

在广州上了四年大学，喝了四年早茶，土生土长的广东人，为什么要「北上」来到这个风土人情完全不同的地方呢？

废话当然是为了看雪啊！（开玩笑

言归正传。首先当然是因为花呗业务好，这点毋庸置疑。贴一张花呗去年前三季度的净利润，可以看出，花呗业务仍呈向上势头。并且，这还没算上双十一、双十二两大购物节的数据！过去一年，我们也可以看见，许多友商都在做花呗的同类产品，说明整个大的市场潜力还很大，但花呗作为行业龙头的位置仍难以撼动。毕竟消费 & 电商，阿里最在行。

虽说有技术不怕找不到好工作，但 2019 年的互联网寒冬、2020 年疫情开局，都摆明了告诉我们，选对好业务，收入才有保障，进而安心钻研技术。

其次，是因为团队优秀的语雀知识库，是我坚定想来这边的第二个原因。微贷的知识库，是我彼时见过最完善、最有条理、最有内容的。来花呗之前，我还仔细翻阅过多篇文档，发现都是言之有物，不是为了记录而记录的。来了之后才发现，在老板的鼓励和引导下，这边的同学几乎都养成了记录、总结的好习惯——而这，对于一个技术人的成长有着至关重要的作用。毕竟随着毕业时间越来越久，你保持持续学习的热情可能越来越低。

再者，是想见识蚂蚁的基建。崇尚开源的蚂蚁，推出了赫赫有名的 Ant Design (Mobile), AntV, Umi, 无不令人向往。听闻蚂蚁内部更是有着强大的基建。比起使用它们，更想身临其境地了解它们背后的设计思想、设计理念，甚至是亲身参与其中。

除了以上这些大的原因，还有一些比较个人的原因啦。

比如说蚂蚁作为一家互联网金融公司给人的吸引力，多学点金融知识总是好事。

我还这么年轻，没成家未立业，多出去走走见识见识总是好事。

离阿里总部更近了，总感觉会有些不一样的际遇，多认识这边的优秀同学总是好事。

以及想知道开发一款自己日常在用的产品是什么体验～

等等等等..

花呗借呗前端技术

聊了这么多我个人的想法，接着说点干货。跟大家分享下花呗借呗的前端团队，都用些什么技术？

首先讲下花呗频道的架构。与许多前端团队的发展史一样，花呗最初也是普通的依赖客户端的在线 Web 页面，后面经过不断的升级演进，形成了一套稳定的架构：全面拥抱 React, 引入 Node 作为中间层（BFF, Backend for Frontend），通过离线包优化加载性能，UI 上使用团队自研（& 维护）的 Ant Design Mobile, 还引入了支付宝小程序，使得客户端形态更加多样化。

这个架构有什么好处呢？以 BFF 架构为例。

BFF 架构使得前端可以服务自洽，进而带来了高效和灵活：

• 简化客户端逻辑，减少⽹络开销
• 避免⽆意义的数据透传
• 针对敏感信息进行过滤
• 多协议发布

而在研发流程中，前端和 BFF 会由同⼀⼈完成，这也有利于工程师的成长：

• 使工程师具备服务端技能，拓展了知识⾯
• 联通上下游，沟通和协调能⼒得到提升
• 项目结构清晰带来了更合理的分⼯
• 业务⽀持更多，解决问题效率提升

除了花呗架构涉及的 H5、Node.js、小程序，团队在其他多个领域也有涉猎。

Web 3D

提起我们团队的 Web 3D, 那可了不得，容我叉会儿腰先。

我们团队一开始是为了提升互动类产品的趣味性和商业转化数据，开始储备 Web 3D 图形技术的开发能力。

我们做了一系列的技术调研，但社区方案要么不是「移动优先（Mobile First）」考虑，要么编辑器功能很弱，并不满足实际开发的需求；而基于的 Native 的方案上手成本太高，导出产物又太大（几百 M），并不适合 Web 环境。

后来，我们决定深耕 3D 图形技术，打造出了面向蚂蚁金服前端工程师、且适应蚂蚁未来业务发展的 3D 技术产品：Oasis 3D. 它使用微内核架构，支持组件式扩展、glTF 2.0 及配套 PBR 材质、以及丰富多样的动画系统（骨骼动画、粒子动画、Shader 动画及帧动画）。

此外，我们还结合美术流程和蚂蚁金服的前端研发环境，探索出一条高效低成本的在线工作流——Oasis 3D 工作流，它不仅满足了互动营销业务场景的需求，而且为工业产品展示、数据可视化等业务场景提供可靠的渲染能力。

Oasis 3D 还登上了 D2 的互动展台，以及作为 SEE Conf 主题宣讲，具体可以戳「蚂蚁金服 Web 3D 技术探索之路 - SEE Conf」了解。

浏览器实时构建

如果你参加过第十四届 D2, 那么对于这个技术你一定不陌生，因为讲师就是来自我们团队的玄寂小哥哥！

玄寂在我们团队负责一个重要项目的研发，这个项目的内部代号是 Gravity, 它是一套完全基于浏览器技术实现的预览和调试解决方案。

Gravity 通过合理的运行时代码编译模式，完整的基于浏览器的文件系统，轻巧的包管理模式，让一整个前端的研发模式被完整的移植到了浏览器内。正因为完全基于浏览器技术，所以 Gravity 非常轻量化，对服务端 0 要求，对用户 0 配置，任何可视化编辑器，和 Cloud IDE 都可以基于 Gravity 的插件能力快速集成。

玄寂相信 Cloud IDE 一定是未来，而面向 Web 的架构一定是当务之急。感兴趣可以戳「基于浏览器的实时构建探索之路」了解更多。

（题外话：为 Cloud IDE 打个 call! 最近疫情在家办公，深感 Cloud IDE 的好用！各种环境无需自己搭建，NPM 包让内存不再吃紧，随时随地打开项目即可开发）

新技术引入

有人觉得业务体量与技术更迭是不可调和的，但花呗不这么看。前端技术不断更新迭代，花呗当然也选择与时俱进，这一点随处可以体现。

2019 年 Serverless 发展如火如荼，花呗也在双十一率先落地了 SFF(Serverless for Frontend) 的首个应用，并成功扛住了猫晚的巨大流量。

React Hooks 是不少人的心头好，但大型项目不经过仔细调研，不会轻易用上。这对于喜欢尝试新技术的程序员来说，真是手痒！花呗有不少工程师也对 React Hooks 喜爱有加，内部有过多次调研与分享，并在实际项目中落地。还有同学深入研究总结，让人一篇文章上手 React Hooks.

团队的各个技术方向小组，每个月都会定期分享小组最新研究的技术/方向，我有时候也会选择一些自己感兴趣的参与，拓宽自己的知识面。

All in all

来花呗的这一年，除了技术上的长进，业务能力的提升，我还「跨界」参加了集团前端委员会、D2、SEE Conf 的组织与宣传，也在打造我们团队自己的品牌，感谢我的老板让我发现了自己身上更多的可能。

也呼应一下前文的「真的有那么多事情做吗」，还真的是。所以我的另一个感受是事儿真多，也真累，但大多时候累并快乐着，因为看到了自己的成长，多吃吃苦也是好事

对了，去年底，花呗借呗前端团队有了自己的名字——RichLab, 在知乎也有个同名专栏，发布的都是优质好文。想说的有很多，但篇幅有限，感兴趣的可以私聊我～

如果你（或者你的朋友）对以上我提到的技术感兴趣，或者想在这个坏形势下找份好工作，也欢迎联系我，我的邮箱是 [email protected]

社招海报如下，欢迎转发～