前端架构 —— 前端架构研发

一、培养前端架构思维

二、前端发布体系

1、利用脚手架统一管理发布阶段

• 规范: 利用统一发布规范，如commit记录、分支名称、代码规范等
• 效率: 避免大量重复操作，浪费开发时间
• 安全: 构建和发布全部在云端操作，避免个人发布时带来的安全隐患

2、脚手架发布流程

• GitFlow自动化代码提交
• 远程代码自动检查
• 云端完成构建与发布操作

3、产品整体架构设计图

三、前端研发流程优化工具清单

• 项目创建流程
• 项目研发模式
• 前端监控体系
• 前端测试体系
• 前端发布体系

四、 优化研发流程

优化研发流程的原因

• 项目量级增加:几千行代码->几万行代码
• 项目数量扩大:几个项目->几千个项目
• 项目复杂度高:Web项目->H5/PC/小程序/后端/脚手架
• 团队人数增长:几个人->几百人

传统的项目研发流程已经无法满足业务需求

前端研发流程进化的内核：效率， 质量，性能

研发流程总览

创建项目->项目开发->项目测试->项目发布

1、创建项目

• 脚手架创建
• 研发平台创建

2、项目开发

① 技术规范

• git规范
• 编码规范
• 文档规范

②研发模式

• 源码开发
• 低代码开发（宜搭、MS PowerApps）
• 0代码搭建（易企秀）

③前端监控

• 前端埋点
• 前端日志
• 流量大数据分析+数据可视化

3、项目测试

• 单元测试
• 性能测试

4、项目发布

• GitFlow自动化
• 远程自动检查
• 发布机（云端构建+发布）

五、项目创建流程介绍

项目代码——抽象——项目模板——存储到——数据库

创建新项目——使用脚手架生成——脚手架从数据库读取

六、研发模式优化

提升前端研发效率

• 复用代码->使用物料(组件、代码片段、板代码)
• 赋能产品、运营或后端非前端开发->低代码搭建

物料和低代码会撼动前端工程师的地位吗

• 会影响初端前端工程师，因为简单的表单、H5页面不再需要初级前端开发
• 前端工程师将逐步从初级页面开发转向高级工具开发、复杂全栈应用开发

七、物料开发模式介绍

项目代码抽象为组件——把组件存到数据库，组件源码存到NPM

新项目——使用脚手架——读取到组件——使用组件

八、前端监控体系介绍

前端监控的三个阶段?

• 初阶:使用第三方平台，百度、友盟、阿里云ARMS等
• 中阶:自研前端监控库，缺乏完整的监控体系
• 高阶:自研前端监控平台，具备完整的监控体系

前端监控的数据作用

• 流量数据监控，如:PV、UV、点击率、页面停留时长等
• 自定义事件监控，如:曝光事件、滑动事件、请求事件等
• 交易指标监控，如:成交额、转化率等
• 其他综合分析，如:用户画像分析、流量漏斗、销量预测等

前端监控的数据作用

• 流量数据监控，如:PV、UV、点击率、页面停留时长等
• 自定义事件监控，如:曝光事件、滑动事件、请求事件等
• 交易指标监控，如:成交额、转化率等
• 其他综合分析，如:用户画像分析、流量漏斗、销量预测等

九、项目测试体系介绍

前端测试的方法

• 测试同学:功能测试，性能测试，测试用例
• 前端同学:单元测试，常用于组件库、API等(Jest、Mocha)

上线项目测试的方法

• 测试同学回归
• 利用前端监控，进行监控项目稳定性和性能，并上报前端日志
• 稳定性:如jserror、白屏检测等
  性能:如秒开率、首屏渲染时长、接口请求时长等
• 前端日志:如console.1og、API请求记录等