当下,各个企业都在做数字化转型,也是ToB产品项目的主战场,对于一个能持续高效支撑和交付的前端产品化团队,如何搭建技术体系成了很好的课题。以下是个人来到众安科技后,对于前端团队ToB产品化之路相关的一些技术实践经验,主要从重塑团队前端技术体系,并通过建立相关工程化的实践、对未来协作模式的探索来更好地支撑业务等几个方向进行了一系列的技术研发模式的改革和落地。
第一件重要的事情就是“重塑科技前端架构”,前期主要就产品体验一致性、框架一致性等进行决策,针对众安保险团队的Zarm设计规范已经有了比较大的辨识度,所以整体设计规范先短期内全部统一ZarmWeb,总计已完成数十个应用的体验一致性改造;为后续的新的设计体系的推动落地打下了夯实基础;
第二件事是关于如何选型团队未来的基础技术栈,深入了解了几块产品的技术栈情况后,最终我们决定未来的ToB产品化方向的关键技术选型:更丰富的React技术栈生态;
基础技术架构目标确定之后,接下来就是逐步整合并收敛统一的前端产研体系,搭建完成通用大型产品化交付项目所需要的技术团队研发基础,以及“规模化定制”的业务交付价值基础:
1.推动科技企业级的前端研发规范标准化
在团队人数低于10人的时候,很多规范和流程可以通过快速沟通并落地有效执行,但团队人数进一步增大后,光靠叮嘱和沟通已经不能真正执行和管理到一些细节,这个时候就需要一套更标准、更规范的工作流程和指导性的制度来帮助管理所有研发在日常工作中相关目标的一致性,因此,制定科技企业级的前端研发规范流程已经迫在眉睫,将基本的研发工作流程+技术规范约束融合到一个标准化的前端开发文档中,作为整个团队级的指导手册,既能帮助新人、实习生快速了解团队的研发规约,也能更好地约束整个团队跨项目研发任务中的差异化问题,并倡导整体项目研发团队的认知一致性原则。
2.基于大型交付项目沉淀Pro业务组件库系统
在首个保险核心系统的交付项目研发过程中,我们团队内的核心同学主动发起了对科技ToB业务的Pro业务组件库系统的建设需求,基于该项目进行实践和落地,最终既完成了项目交付,同时团队里也多了一个核心效能提升技术项目,帮助后来的很多新产品的快速接入和开发打造了良好的基础,经过1年的打磨后,对整体研发的效率提升可达20%+,后续我们也会在这个基础上结合UED团队的设计理念持续迭代升级,同时增加Plus版本,做好在保险金融行业ToB领域内的“先行者”。
3.基于微前端架构提升大型项目协同开发效率
团队整体技术栈都已经逐步完成统一,但随着项目迭代,ToB单体应用的复杂性也在不断提升,逐步从几万行代码演变到了数十万行代码规模,这在前端项目领域已经是“很臃肿”的状态,已经逐渐影响到团队做快速交付;
同时,如何将ToB产品更快捷地实现“商品化”,科技对外输出大多数都是解决方案,而方案肯定会依赖多个“产品的组合”进行销售,这样也更能体现科技价值和体系化概念,之前我们都是使用页面重定向、iframe等技术,对于整体产品的功能一致性,交互体验性都大打折扣,还影响客户的个性化体验需求。
微前端架构的全产品线迁移开始纳入前端技术体系进一步演进的规划之中,调研过开源的几个技术“single-spa”、“qiankun”等,都有各自的最佳使用场景,最终基于umijs体系的先天优势,我们选型了基于qiankun做科技的微前端改造,目前在【X线、保险线、经代线、P线】等多个产品项目组中实践,大多数产品都已经部署到生产版本,完成了0-1的突破,后续对于整个微前端体系会做更多面向未来交付的周边体系,更好、更高效地支撑多业务的发展。
前端团队和UED团队是日常工作中最紧密合作和沟通的“好基友”,我们为了项目的交付和协作效率最大化,尝试了很多的磨合和探索,最终经过多个项目的实践和积累,逐步梳理出两个团队都认可的企业级设计体系方向:
1.协同科技UED团队制定和完善企业级设计系统
设计系统主要包括基础组件规范、设计指南、中后台设计、移动端设计等,同时沉淀了多种场景下的设计模版,方便产品和前端研发快速搭建类似功能的产品页面,进一步实现降本增效的目标。
未来也会基于这些资产融合到Pro业务组件库系统中,在一定程度上可以实现前端“LowCode + ProCode”结合的轻研发模式,释放更多研发效能价值。
具体的规范细节会在后续的UED团队的文章中进行更专业的阐述和实践理论,敬请期待。
2.基于DesignToken提升设计研发协作效率
“Design DevOps”--- 在B端业务实现设计研发一体化,除了常见的基础组件设计规范以外,还有当下流行的Design Token理念:一种设计与开发共同使用的工作思维和方法。
具体研发命名与分类方式可基于该表格与设计同学共同拟定、优化,并形成最终的设计、研发 Design Token 对照表。
在日常产品设计过程中,设计同学在对样式进行调整并定稿后,需及时将修改点同步到对照表中,并及时通知研发同学修改研发侧 Design Token,确保设计、研发的一致性。同时在研发侧,根据两边协议约定好的Token制作了相关的技术工具,进一步方便项目接入和使用,结合已有的业务组件库系统,可快速交付一个可自定义换肤的应用,满足不同客户对系统风格的个性化、品牌化需求。基于现代web工程的研发思路和模式,只有不断增强协作意识,共同合力才能更好、更快地进行规模化定制的产品交付,我们希望寻找到一种更敏捷和可靠的产设研一体化的工作方式:
1.搭建 Magi 前端研发组件平台,实现跨团队共赢
通过众安前端技术委员会立项进行自主研发和搭建的组件平台,愿景:实现跨团队,跨组织级的前端组件共享,持续减少重复造轮子。
目前Magi组件平台支持React组件的一键发布,并实现了“零”侵入的简易模式,发布第一个组件只要几分钟的时间就可完成初步使用和接入。
案例:众安科技前端团队在科技官网的实现上,我们通过开发模块化的UI组件,发布组件平台后,在后台CMS系统实现预览功能时,直接通过组件包引入的方式快速实现,不再需要同时编写两个项目的组件代码,实现了生产-消费的无缝闭环流程,大大降低了重复研发和维护的成本。2.基于组件化开发趋势,完成产品-设计-前端研发协作闭环
当下,前端业务研发还是基于组件化开发作为最主要的输出方式,对于各种类型的,个性化的组件的需求有增无减,如何更快速的实现项目交付,我们也在尝试探索一条更标准化,更流水线化的技术研发模式,通过打通产品、设计、前端的协作沟通方面的瓶颈,将产品、设计都纳入到整个一体化的流程中,围绕各个层级,不同细粒度的业务场景,分配专业的资深工程师和设计师进行生产作业并统一发布到Magi组件平台,然后上游的业务产品、业务研发、业务设计持续消费,最终形成一个更健康的作业闭环,实现高可用、高复用的全场景的组件研发协作体系,并逐步建立成团队级研发基础设施。
3.未来研发模式构想和路径
基于以上不断持续的积累和发展,我们其实也可以看到一些组织协同的趋势变化,前端、产品、设计之间的协作融合会进一步紧密结合,在一定程度上你中有我,我中有你的不停相互影响着。而且,通过研发工具、平台能力的建设,持续降低应用研发的协作复杂性、减少多岗位间的持续管理摩擦,才能达到交付效率和管理效率的提升。
基于以上的构想,作为前端团队的负责人,我认为未来的web研发的目的核心是构建敏捷协同组织,而对应的技术能力要为这个组织的不同角色服务,因此,所有的研发模式都要服务于如何让这件事更容易的发生。由于我们的技术主阵地依然是以ToB为主的场景,如何有效地提升产品/项目侧交付效率就是我们核心要关注的事情了。
以下是个人设想的基于快速交付为目的,多元化组件资产作为基础研发要素,再辅以相关的技术能力支撑的前端产品化项目研发模式:同时,我们也要看到前端技术发展日新月异,前端从早期的刀耕火种,逐步向工程化演进,到如今的泛前端时代,囊括了各种标准、规范,以及提效的方法论。当然这里也不一定有最佳实践,但我们会结合自身的项目实践不断探索和尝试,让我们这个团队在这条路上走得越来越坚定,不断突破自己,走向更专业的方向。---------- END ----------