滴滴后市场前端技术体系建设-优快云博客

经过两年的发展，作为汽车后市场各业务重要支撑的前端团队，随着业务的不断发展，从无到有，从基础到完善，沉淀了支撑业务的前端技术体系。

背景

对于技术体系建设，我们是想通过一些方法论，基础设施，形成一个体系化的解决方案，来更好的满足于我们的业务，前端团队，合作团队的场景化需求。

原则

基于以上业务，前端团队，合作团队的背景，我们技术体系建设的原则是，形成一个前端闭环。对外，基于接口，单向依赖合作团队。对内，我们能掌控项目从开发到最终上线，维护的每个周期的细节。我们注重体系建设的标准化，开发者体验，和建设过程的阶段化和渐进增强。最终我们希望我们的体系能高效，高质量的支撑我们的业务。

全景

最终来说，我们的技术体系，垂直方向，关注应用，代码，工程化，水平方向，将技术体系建设分为三个阶段。

第一阶段，主要关注业务的支撑能力。应用上，注重前端与客户端，服务端的分离。代码上，引入数据驱动，组件化的编程思想，创建了基础库，组件库，服务型SDK等基础设施。工程上，关注项目从创建到上线维护各个周期的规范，工具，系统建设。

第二阶段，主要关注业务的优化能力。应用上，低配设备场景下，引入ReactNative提升渲染性能，增加容器的离线缓存支持，对于重展示，轻交互的场景，我们开始做服务端渲染。代码上，我们统一使用JSX来做页面模板，废弃pugjs，并且基于统一的JSX，开始提供编译预渲染，服务端预渲染等技术。工程上，增加ReactNative，SSR的项目模板，引入Apollo进行容灾兜底开关控制。

第三阶段，主要关注业务的驱动能力。应用上，创建后市场独立应用容器，来统一收敛风险，提升各个渠道下一致性的用户体验，下沉贩泛前端场景下的公共服务。工程上，我们基于组件库做搭建系统，提升运营支持效率，创建测试，mock平台，提升整个研发体系的效率和质量。

应用

注重前端与客户端，服务端的分离，客户端容器优化，页面性能优化，泛前端服务下沉。

代码

客户端代码

在客户端，采用数据驱动，组件化的编程思想，基于基础库，组件库，编写组件逻辑，业务逻辑，使用路由进行页面管理。

服务端代码

在服务端，主要提供SSR的功能，整体上基于koa2，React等基础库，编写通用渲染，自动路由等中间件，在控制层做数据预拉取，路由层做请求分发。

工程

工程方面，在项目创建阶段提供分场景的项目模板。在开发&调试阶段，提供代码调试，接口调试，代码质量保证，自动化优化，预渲染等支持。在联调&测试阶段，提供前端环境docker，打包工具，代理工具。在上线阶段，做页面&服务的前端服务上线，静态资源的CDN上线。在维护阶段，提供线上运行状况监控以及容灾兜底开关。

组件库

对于组件库建设，我们的目标是跨业务，跨端使用，首先推动垂直于各自业务的产品，设计一起产出跨屏，跨业务的设计标准。基于设计标准，前端关注组件的行为，布局，皮肤的常量和变量，设计底层抽象组件。以toast，loading，popover，dialog举例，行为上，他们的常量是，都会在文档流之上，展示一个浮层，他们的变量是，是否会锁定空白区域，是否能自动关闭等，所以我们就抽象了更底层的overlay组件。

再以跨端的toast举例，他们在行为，皮肤上是一致的，在布局上，他们的常量是，显示一个浮层，包含一段文字，他们的变量是，浮层大小，位置不同，所以我们就抽象了底层的toast组件，再去基于它实现各个端下的基础组件，基于基础组件，我们再做业务组件，最终形成一个跨端，跨业务的组件体系。

ReactNative接入

我们在已有技术体系下，基于ReactNative，封装了类web的容器，这个容器的交互方式与webview完全一致，然后，我们再复用体系中已有的基础库，组件库，和开发模式，最后，我们复用工程体系，并对部分流程做扩展改造，在打包时，我们会对ReactNative原生产出的包，进行拆包，静态资源外链，生成一个类似于html的资源索引文件，在维护阶段，复用已有的容灾监控体系，并且使用旧版本webview进行容灾兜底。

稳定性建设

对于稳定性建设，我们从交互，应用，代码，工程四个角度着手。在交互上，我们推动操作的状态化，错误可重试，以及主流程交互链路最小化。在应用上，我们做资源容灾，容器容灾，线上监控，以及一键降级处理。在代码上，我们进行外部依赖模块封装，外部数据校验，核心代码100%测试覆盖，规范模块复用，以及后续引入更健壮的语言。在工程上，我们进行自动化的检测和优化，复用经过实践考验的模块，工具，制定故障处理的制度和标准。