作者: 花呗前端 Jothy
掰起手指头一数, 这已经是在家办公的第六周了.
回想起我的 2020 年, 是在 B 站晚会上, 听着五月天的「干杯」开始的 -- 原以为会开个好头呢.
image.PNG
窗外雨声吧嗒, 我的心绪也跟着躁动起来, 不如就藉此和大家唠唠我与花呗还有团队的前端技术吧, 也算个总结感想之类的杂谈.
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 架构使得前端可以服务自洽, 进而带来了高效和灵活:
简化客户端逻辑, 减少络开销
避免意义的数据透传
针对敏感信息进行过滤
多协议发布
image.PNG
而在研发流程中, 前端和 BFF 会由同完成, 这也有利于工程师的成长:
使工程师具备服务端技能, 拓展了知识
联通上下游, 沟通和协调能得到提升
项目结构清晰带来了更合理的分
业务持更多, 解决问题效率提升
除了花呗架构涉及的 H5,Node.JS, 小程序, 团队在其他多个领域也有涉猎.
Web 3D
提起我们团队的 Web 3D, 那可了不得, 容我叉会儿腰先.
image
我们团队一开始是为了提升互动类产品的趣味性和商业转化数据, 开始储备 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
浏览器实时构建
如果你参加过第十四届 D2, 那么对于这个技术你一定不陌生, 因为讲师就是来自我们团队的玄寂小哥哥!
image.PNG
寂在我们团队负责一个重要项目的研发, 这个项目的内部代号是 Gravity, 它是一套完全基于浏览器技术实现的预览和调试解决方案.
Gravity 通过合理的运行时代码编译模式, 完整的基于浏览器的文件系统, 轻巧的包管理模式, 让一整个前端的研发模式被完整的移植到了浏览器内. 正因为完全基于浏览器技术, 所以 Gravity 非常轻量化, 对服务端 0 要求, 对用户 0 配置, 任何可视化编辑器, 和 Cloud IDE 都可以基于 Gravity 的插件能力快速集成. 如果身边没有一个能够指导你的技术大佬, 可以到 Web 前端学习裙, 里面有我整理的最新的学习路线, 学习教程以及一些学习手册和 PDF 文档, 学习过程中有什么问题可以随时在里面问, 我都会帮忙解答, 这样能够提升你的学习效率, 这是我的 qqWEB 前端裙.
-1074182891
玄寂相信 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 的组织与宣传, 也在打造我们团队自己的品牌, 感谢我的老板让我发现了自己身上更多的可能.
所以我的另一个感受是事儿真多, 也真累, 但大多时候累并快乐着, 因为看到了自己的成长, 多吃吃苦也是好事
来源: http://www.jianshu.com/p/728c3aa61ef5