浅析前端技术体系
01- 前后端分离
- 不只是前后端代码的分离,而是系统级的分离。
- 前端要有一整套独立的开发、线上服务与周边保障体系,从而更敏捷地支撑用户端业务的快速发展
- 实现跨业务线的技术资源横向复用。
02- 前端技术体系
整个前端技术体系可以分为四个层次:
- 线下层的重点在于提高开发效率,
- 基础设施层重点关注稳定性,
- 保障层重点关注质量与可用性,
- 业务层重点关注服务的全面性和可复用性。
03- 业务系统
业务系统是核心系统(浏览器或者App中的前端应用本身),其它系统是对它的支持或者控制。
业务系统可以分为业务组件、公共库和第三方库三个层次:
-
公共样式库:
- 有利于各业务线之间保持用户体验的一致性。
- 各业务线在公共样式库的基础之上做可复用的UI组件,促进效率提升。
-
公共功能库:
- 包括常用的功能模块,比如登陆、支付、数据统计等等,
- 可以用自动化测试的覆盖度来保障质量。
第三方库的组织构成:
- 样式框架:Bootstrap Material design
- UI框架:React VUE
- 第三方功能库:Fetch Modernizr Sentry GA
- 第三方基础库:jQuery Zetpo Underscore Lodash
03- 业务系统辅助
配置系统 - 集中管理各种配置项:
- ,比如功能开关,链接地址,AB测试控制等等。
- 使用配置系统的好处是不用改代码并发布即可实现实时控制。
- 集中配置项也更便于展示他们之间的关系。
- 消息系统 - 通知发布:
- 信息推送 客服等即时通讯场景
- 鉴权系统:
- 集中处理登陆、支付等需要风险控制较高的公共业务
04- 监控系统
如何从用户的角度判断系统的可用性。监控关注的是实时数据
监控系统的功能分类:
- 可用性监控 - 页面访问成功率 接口成功率
- 错误监控 - 收集并汇总应用系统抛出的错误信息
- 业务指标监控 - 实时订单量 事件触发量
05- 统计系统
统计系统和监控系统的区别在于:
- 监控关注的是实时数据,统计关注的是全量数据,
- 监控是为了提高团队的故障响应能力,统计是为产品与业务分析提供基础。
统计系统的功能分类:
- 性能统计
- 访问量统计
- 用户行为统计
06- 测试系统
自动化测试是是一个塔型体系。静态检查是必须的,作为团队规范存在,覆盖全部代码。UT是局部覆盖的,关注基础功能。E2E是可选的,关注主流程和回归测试。
● 静态检查 - Eslint JSCS
● Unit Test - Karma Jasmine Mocha
● End to End Test - Protracker Nightwatch Selenium
● 持续集成 - TravisCI CircleCI
07- 基础设施层
- 资源管理系统 - CDN 图片管理 发布工具 离线包管理
- 数据持久化系统 - 存储上层系统的非核心业务数据,比如错误数据或者用户行为数据
- 运维系统 - 版本控制 发布脚本
08- 工具集
- 代码管理 - Git Stash
- 包管理 - NPM Bower Yarn
- 构建工具 - Webpack
- 任务管理工具 - Gulp Grunt
- 脚手架 - Yeoman
09- 组件系统
组件系统的作用:
- 集中管理可复用的开发资源:
- 不止包括UI组件,也包括功能组件。
- 各业务线优先从系统中选取可复用的部分,同时向系统中沉淀组件。
组件系统要点:
- 组件的质量标准
- 组件的测试用例
- 组件的复用机制
- Demo与Gallery
10- 总结
前后端的分离是系统级的分离,
一整套完整的技术体系以更好地支持产品在终端形态上的快速演进,
同时实现技术资源的横向复用。
技术体系:
- 线下层重点关注开发效率,
- 基础设施层重点关注稳定性,
- 保障层重点关注质量与可用性,
- 业务层重点关注服务的全面性和可复用性。
作者:张鑫
原文:https://zhuanlan.zhihu.com/p/23185351
--------------------- 本文来自 CooliYellow 的**** 博客 ,全文地址请点击:https://blog.****.net/CooliYellow/article/details/78733632?utm_source=copy