蚂蚁金服体验技术部是阿里巴巴经济体内,一支以用户体验、大前端和创新产品为核心竞争力的年轻团队。「那些年的体验技术部」开源了 Ant Design、AntV、Egg.js、Umi 等一系列项目。大量技术都在进入深水区,越来越有挑战,也越来越有趣。下面的系列文章,会描绘体验技术部正在做的和未来想做的事情,期待你的想法与心动。


image.png


每个工程师都造过轮子,每个工程师都喜欢造轮子,无论是组件、插件、cli,还是工具、框架、小后台,通过技术手段解放生产力的感觉让人特别上瘾。然而轮子千千万,评完绩效死一半,为什么写出来的工具明明自己用着很顺手,但大家就是用不起来?为什么辛辛苦苦做的技术产品,每天贡献访问最多的还是自己?如果你有同样的困惑,恭喜,你已成功进入前端工程化领域的深水区。


前端工程化现状

时间发展到 9012 年,前端项目配一配 Webpack,用一用 Less/Sass 早已不能称之为「工程化」,这充其量只是「工具化」。真正的前端工程化,涵盖 Web 开发的完整生命流程,从项目初始化、前端脚手架集成、代码研发、构建部署到运行时稳定性监控及配套的数据服务、权限管控等等,缺一不可。


蚂蚁金服 Web 研发工作台 Basement 正是前端工程化领域领先的解决方案。


前端工程痛点

前端工程化解决方案(Basement)

本地 npm run build 
环境不统一,依赖版本不同,产物不可控

云构建
环境统一,依赖统一,产物稳定可控

前端项目缺乏流程管控
commit 随意、发布任性

标准的 Web 工程研发流程
项目研发稳定可控,标准统一

通过 copy 代码初始化项目
步骤繁琐,不便维护

集成各种标准的解决方案脚手架
一键即可完成项目创建、Git 仓库初始化、权限分配等等繁琐工作

缺少依赖管理

苦恼为什么两次构建什么代码都没改却跑不起来

提供构建报告
通过大数据可以直观的告诉你,是因为底层的某个依赖库升级导致

缺少运行时监控

不知道线上用户真实使用情况

集成了强大的前端监控能力
无论是 JS 异常还是图片加载失败,无论是白屏还是兼容性问题,都能帮你实时监控预警


现在每周都有 2500+ 工程师在使用 Basement。


由此可见,前端工程化发展已经从小作坊式的写插件、写 cli,逐渐转型为通过规范的流程、易用的产品、稳定的基座组成的标准解决方案。


深水区的挑战

前端领域发展二十余年,前端工程化进程也不过数年,虽然 Basement 已经成为领先的前端工程化解决方案,但仍有大量的挑战等待我们解决。以下试举几例:


Cloud IDE

传统的本地研发模式存在诸多限制生产力的问题,例如:


传统研发模式.png


相信对于很多开发同学而言,都遇到过上述情况,也是基于此,我们希望打破传统研发模式的种种束缚,通过 Cloud  IDE 将研发云化。


云端研发模式.png


研发环境从本地到云端,上面列举的那些问题就全部变为了优势:



目前 Cloud IDE 项目已经如火如荼的进行了小半年,从 0-1 完成了一个包含资源管理器、搜索、SCM、调试、终端、插件等功能在内的 IDE,并且真实在上面完成了多个试点前端项目的开发。然而,这还未抵达这个领域真正的深水区,再往后走,诸如高可用可编排极速唤起的容器、兼容多种技术栈的调试工具、100% 兼容 VS Code 的插件机制、多人协同开发、甚至是基于 AI 的智能代码生成等等,无一不充满挑战。


Cloud IDE.png



ChatOps


image.png

ChatOps 示意图 (来源:chatbotslife.com)


虽然有统一的前端工程化产品,大家在实际业务中少不了还要在各种平台跳来跳去。DNS 管理用 A 平台、服务器管理用 B 平台、代码管理用 C 平台、构建部署用 D 平台、数据库操作用 E 平台……一个简单的迭代需求,最大的阻碍成了记忆各种平台的名字和功能。


如果工作群里能有这样一个机器人:


机器人不再是一个「消息通知」的渠道,他就是你的开发助理,帮你尽可能减少平台切换带来的烦恼和抓狂,更好的沉浸在你的代码中。



构建部署提效


没有做过 Webpack 调优的前端工程师不足以谈人生,但无论你是用了 DLLPlugin 还是 Tree Shaking,最多只是提升了自己项目的构建速度。如果能够把这些优化经验统一沉淀,帮助蚂蚁成千上万的前端项目进行构建优化,带来的价值提升将会成倍放大。


除了纯前端层面的优化手段,我们还有专业的数据能力加持。通过多维度、长周期的数据对比,可以发现哪些项目在优化后构建速度又在缓缓变慢;哪些项目因为某个依赖变更导致构建产物体积成倍增加。


image.png

通过数据化手段直观反馈构建优化效果(图为 Basement 构建报告产品截图)


如果帮每个项目节省 5 分钟构建时间,Basement 每天触发 5000 次构建,按每位工程师月薪 25,000 元(25000 / 22 / 8 / 60 = 2.36 元/分钟) 计算,你每年可以帮集团节省至少 5 * 5000 * 22 * 12 * 2.36 = 15,576,000 元!



智能前端监控


前端监控已经不是一个新鲜的话题,但怎么真正帮助前端开发者发现、定位线上问题,通过数据辅助前端判断问题的严重性和影响范围,通过智能化的手段提前预警、把错误解决在故障发生之前等等,还有很长的路要走。


image.png

Basement 提供的实时前端监控预警能力



前端工程解决方案标准化

业务发展到一定阶段,总是会遇到一些场景需要对业务内容做发布、部署等功能(换句话说业务自己成了平台),但自己实现一遍既费时费力又难以维护。那么一个合格的前端工程化解决方案,作为中台角色提供统一的前端工程解决方案就成了头等大事。


如何定义一个标准化的前端工程解决方案?怎样通过配置描述就能定义出一个可以直接部署到生产环境的 pipeline?如何抽象通用的能力(如云构建)?如何支持个性化的需求?


目前 Basement 已经支持 PC、H5、静态站点、Node.js、Docker 等多种应用的部署,如果能够定义出标准化的解决方案,那更多的脚手架、更多的业务、更多的平台就能享受到前端工程化的红利。



还有更多

前端本身就是一个高速发展的领域,那么为之配套服务的工程化必然也是高速前进。最近火热的 Serverless、小程序等技术,你都可以在 Basement 中接触到一手的项目信息。



我们是谁

我们是蚂蚁金服体验技术部前端工程团队。


没错,你们熟悉的「强如死月」正是你未来的同事。除了「黄龙黄秋生」和「黄龙小栗旬」,我们还有放眼集团都为数不多的懂技术的美女 PD 在线给你提需求。


IMG_1011.JPG


此外,我们可能是西湖区最懂数据的前端团队之一(团队同学有多年数据产品开发经验,从采集、数据处理、加工、消费、分析、报警,完整的数据产品流程我们都能玩转),如果你对大数据感兴趣,这里也会是你理想的选择。



需要怎样的你

本文的描述的深水区挑战能让你觉得激动,那你就是我们要找的人。如果你恰好是前端工程师或者 Node.js 工程师,亦或是对数据产品开发非常熟悉,那就更完美了!


招聘硬性要求在优秀的人才面前都变得可以妥协,只要你有想法,我们随时等你!

特别欢迎能引领我们方向、成为我们 Leader 的人才,期待优秀的你!


职位意向请联系:


image.png


蚂蚁金服体验技术部刚刚走过十年,未来将更加精彩。一个人的梦想值得尊敬,一群人的梦想值得投入。无论你是工程师或设计师,还是产品或运营,也无论阿里内外,期待有你,与梦同行~


image.png


更多了解我们: