我与花呗与前端技术

avatar
花呗借呗前端团队 @蚂蚁集团

022A269B-F01B-447C-8229-0F33622D7BA6-7579-000003C3C57D024C.JPG

                                                                      我与花呗双十一

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

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

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


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


初见花呗

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


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


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


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


为什么选择花呗

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

废话当然是为了看雪啊!(开玩笑。


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

IMG_0701.JPG

                                                          花呗 2019 前三季度净利润


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


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


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


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

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

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

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

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

等等等等..


花呗借呗前端技术

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


花呗架构

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


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

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

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


image.png

                                                                    BFF 架构


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

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


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



Web 3D

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

image.png


我们团队一开始是为了提升互动类产品的趣味性和商业转化数据,开始储备 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」了解。


image.png

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



浏览器实时构建

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


image.png

                                                                                玄寂 @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, 在知乎也有个同名专栏,发布的都是优质好文。想说的有很多,但篇幅有限,感兴趣的可以私聊/评论我~


如果你(或者你的朋友)对以上我提到的技术感兴趣,或者想在这个坏形势下找份好工作,也欢迎联系我,我的邮箱是 shudai.lyy@alibaba-inc.com 📮



社招海报如下,欢迎转发~