前端宝典十一:前端工程化稳定性方案

一、工程化体系介绍

1、什么是前端工程化

  • 前端工程化 = 前端 + 软件工程;
  • 前端工程化 = 将工程方法系统化地应用到前端开发中;
  • 前端工程化 = 系统、严谨、可量化的方法开发、运营和维护前端应用程序;
  • 前端工程化 = 基于业务诉求,梳理出最符合当前需要的架构设计;
    软件工程:将工程方法系统化地软件工程应用到软件开发中;
    工程方法:以系统、严谨、可量化的方法开发、运营和维护软件;

2、前端工程化发展

  1. 前后端分离:B/S架构兴起,有了前后端之分;
  2. 模块化:随着前端复杂度上升,模块复用、实践规范重要性提升;
  3. 自动化:管理&简化前端开发过程,前端框架、自动化、构建系统应运而生;
  4. 最佳实践:基于行业内最佳实践,开箱即用的框架(dva)、工具体系逐渐建立起来;
  5. 好、快、稳:依赖vite、esm、wasm、低代码等能力;

二、项目开发全流程

项目全流程包含5个阶段:
评审阶段、准备阶段、开发阶段、发布交付阶段、产后阶段
在这里插入图片描述

1、评审阶段

该阶段主要包括:

  1. 项目立项
  2. 编写需求
  3. 需求评审
  4. 开发设计、开发设计评审
  5. 视觉交互评审

2、准备阶段

该阶段主要包括:

  1. 新建仓库
  2. 构建或选择脚手架
  3. 项目初始化

3、开发阶段

该阶段主要包括:

  1. 开发/打包配置
  2. 本地mock
  3. 业务实现
  4. 单元测试

4、发布交付阶段

该阶段主要包括:

  1. git commit规范;
  2. changeLog规范;
  3. 打包构建;
  4. 部署、验收;

5、产后阶段

该阶段主要包括:

  1. 错误监控
  2. 数据分析

开发全流程的5个阶段,最终目的是确保需求按期上线,且上线后正常运行,没有生产问题,但是前端页面上线后需要有工程化工具来进行打分,也就是用户体验度量。

三、体验度量

1、体验度量要解决的问题

在这里插入图片描述
上图是度量面临的问题,针对这些问题,我们通过体验度量想要达到的目标是:
在这里插入图片描述

2、体验度量设计

在这里插入图片描述
上图中的FCP、LCP是通过前端性能监控工具performance给出的重要指标,我们会专门针对性能监控开一篇。
在这里插入图片描述

同时像error上报、用户基础数据日志上报、埋点事件、访问上报、卡顿率等指标都是用来评价前端页面性能的,这样可以让体验度量具像化。

四、规范流程

1、研发效能定义:

团队能够持续地为用户产生有效价值的效率,包括有效性(Effectiveness)、效率(Efficiency)和可持续性(Sustainability)三个方面。简单来说,就是能否长期、高效地交付出有价值的产品;
在这里插入图片描述

五、稳定性建设

随着业务迭代的发展,前端(to B/to C端)或多或少都有迭代周期快的压力,在业务的眼里,前端可能更多是“切图仔”,针对前端的具体实现并不关心。导致单人或小团队内很容易造成技术选型自由松散,缺乏约束和专门的技术限制,经常每个人或几个人自己维护一套代码开发流程,技术上更多体现在“拿来主义",工程链路不统一,代码重复度高,页面一致性差,各业务域松散,缺失共享,同时,在代码发布集成后的监控告警几乎没有,缺乏有效的监控手段与快速定位问题(可监控),及时止血(可恢复)的能力,并且缺乏项目的灰度与极值流量的压测,其实以上都是前端稳定性建设需要解决的核心问题。
基于上述内容,总结为三点:

  1. 可预防;
  2. 可监控;
  3. 可回滚;

通过以上三点,我们主要从研发态与运行态出发,通过研发流程的源码框架、工程规范,依赖检测去提高开发质量,发布过程中通过在发布节点上添加监控,做灰度卡口,避免问题带到线上,线上运行时通过实时监控告警实现快速定位问题,快速止血。

稳定性建设流程
在这里插入图片描述

1、可预防

(1) 规范团队代码研发流程

通过统一规范前端文档及开发工具,最大可能减少前端研发时差异化部分;
团队文档建设&新人指导
属于软机制,通过文档记录,保证团队在研发基础、故障认知上达成一致;
开发脚手架
通常要支持以下能力:

  • git hooks、git commit配置;
  • eslint配置;
  • 根据命令行配置选择框架template;
  • 支持测试用例集成;
    组件&物料市场
    针对业务属性,梳理常见的开发通用代码,包括但不限于:
  • npm包;
  • 通用代码snippet集合;
  • 业务组件物料市场;

(2) 攻防演练

通过日常及大促前的攻防演练,训练面对问题快速止血的演练机制;
故障&压测演练
考察针对流量异常、断网弱网等场景下的降级方案的处理;
代码CR注入
通过在代码code review时加入无效信息,检测是否认真查看CR内容,记录团队攻防数;

(3)灰度方案

  • CDN分流
  1. 并不是所有项目都需要灰度发布,在CDN做层拦截对所有项目都有侵扰;
  2. 根据单一职责,CDN不应该做灰度分流的工作,若用代理模式再CDN前加一层代理分流,实际会造成无效流量的增长;
  3. CDN要记录用户是否命中灰度,通常需要加cookie,若命中多灰度,cookie增长会过多;
  • N个版本文件打包到一个文件里
  1. 灰度比例可以通过随机数比例生产,但是要记录用户是否命中灰度,需要使用localStorage记录;
  2. 需要将文件*n(n为灰度个数)融合,会造成带宽的浪费;
  • 前端分流后加载CDN
    前端代码加载前先加载一次HTTP请求
  1. 虽然有优化,能解决文件体积过大的问题,但可能会导致一但出错,阻塞后续方案,且会额外调一次接口;

2、可监控

在这里插入图片描述

(1)数据采集

  • 无埋点:自动采集
    • 脚本异常
    • 接口异常
    • 资源异常
  • 手动上报埋点:需要业务手动上报
  • 脚本异常

script error:window.onError;

window.addEventListener('error', () => {})

在这里插入图片描述
在这里插入图片描述

  • addEventListener(‘unhandledrejection’):用于处理promise.reject没有处理的异常;
    在这里插入图片描述

  • react错误上报(V16):componentDidCatch、getDerivedStateFromError;


componentDidCatch(error, info)class ErrorBoundary extends React.Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {// 更新 state 使下一次渲染可以显示降级 UIreturn { hasError: true };}componentDidCatch(error, info) {// "组件堆栈" 例子://   in ComponentThatThrows (created by App)//   in ErrorBoundary (created by App)//   in div (created by App)//   in ApplogComponentStackToMyService(info.componentStack);}render() {if (this.state.hasError) {// 你可以渲染任何自定义的降级 UIreturn <h1>Something went wrong.</h1>;}return this.props.children;}
}
  • 请求异常
    XMLHttpRequest/fetch
    在这里插入图片描述
  • 性能采集
    在这里插入图片描述

(3)数据上报

上报方式

  • get 1*1像素GIF:体积小,不会带cookie,无跨域,无页面阻塞,服务器不需要响应;
  • sendBeacon;
  • xhr/fetch;

发送时机

  • 立即发送、批量发送:requestIdleCallback;

(4)数据清洗

  • 阈值处理:单位时间内错误数超过,抽样处理;错误数重复,只统计数量;
  • 数据预处理:去除无用信息;
  • 数据聚合:聚合有用数据;

(5)数据持久化

  • 时效性高:告警 -> 大量数据查询,要求错误信息及时暴露,如 Elasticsearch;
  • 时效性低:数据报表&大图展示 -> 大量数据存储,对数据量级有要求,时效性要求不高:如Mysql;

(5)数据可视化

  • 数据告警:在上传CDN时添加卡口,支持手动上传sourcemap,定位问题上下文;
  • 数据大图:支持按业务指标进行搜索;
  • 健康报告:通过定时任务跑出系统内各个业务线的定量数据指标,进行指标的排名、治理,通过榜单形成红黑榜,正向推动循环;

3、可回滚

1、容器化部署

如果将代码和配置分开部署,在回滚的时候就会遇到"应该是先回滚代码还是回滚配置"的难题,所以,要想轻松回滚,在部署的时候,一定要将代码和配置整体打包,这里建议使用容器化部署,保证代码和配置可以整体回滚;

2、数据迁移

在业务变更涉及数据迁移时,应对数据表的字段采取"只增不删"的原则。因为当某个字段被当前代码引用的字段被删除后,线上业务是会出问题的,但新增一个没有被当前代码引用到的字段,则不会有问题。
等到确认新版代码工作完全正常,不会再回滚到旧版本时,才将旧字段删除。一旦旧字段被删除,引用到旧字段的旧版本代码就无法工作,也就无法回滚到旧版本了。

4、总结

总结上述内容,其实前端的稳定性建设更多地是对整个研发流程节点上故障的预防与治理,分别从可预防、可监控、可回滚三个维度进行梳理,简要介绍了一个完整的前端项目中在稳定性建设上的发力点,实际项目还是结合业务诉求,选择最合适的切入点,优先解决最痛点的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/409300.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

redhawk:STA timing data file解析

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 往期文章:

PyTorch深度学习网络(一:MLP)

全连接神经网络&#xff0c;又称多层感知机&#xff08;MLP&#xff09;&#xff0c;是深度学习最基础的神经网络。全连接神经网络主要由输入层、隐藏层和输出层构成。本文实现了一个通用MLP网络&#xff0c;包括以下功能&#xff1a; 根据输入的特征数、类别数、各隐藏层神经…

以简单的例子从头开始建spring boot web多模块项目(五)-thymeleaf引擎

继续向里面加&#xff0c;这次是引入thymeleaf渲染引擎。 使用这个引擎的很多&#xff0c;主要是以下几个优点&#xff1a; Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎。Thymeleaf的主要目标是为您的开发工作流程带来优雅的自然模板 -HTML可以在浏览器中正确显…

Vue3加vite使用Cesium绘制图形

Vue3加vite使用Cesium绘制图形 1、项目开发准备 Node版本&#xff1a;16.20.2 1.1创建一个新的工程&#xff1a;my-cesium-app npm create vitelatest my-cesium-app – --template vue1.2 安装Element Plus npm install element-plus --save // main.js import ElementPl…

【STM32】看门狗

看门狗&#xff0c;还没有别的地方用上&#xff0c;暂时还不清楚在实际应用中最多的场景是什么&#xff0c;我感觉是用来强制重启系统。 大部分图片来源&#xff1a;正点原子HAL库教程 专栏目录&#xff1a;记录自己的嵌入式学习之路-CSDN博客 目录 1 应用场景 1.1 解决…

Langchain Memory组件深度剖析:从对话基础到高级链式应用

文章目录 前言一、Langchain memory 记忆1.Memory 组件基本介绍2.Memory 组件的类型1.ChatMessageHistory2.ConversationBufferMemory3.ConversationBufferWindowMemory4.ConversationEntityMemory5.ConversationKGMemory6.ConversationSummaryMemory 二、长时记忆1.简单介绍2.…

解决ubuntu22.04无法识别CH340/CH341和vscode espidf插件无法选择串口设备节点问题

文章目录 解决ubuntu22.04无法识别CH340/CH341和vscode espidf插件无法选择串口设备节点问题不识别CH340/CH341报错解决办法升级驱动编译安装 卸载brltty程序 vscode espidf插件无法选择串口设备节点问题解决办法编译安装 解决ubuntu22.04无法识别CH340/CH341和vscode espidf插…

C#开发中ImageComboBox控件数据源实时变换

在C#开发中&#xff0c;我们如何将控件的数据源实时变换&#xff0c;当然我们可以在窗口实例化的时候指定固定的数据源&#xff0c;但是这样对于用户来说数据源永远固定&#xff0c;并不利于我们对于用户的数据存储&#xff0c;优化用户的操作&#xff0c;遇到这种问题&#xf…

Flutter ListView滑动

在Flutter中&#xff0c;ScrollController可以精确地控制和管理滚动行为。通过ScrollController&#xff0c;可以监听滚动的位置、速度&#xff0c;甚至可以在用户滚动时触发自定义的动作。此外&#xff0c;ScrollController还提供了对滚动位置的直接控制&#xff0c;可以编程地…

DRF——请求的封装与版本管理

文章目录 django restframework1. 快速上手2. 请求数据的封装3. 版本管理3.1 URL的GET参数传递&#xff08;*&#xff09;3.2 URL路径传递&#xff08;*&#xff09;3.3 请求头传递3.4 二级域名传递3.5 路由的namespace传递 小结 django restframework 快速上手请求的封装版本…

科大讯飞刘聪:大模型加持,人形机器人将跨越三大瓶颈

2024年&#xff0c;AI大模型成为机器人产业新的加速器。 今年3月&#xff0c;ChatGPT4加持的机器人Figure01向外界展示了大模型赋能人形机器人的巨大潜力。Figure01能理解周围环境&#xff0c;流畅地与人类交谈&#xff0c;理解人类的需求并完成具体行动&#xff0c;包括给人类…

虚幻5|AI视力系统,听力系统,预测系统(2)听力系统

虚幻5|AI视力系统&#xff0c;听力系统&#xff0c;预测系统&#xff08;1&#xff09;视力系统-CSDN博客 一&#xff0c;把之前的听力系统&#xff0c;折叠成函数&#xff0c;复制粘贴一份改名为听力系统 1.小个体修改如下&#xff0c;把之前的视力系统改成听力系统 2.整体修…

隐私指纹浏览器产品系列 —— 浏览器指纹 中(三)

1.引言 在上一篇文章中&#xff0c;我们聊到了最老牌的浏览器指纹检测站——BrowserLeaks。BrowserLeaks曾经是浏览器指纹检测的权威&#xff0c;但它似乎更像是一本老旧的工具书&#xff0c;只能呆板告诉你浏览器的指纹值&#xff0c;并对比不同浏览器的指纹差异。 今天&…

C语言 之 浮点数在内存中的存储 详细讲解

文章目录 浮点数浮点数的存储浮点数的存储浮点数的读取例题 浮点数 常见的浮点数&#xff1a;3.14159、1E10&#xff08;表示1*10^10&#xff09;等 浮点数家族包括&#xff1a; float、double、long double 类型。 浮点数表示的范围在float.h 中有定义 浮点数的存储 浮点数…

C++研发笔记1——github注册文档

1、第一步&#xff1a;登录网站 GitHub: Let’s build from here GitHub 最新跳转页面如下&#xff1a; 2、选择“sign up”进行注册&#xff0c;并填写设置账户信息 3、创建账户成功之后需要进行再次登录 4、根据实际情况填写个人状态信息 登录完成后页面网站&#xff1a; 5…

手写SpringAOP

一、非注解式简易版AOP 整体流程 1.1 代码 public class Test {public static void main(String[] args){// Aop代理工厂DefaultAopProxyFactory factory new DefaultAopProxyFactory();// 测试对象AOPDemoImpl demo new AOPDemoImpl();// 支撑类&#xff1a;用于存放目标…

配置策略路由实战 附带基础网络知识

背景 作为一个软件开发人员&#xff0c;不可能做到只负责业务开发工作&#xff0c;一旦功能上线或者系统切换就会遇到非常多考验开发人员个人能力的场景&#xff0c;网络调整就是非常重要的一个方面&#xff0c;如果你在系统上线的过程中无法处理一些简单的网络问题或者听不懂…

文件包含漏洞(1)

目录 PHP伪协议 php://input Example 1&#xff1a; 造成任意代码执行 Example 2&#xff1a; 文件内容绕过 php://filer zip:// PHP伪协议 php://input Example 1&#xff1a; 造成任意代码执行 搭建环境 <meta charset"utf8"> <?php error_repo…

Modern C++——不准确“类型声明”引发的非必要性能损耗

大纲 案例代码地址 C是一种强类型语言。我们在编码时就需要明确指出每个变量的类型&#xff0c;进而让编译器可以正确的编译。看似C编译器比其他弱类型语言的编译器要死板&#xff0c;实则它也做了很多“隐藏”的操作。它会在尝试针对一些非预期类型进行相应转换&#xff0c;以…

QT Quick QML 网络助手——TCP客户端

GitHub 源码: QmlLearningPro &#xff0c;选择子工程 Nettools.pro QML 其它文章请点击这里: QT QUICK QML 学习笔记 ● 运行效果&#xff1a; 左侧为常用的网络调试工具&#xff0c;右侧为本项目 UI 效果&#xff0c;前端使用 QML &#xff0c;后端使用C &#xff…