Developer Experience First —— TWA 的理念与实践（附演讲视频）

这个主题在SEE Conf · 蚂蚁金服体验科技大会上进行了演讲，视频地址已上传到优酷：

演讲 PPT 已转换为 PDF 上传至 SEE Conf 语雀在线知识库，欢迎下载（请 注册语雀，个人描述内注明 #知乎seeconf# 便可快速申请邀请码，登录后即可下载）。

业务的移动化与多端化

和绝大多数互联网公司一样，蚂蚁的业务已经完全移动化。在支付宝 App 内，除支付线主业务之外，还存在大量的 H5 应用，包括蚂蚁森林、共享单车、蚂蚁财富等等。同时各个业务线除了在支付宝主 App 内，还会寻求其他的流量入口，和阿里生态打通，在淘宝、飞猪等 App 中投放支付宝的业务和活动。

在上述业务背景下，蚂蚁的 H5 App 面临一个巨大的挑战：业务飞速发展的同时，玩法复杂度、需要支持的用户终端数量也在上升，对前端资源的需求在指数级增长。

前端技术变革

随着 Node.js 的横空出世，前端领域在最近这几年发生了重大的变革。

• Node.js 给前端带来了服务端能力，让前后端的工作职责划分发生了变化，蚂蚁大量的业务线开始引入 BFF(Backend For Frontend)层 ，从此前端团队可以完整的掌控展现层（包括界面和数据接口）。
• Webpack、Babel 等工具的陆续诞生，让『前端工程化』能力迅速提升，React、Angular.js 等新一代前端框架的诞生，让复杂的前端项目的可维护性提升到一个新的台阶。

然而前端技术『大爆炸』带来一系列优点的同时，也不可避免的带来另一个问题：前端的边界扩大了，选择变多了，对前端开发的要求也越来越高了。

研发模式演进

随着前端业务和技术的发展，为了提高蚂蚁前端的生产力，更快速的帮助业务发展，提升用户体验，我们一直走在优化研发体验的路上，最近这几年，蚂蚁的应用研发模型也一直在发生变化。

在传统的 Web 开发分层中，前端工程师负责前端界面层的研发，包括 JS / CSS 代码和一些运行在服务端的模板代码（HTML），这些代码由于维护团队、发布周期等种种原因，分散在不同的代码仓库。在这个研发模式下，前端团队并不能完整的掌控展现层，模板层代码需要跟随服务端一起，数据接口也需要由服务端工程师提供，这些都可能阻碍用户体验的极致优化。

随着 Node.js 的成熟，为了让前后端的分层更加清晰，我们在传统的 Web 研发分层中加入一个 Backend for Frontend(BFF) 层，它负责聚合底层业务数据，给客户端提供接口。秉承谁使用谁维护的理念，它一般由前端团队自行维护。通过 BFF 层，我们可以让服务端开发人员专注于底层业务逻辑的完善和稳定，前端开发人员也可以完整掌控展现层，更好的提升产品的用户体验。

由于移动端的快速发展，为了提升移动端的用户体验，我们也发展出离线包、小程序等新的技术方案，同时还有许多活动页面需要基于 CMS 系统来开发，很多业务实际上已经分成三层：前端（HTML / CSS / JS）+ BFF（Node.js 接口聚合层）+ 后端服务（Java），其中前端团队通常要完成前面两层的研发。

尽管从职责划分上已经越来越清晰，但是由于前后端发布系统不一致，前端团队仍然需要在基于不同的代码仓库进行研发，走不同的发布流程。

为了让产品前端开发可以更加集中精力到产品的研发和用户体验优化上，我们一直在思考怎样给产品研发『减负』，Techless Web Application 就是以此为目标而诞生的解决方案。

Techless Web Application（TWA）是什么？

TWA 是以提升开发者研发体验为核心的渐进式解决方案，给 H5 App 开发者 提供从框架、研发流程到运行时的完整支持。此处的 Techless 并不意味着它是一个没有技术含量的解决方案，而是我们期望让产品研发可以更好的关注在产品实现上，不用过于关注“应用”、“构建”、“部署”、“流程”等细节。

在 TWA 解决方案下，H5 App 的开发者只需要在一个代码仓库下，基于 TWA 提供的框架，完成客户端和 BFF 层的研发，通过 Basement 研发平台提供的流程支持，一键将应用部署到各个运行终端，同时在研发平台上完成应用的自助运维和监控。

将 TWA 拆解开来，我们主要从框架、研发平台和运行时三个大的方向来提升开发者的研发体验：

• 我们提供一个前后端合一的框架，给产品研发带来舒适的研发体验。同时通过一层定制化网关，抹平多个终端和接入形式的差异，让一套代码可以运行在不同的终端下。
• 在 Basement 一站式研发平台上提供 TWA 的研发迭代、自助运维和监控，精简并规范了 H5 App 的研发流程。
• 通过体验技术部的基础服务和 Docker，给客户端代码和服务端代码提供稳定可靠的运行时环境。

我们从今年年初的时候开始设计 TWA 的架构，并开始在内部的多个业务线开始试点这个研发模式，极大的提升了前端团队的生产力。

• 花呗采用 TWA 技术完成『花呗挖哦』应用的研发，TWA 技术给前端团队带来更多业务上的创新能力。
• 支付宝国际通过 TWA 的多端支持能力，搭建跨支付宝、手机淘宝和飞猪等多个平台的境外产品服务。
• 基于 TWA 提供的通用接口服务于蚂蚁森林、共享单车、口碑全站等多个业务和产品。
• 本届 SEE Conf 的报名网站、管理后台和抽奖等应用也是通过 TWA 快速开发上线。

更多 TWA 的理念、方案细节与经验教训，敬请期待 2018.01.06 在杭州举办的首届 SEE Conf，届时会有更多的相关话题一起分享。