一、概述
技术与工具的创新最终还是要落脚到业务中，能够促进团队自生长的技术架构才能更好的促进团队与业务的成长。（比如物料平台，让各业务条线人员能以比较容易的方式贡献积累团队的组件、页面、模板到物料库以减少功能的重复开发提升团队效率；另外一层的理解是前端团队有积累能力，比如文档总结，考核指标驱动（量化数据），以促进工具贡献与改进）。
一、前端团队成长与业务架构的冲突
作为前端晋升评审委员，全程参与前端职级晋升标准的制定以及晋升者的答辩，对公司的各个前端部门所做的事情也有了比较完整的了解，发现以下的问题：
- 前端架构团队与业务开发团队处于不同部门，业务开发团队互相隔离甚至与前端架构中心也交流甚少；
- 业务开发缺乏技术成长、贡献渠道；
- 业务条线缺乏交流平台导致技术、文档沉淀不能推广到兄弟团队，无法整体提升前端团队能力；
- 各团队开发规范甚至技术方案不一致。
这些问题导致各兄弟团队没有合适的渠道贡献自己的沉淀和积累，因此亟需架构团队和个业务条线前端负责人基于当前前端架构来建立一套能够让各业务团队参与到基建的简单方案。
二、当前团队技术架构
我们前端团队的架构图如下：
1、设计层
包含设计规范、代码规范 、开发流程规范、文档规范
- 设计规范 体验设计部对布局、栅格、色彩、字体、图标、内容策略、数据可视化、动效等做了一套完整的基础规范，对中后台系统会按照该规范实施开发，减少了设计成本。
- 代码规范
提供了命名规范、HTML规范、CSS规范、Javascript规范、vue规范、ESlint代码风格规范。
我的私人博客上总结了常见的前端规范，如有需要可去参考：
命名规范
HTML规范
CSS规范
- 开发流程规范
提供了版本命名规范、版本提交规范、git分支管理规范等
我的私人博客和掘金上总结了几篇开发流程规范，如有需要可去参考：
git分支管理开发规范
SemVer规范与npm版本管理
gitcommit规范
- 文档规范
提供了技术调研方案、前端技术设计文档模板、README文档等
我的私人博客上总结了几篇文档，如有需要可去参考：
技术方案调研
前端技术方案模板
README文档
2、工具层
- 脚手架工具
脚手架工具是该架构的核心，物料的开发、测试、发布都是基于该工具，功能如下图所示：
如果想参考完整解决方案可以看下字节开源的arco-cli
- GUI工具
可以帮助开发者通过可视化的方式进行项目开发和物料开发
- 代码检测工具
代码检测工具, 可以根据公司前端规范，从代码规范、圈复杂度、代码重复度等维度对代码进行扫描，并给出得分和详细的扫描结果。
3、基础层
包含UI库、图表库、Utils库、Snippet库
- UI库
是公司最核心的基础库（包含国内版和海外版），是基于公司设计规范在Element-ui基础上做的二次开发，是物料库、业务组件、模板库、解决方案的基础。
- 图表库
主要对echarts的二次封装，更易于使用和符合设计规范
- Utils库
提供了常见的JavaScript工具库
- Snippet库
Visual Studio Code代码片段库。关于代码片段开参考我的掘金文章赶快把常用的代码都做成代码片段snippets吧，它真的很香！
4、业务层
业务层是物料平台，服务于前端技术团队，致力于增强团队协作、促进资源共享、提升开发效率。基于来自UI组件库的技术沉淀，提供了简单易学的物料开发方案。
在中后台项目开发中，我们早已习惯了使用 UI 组件库提升开发效率。基础的 UI 组件库极大降低了界面开发成本，但此类组件通常都是一些与业务逻辑完全解耦的原子组件，不能完全满足复杂的业务场景。
实际项目中包含了大量的可以复用的业务逻辑强耦合的模块，例如站点导航条、员工选择器。如何在团队内部最大程度复用基础业务模块以提升效率、降低冗余？物料的概念就是为了解决这一问题，将基础业务模块从项目之中抽离，统一维护，它们便可以被称为「物料」。
物料平台由组件、区块、页面、模板组成：
- （业务）组件 （业务）组件是离UI组件库最近的模块，它是在UI库基础上开发的偏业务型组件，例如站点导航条、员工选择器，目前我们已有100个左右的（业务）组件。
- 区块
区块相比组件更为复杂，可以理解为多个组件的集合。一个页面通常由若干个区块组成，开发者可以将区块添加到自己的页面进行二次开发。由于区块的复杂性和二次开发的需求存在，区块使用方式与组件不同，本质上是将区块的源码直接下载到本地项目之中。
- 页面 页面即其字面意思，使用方式与区块类似，目前已积累30多个页面
- 模板
模板可以理解为完整的页面解决方案，比如我们赋能的基础版本，是完整的中后台系统，为团队十余个项目提供项目模板，极大的提升了开发效率。
5、应用层
包含物料平台管理、文档系统等
- 物料平台管理
是管理物料的平台，包含物料的版本、预览视图、使用文档。如下图所示：
- 文档系统
文档系统是自研的一套文档系统，主要支持markdown语法，更方便团队进行文档管理。如果不想自研可以使用开源的文档工具，比如羽雀等。
6、运营&质量
当我们的系统上线之后，需要对运营数据进行分析以及质量进行监测，对应的是运营数据分析系统和监控系统（在京东做电商的时候是必须的），目前这两块团队还在规划中。
7、数据统计
做数据统计的目的是为了鼓励开发人员去为团队贡献自己的力量，作为一个量化指标也可以用于绩效考核，对团队和个人成长是双赢的。同时也可以分析所做的物料、工具的使用情况来正向反馈给开发者跟进与优化。
三、基于物料的架构共建方案
从以上架构可以看到，对于业务开发者主要的关注点是物料贡献和文档建设。如下图所示
各团队将通过物料体系和文档体系作为共建渠道，也作为各团队交流的基础。业务团队有新需求的时候会先到物料库去查看是否有现有的业务组件或者解决方案，有的话直接使用，无的话重新开发并评判是否贡献到物料平台。这种模式对个人成长和团队积累都是有益的，它也更加适合团队的实际情况。
四、总结
基于物料的前端架构是企业级产品的完整设计和开发解决方案，在此解决方案中对设计资源可以提供图标库、各端应用（中后台、H5、小程序）设计规范、UI设计插件，开发资源基于UI标准库，提供CLI脚手架工具、各种插件，最终给出丰富共享的业务物料平台，让团队效率突飞猛进。
公司的这套解决方案是不开源的，如果有兴趣了的话，可以参考字节开源的arco.design，或者与我交流~
原文链接：
https://juejin.cn/post/7225891176531542077