滴滴后市场前端技术体系

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

背景

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

技术体系建设背景

原则

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

技术体系建设原则

全景

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

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

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

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

技术体系建设全景

应用

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

应用

代码

客户端代码

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

客户端代码

服务端代码

在服务端,主要提供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,期待合做。

相关文章
相关标签/搜索