阅读 7998

滴滴后市场前端技术体系

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

背景

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

技术体系建设背景

原则

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

技术体系建设原则

全景

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

第一阶段,主要关注业务的支撑能力。应用上,注重前端与客户端,服务端的分离。代码上,引入数据驱动,组件化的编程思想,创建了基础库,组件库,服务型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进行容灾兜底。

ReactNative接入

稳定性建设

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

稳定性建设

以上是对滴滴后市场前端技术体系建设的一个简单介绍。目前整体的体系建设处于阶段二的末期,有意加入我们的同学,可以发邮件至wangfeng_cugb@163.com,期待合作。

关注下面的标签,发现更多相似文章
评论