前端dashboard框架_震坤行前端技术体系化演进之路

总第4篇，2020年第1篇

建议阅读：12分钟

 体系化演进背景： 

随着震坤行业务的高速发展，前端研发数量也扩张到了现在横跨北京、上海、武汉、深圳4地10+人的规模。业务快速演进，团队分散各地，前端领域框架技术又层出不穷，各个业务的前端研发团队在技术选择上没有明确的指导意见，致使业务与业务之间的技术差异越来越大，在技术工具研发上无法共建，在资源调度上成本也很高。

2019年下半年，前端团队发起了技术栈统一行动， 通过调研业界技术发展趋势，及收集前端团队同学的意见进行归纳整理，结合各团队的情况，震坤行前端对于技术栈的选型达成了共识。 本文将介绍震坤行的前端技术体系化的规划、落地以及背后的思考。

2019年技术体系规划： 震坤行前端技术体系将从开发，编译部署，质量监控三个方向深入描述技术体系的规划及落地的项目。 2019年技术体系落地概述 npm 私库服务 建立 npm 私有库基本已经成为了前端标配的包管理工具，开发在项目工作中可能会用到很多通用性的代码，例如通用框架、UI组件库、业务工具库等通过打包发布npm仓库来进行维护和托管代码，开源共享提升业务开发效率。 考虑到一些和业务关系紧密的组件、框架的安全问题，私有npm包只对公司内部局域网开放，且速度比直接在npm下载包更快。 平台提倡和鼓励开源共享以及精益求精的精神，在贡献技术产出时，既加强自身的技术深度和设计能力，也加强了对业务的抽象能力。

实现上我们采用了开源框架 verdaccio 搭建了私有库，相比于 CNPM 更加轻量快捷，在部署管理上有一定的优势，在二次开发，配置插件等方面也非常方便。在权限控制上我们做了和域账号的融合，在使用上做了一定的限制，避免不必要的操作越权问题，服务启用 pm2 来守护进程，基本可以满足日常开发需求了。团队小伙伴积极贡献当前累计公用业务模块20+，开源协作模块共享助力业务高效开发。

前端脚手架工具

在业务快速发展的背景下，要求开发能够响应快节奏的需求。我们需要高质量多场景的解决方案来快速搭建项目结构，做到及时响应业务需求。前期狂野的自由风格会在后期带来糟糕的维护体验，前端项目各自风格迥异，有些项目几乎与现代前端技术脱节，需要通过重构才能维护起来，我们需要打造一条高速的前端工作流-脚手架工程 z-cli。整个命令行工具涵盖创建，本地开发，编译，静态资源部署等功能，并持续优化中。在功能和设计上与业务高度匹配兼容当前各种业务场景，同时架构上可扩展开发执行生命周期钩子、支持第三方插件等。在未来我们也将积极拓展，例如增加桌面端前端工作台的打造，使整个前端工作流更具可视化。

实现上我们采用 commander 作为基础，打造定制化的命令行工具，配合 commander 优良的 API 设计以及 inqurier 的友好交互，效果可见。脚手架工具本身也是一个 npm 包，既可以全局使用，也支持本地。在内部我们建立了工程模板仓库，存放基础工程或者特定解决方案工程模板，通过脚手架可以和该仓库建立联系，比如可以通过选择模板，拉取远程代码在本地快速新建一个项目，做到模板和脚手架松耦合的设计。

脚手架工具已集成开发编译监控流程的模版和通用组件，适配当前各个业务场景的需求，如@server/core,  boss-admin，@server/proxy， @server/elk等。在基础工程模板管理上也将做一些尝试，无感知的升级体验，也是架构设计中有趣的一环，既要保证升级本身带来的性能提升等内容，也要避免用户在升级中不必要的配置操作，尽量避免 break-change，而这些问题对开发在接口设计中有不小的考验。

在公司实际业务实践中，有VPI，VC，CRM 等多个项目系统接入使用脚手架去完成开发，大大优化了以前乱象丛生的状况，做到了技术体系统一，方便了技术管理。 在项目开发效率上，也提高了不少，5分钟上手从零启动项目到部署测试环境。 基于 node.js 前后端分离架构 在当前前端技术体系中，Node.js 已然是重要的基础之一，经过多年的实践验证了 Node.js 在业务上的实战能力和丰富拓展性。 在前后端分离这个课题上，Node.js 的出现无疑赋予了前端在 web 开发中更多能力，在服务端能够实现页面直出，解决跨域问题、实现SSR，数据库操作，定时任务等等，前端已不再是传统定义中的前端了，强大的 javascript 生态体系提供了新的开发方式，一种语言完成客户端和服务端的开发工作，赋能前端开发承载多样化的业务场景。

node业务框架采用TypeScript语言、Koa2作为基础框架，在其模型的基础上进行增强。框架约定目录结构、可插拔式中间价机制、统一路由配置、Controller层的抽离、模板渲染、全局错误捕获、安全头处理等。框架中集成了服务端和客户端的开发流程，极大的推动了前后端项目分离架构，降低开发维护成本。

渲染流程上，Node可以更好控制响应内容，在同种语言的优势下，视图模板可以做到前后端共用，极大了降低了开发成本，而在处理单页应用首屏渲染等场景有着得天独厚的能力； 针对高流量或压力测试场景下，加入缓存机制，能够有效缓解服务压力，整个客户端 UI 层交互由前端负责，各司其职，将效率最大化。 mock 数据服务

接口联调在项目流程中主要是解决前后端衔接过程的异常问题。如果接口联调时，前后端项目都处于一种极为不确定的状态，那么联调中一定会暴露大量问题，增加沟通、排查时间成本。标准化的开发流程要求前后端代码严格按照接口制定规范开发，达到联调状态后保障接口正常访问、界面交互正常展示。前后端开发人员可以通过工具测试接口、mock数据保障双方程序的稳定性。

接口管理服务平台基于开源框架Yapi定制开发部署内网，在开发过程中起到承上启下的作用。 提供数据Mock、接口可视化维护、接口集成测试、swagger接口数据同步、项目权限管理等。 开发前期制定接口字段、类型、返回等，前后端开发过程完全分离不会彼此依赖，前端开发通过Yapi Mock数据调试交互展示逻辑，后端开发通过Yapi集成测试接口的正确性及性能指标，能够有效缩短业务开发周期，从而提升效率。 编译部署 统一 webpack 前端开发需要维护的代码越来越复杂，各种框架、语言类型的不同导致代码打包、发布流程也存在一定差异。 从而标准化的构建部署兼容各种业务场景及各类技术选型保障业务的持续交付。 架构组分析当前业务及主流技术选型，基于目前最热门的前端资源模块化管理和打包工具webpack规范化配置loader、plugins保障技术栈的统一，根据不同环境配置不同的插件提升编译性能。 内部我们打造了 webpack-basic 的 npm 包，可以承接多种类型如 vue, react等的项目，在loader，plugins上做到了统一升级和管理，为业务节省了配置和优化的工作。 DevOps DevOps 平台赋能前端部署容器化，将应用的构建、部署、资源调度、应用管理等能力抽象出来，以服务的方式提供给研发人员，提升线上服务的稳定性和研发效率。 前端项目的部署先拉取容器云node镜像，获取部署项目分支执行脚本编译、打包、同步、启动前端服务。 目前我们构建镜像的方案没有极大的利用 Docker 的缓存机制，后续会优化构建和部署时间，达到增量更新。 静态资源服务 保障线上资源内容传输的更快、更稳定。 CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。 前端技术体系的Static服务采用腾讯云服务通过二次开发，将静态资源部署流程集成到脚手架，前端开发通过配置即可启用静态资源服务加速资源的加载。 在容错机制上，我们通过设置开关去控制静态资源的加载远程或本地的来源，保障远程资源出现问题时，可以快速切换到本地资源，将影响降低，更极致的场景下我们可设置程序检测机制，判断当错误发生时，自动切换可用的资源。 质量监控

致终将逝去的“裸奔”时代，在业务需求精细化和前端业务复杂化的情况下，前端监控的重要性与日俱增。前端监控一般包含访问数据，错误监控，事件埋点。

开发主要利用监控观察应用的健康状态，保障线上产品的高可用性。在开发测试阶段，无法覆盖所有场景，通过监控服务的接入，应用就可以实时主动收集线上环境中出现的问题，对于提升系统的健壮性至关重要。

产品通过可视化图表等工具查看业务相关的数据，比如访问地区集中在哪些地区，访问高峰时间段，浏览器版本分布情况等等，分析这些数据将更有利于业务的运营规划。 整个流程上，我们主要实现了从被动到主动的过程，问题不再是被抛给开发，开发可以主动设置探测机制去发现解决问题。 在技术实现上我们采用 elastic-stack 来搭建，特点是部署快捷，kibana 在日志可视化方面也有比较大的优势，通过简易的配置即可实现数据可视化 dashboard等功能。 整体流程从采集端 filebeat 开始，将日志数据发送至 kafka 等待消费，经过logstash 过滤后进入 elasticsearch 建立索引，kibana 再根据这些数据进行 UI 展示。

我们主要采集服务端和客户端的数据，服务端采集 Node.js 应用访问日志和错误日志，生成报表查询每周访问情况，是否有偶发性报错等问题，在后续优化上可以设置阈值，当触发了特定预设条件后，自动通知到业务负责人，进行排查，将故障影响降到最低。在客户端如浏览器端、app应用开发监SDK，可以监测首屏渲染时间，客户端代码错误，停留时长等，而埋点功能为产品运营做数据漏斗，事件分析等功能提供帮助。

  2020年技术体系规划及落地计划： 可视化编辑器 随着业务迅速扩张，开发资源日益紧张，打造可视化编辑器是现代互联网企业重要拼图之一，能够有效缓解这个问题。 我们的目标是通过一个产品将前端开发能力服务化，由产品运营设计等伙伴自主在平台提供的页面编辑能力，发挥创造，完成页面开发。 编辑器开发涉及到了布局，模块，元素的设计编辑，操作历史，快捷键的设计，交互体验等诸多细节设计，都是不小的挑战，但通过打造这样的 webIDE，能够释放大量前端生产力，赋能非开发岗产品开发能力，再无需投入开发资源，便可以及时迅速地输出内容，可以节省大量开发资源和沟通时间来提能增效。 UI组件库

前端组件化是当今热议的话题之一，也是我们在项目开发中经常会碰到的问题，目前各个大厂开源了自己的 UI 库，如 Ant-design、Element-ui 等主流框架。然而实际业务中存在一些问题，比如每个公司业务组件不尽相同，没有办法完全满足需求，当前公司各个业务线也主要采用开源UI框架的基础组件来封装符合业务场景需求的组件。

开发UI组件库也是2020年技术体系落地的重中之重，考虑现有人力资源、业务框架技术等因素，基于主流UI框架的基础组件二次封装。 UI框架的设计更加的偏向基础广泛性，与公司业务场景结合，产出更加适合业务快速迭代的UI组件库。 自动化测试

自动化测试指软件测试的自动化，让软件代替人工测试，可以快速、反复进行。按照软件工程自底而上的概念，前端测试一般分为单元测试(Unit Testing )、集成测试(Integration Testing)和端到端测试(E2E Testing)。从下面的图可以看出，从底向上测试的复杂度将不断提高，另一方面测试的收益反而不断降低的。

2020年的目标是落地单元测试在各个业务项目中的实践。对于单元测试是指程序中最小可测试单元的测试，主要对项目业务逻辑函数的语句、条件、路径覆盖测试。单元测试能强迫开发者写出更可测试的代码，一般而言这样的代码可读性也会高很多，同时良好的单元测试可以作为被测代码的文档使用。

前端单元测试包括浏览器端代码和服务端代码测试，浏览器端代码会调用各类浏览器API所以必须依赖模拟浏览器环境运行。 前端在近几年如雨后春笋一般涌现出非常多的测试框架和相关工具： 测试平台Karma(能够很方便将测试在多个真实浏览器中运行)、测试框架jest、mocha、测试辅助工具 chai断言库、测试覆盖率工具 istanbul 等。 基于社区的共享协作能快速搭建适合当前公司业务的测试模型，保障线上代码的稳定运行。 系统化演进前端展望： 从2019年下半年至今，前端团队开始推动技术体系的建设，虽然过程中难免有疏漏，但是实现了前端技术体系从零到一的建立，推动了震坤行前端技术的不断完善，有效的支撑了前端工程的效能改进。

为了达到开源协作、高效高质量、健康可持续的前端工作流的目标，我们将持续更新从代码集成交付检查、可视化交互编辑、自动化测试接入、线上监控分析预警等功能。比如代码集成交付检查：将代码静态检查集成到持续交付工作流中，在保证交付质量的 同时，也降低了开发者的应用执行成本。再到可视化编辑器的搭建，随着项目的积累，可复用组件增多，为了提高前端效率，甚至10倍效率，将前端实现置于产品端，做到不用编写代码，产品或运营也可以通过友好的UI交互迅速搭建和更新前端业务。

随着震坤行业务的高速发展，震坤行的前端技术体系也在持续进行着高速的演进。 在此我们欢迎优秀的前端技术同学能够一起加入我们，共同推动前端技术体系的完善，为成为业界一流的前端技术团队努力。

 Android篇丨震坤行移动端组件化演进之路

 震坤行数据中台建设的一些思考

 震坤行DevOps工程效能演进之路