我与花呗与前端技术

                                                                      我与花呗双十一

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

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

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

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

初见花呗

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

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

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

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

为何选择花呗

在广州上了四年大学，喝了四年早茶，土生土长的广东人，为何要「北上」来到这个风土人情彻底不一样的地方呢？

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

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

                                                          花呗 2019 前三季度净利润

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

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

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

除了以上这些大的缘由，还有一些比较我的的缘由啦。

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

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

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

以及想知道开发一款本身平常在用的产品是什么体验～

等等等等..

花呗借呗前端技术

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

花呗架构

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

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

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

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

                                                                    BFF 架构

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

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

除了花呗架构涉及的 H五、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」了解。

                                                     蚂蚁金服 Web 3D 技术探索之路

浏览器实时构建

若是你参加过第十四届 D2, 那么对于这个技术你必定不陌生，由于讲师就是来自咱们团队的玄寂小哥哥！

                                                                                玄寂 @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

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

也呼应一下前文的「真的有那么多事情作吗」，还真的是。因此个人另外一个感觉是事儿真多，也真累，但大多时候累并快乐着，由于看到了本身的成长，多吃吃苦也是好事儿。

对了，去年末，花呗借呗前端团队有了本身的名字——RichLab, 在知乎也有个同名专栏，发布的都是优质好文。想说的有不少，但篇幅有限，感兴趣的能够私聊/评论我～

若是你（或者你的朋友）对以上我提到的技术感兴趣，或者想在这个坏形势下找份好工做，也欢迎联系我，个人邮箱是 shudai.lyy@alibaba-inc.com 📮

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