前端工程化建设大纲

前端建设

• 1、前端规范 Standrad
• 2、前端文档 Document
• 3、前端项目模板 Templates
• 4、前端脚手架 CLI
• 5、前端组件库 UI Design
• 6、前端工具库 Hooks Utils
• 7、前端工具自动化 Tools
• 8、接口数据聚合 BFF
• 9、前端自动化构建部署 CI CD
• 10、前端全链路监控or数据埋点系统
• 11、前端可视化平台
• 12、前端性能优化
• 13、低代码平台
• 14、前端ssr推进
• 15、前端响应式or自适应
• 16、微前端

1、前端规范 Standrad

• 前端规范
  • 命名规范
    • 文件/文件夹命名规范
    • 编码命名规范
  • 目录构建规范
    • VUE目录规范
    • NUXT目录规范
    • 其他
  • 编程规范
    • Html CSS Javascript Typescript Vue 等
    • 工具自动化
      • EsLint
      • prettier
      • StyleLint
    • 注意，优先使用自动化工具
  • Git规范
    • Git分支命名规范
    • Git分支保留规范
    • Git Commit规范
    • EsLint 校验
    • StyleLint校验
    • 繁简体校验
  • CR规范（Code Review ）
    • CR审核人
    • CR基本规范
    • CR内容定义
  • BFF研发规范
    • 前后端协作规范
  • 设计规范
    • 通用组件规范
    • 通用样式规范
    • 常见交互规范
  • 测试规范
    • 主要争对组件库，工具库的单元测试
  • 其他规范
    • 技术栈规范
      • 编程语言 Javascript TypeScript
      • UI框架及其配套生态
      • 项目构建工作流webPack Vite
      • 包管理器 npm yarn pnpm
    • 浏览器支持规范
    • IDE编辑器规范
    • 本地开发环境规范
      • Node版本管理（nvm）
      • Npm源管理（nrm）
    • 私服规范

2、文档

前端文档

• 新人文档
  • 公司介绍
  • 业务介绍
  • 团队介绍
  • 流程介绍
  • 等等其他…
• 技术文档
• 业务文档
• 项目文档
  • 新项目文档
  • 旧项目文档
• 计划文档
  • 月计划
  • 季度计划
  • 年度计划
• 技术分享交流会文档

3、项目模板

• 项目模板
  • Vue项目模板
    • Vue2项目模板
    • Vue3项目模板
  • 小程序项目模板
  • Nuxt项目模板
  • 微前端项目模板
  • BFF项目模板 
  • 管理后台项目模板
  • Node.js项目模板
  • 其他模板

4、脚手架（CLI）

• 前端脚手架
  • 快速创建项目
  • 代码规范
  • mock数据
  • 集合微前端
  • commit hook
  • 自动化部署
  • 集合工具函数、hooks等
  • 插件
  • demo模板快速上手
  • 持续建设中…

5、组件库

• 组件库
  • icon图标
  • Button按钮
  • Input输入框
  • CheckBox复选框
  • Radio单选框
  • Select选择器
  • Breadcrumb面包屑
  • Dropdown下拉菜单
  • Message消息提示
  • Toast提示
  • Modal对话框
  • Loading加载
  • 持续开发中…

6、响应式设计 or 自适应设计

• 屏幕兼容方案
  • 响应式设计
    • 同一个页面改变布局
    • 一套代码提升研发效率
    • 不同分辨率设备灵活性强
    • 快速适配多端
  • 自适应设计
    • 性能相对好
    • 开发多个页面，直接切换页面
    • 设计与体验较好

7、前端工具库（类 Hooks / Utils）

• 工具库
  • Query参数解析
  • Device设备解析
  • 环境区分
  • Local Storage封装
  • Day日期时间封装
  • Thousands千分位格式化
  • Debounce防抖
  • Throttle节流
  • Array数组去重
  • Array数组扁平化
  • Array排序
  • Array过滤
  • Array转Tree
  • 类型判断
  • 持续开发中…

8、工具自动化（Tools）

• 自动化工具
  • Eslint/Prettier自动化
  • StyleLint自动化
  • Git commit自动化
  • 其他自动化（建设中）

9、接口数据聚合（BFF）

• 聚合 API，释放后端；

• 解耦合各个业务；

• 后端微服务引入；

• 易维护和修改 API；

• 更好的安全性；

• 更好的前端错误处理；

• Backend For Froneted

  • 概念
    • 服务于前端的后端，也可以理解为面向前端的后端模式
    • 实际上只是一直逻辑分层，并部署一种技术，一般是node server（nestJs）
  • 应用
    • 第三方入口
    • 应用缓存
    • 访问控制
  • 优缺点
    • 优点
      • 业务更清晰
      • 给后端更清晰的服务边界
      • 开发可以自mock数据，更适配前端框架
      • 前后端彻底分离，就算后端迁移微服务，对前端无影响
    • 缺点
      • 中间层转发可能有延迟
      • 增加部分的开发成本
      • 必须随时准备好后端的异常请求
      • 必须保证端到端的测试
  • 解决问题
    • 多端应用会区别处理
    • 前端更聚焦所需要的数据，不需要关注提供数据的服务

10、SSR

• 前后端分离；
• 首屏加载速度快；
• 利于 SEO；

11、自动化构建部署（CI/CD）

• CI/CD
  • git自动触发
  • 灵活配置
  • 格式检查
  • 文件资源压缩
  • 重名文件替换/备份问题
  • 缓存问题
  • 用户无感知刷新
  • 安全性保证
  • 分布式部署
  • 快速回滚
  • 其他（建设中…）

12、前端监控/数据埋点系统

前端监控/数据埋点的目的是：

• 实现精准的点对点营销；
• 可以做相关的分类统计；
• 为用户画像的构建提供数据支持；
• 指导产品研发以及优化用户体验；

前端监控/数据埋点有哪些数据？

• 行为数据：时间、地点、人物、交互、交互的内容；
• 质量数据：浏览器加载情况、错误异常等；
• 环境数据：浏览器相关的元数据以及地理、运营商等；
• 运营数据：PV、UV、转化率、留存率（很直观的数据）；

13、前端可视化平台

• 可视化平台
  • 数据监控/埋点
  • 日志系统
  • 仓库系统
  • 项目搭建系统
  • 性能检测系统
  • 权限系统
  • 运维系统
  • 环境系统
  • 博客系统
  • 其他…

14、性能优化

• 性能优化
  • 编码规范层
    • CSS放在头部
    • CSS选择器优化
    • JS变量问题
    • JS事件委托
    • Web Worker
    • 字体图标
    • 其他…
  • 网络资源层
    • 减少HTTP请求
    • 使用HTTP2
    • CDN使用
    • 缓存使用
    • gzip
    • 其他…
  • 渲染层
    • 懒加载
    • CSS重绘重排问题
    • 雪碧图
    • GPU渲染
    • SSR使用
    • 其他…
  • 打包构建层
    • tree shaking
    • split chunks
    • 拆包
    • 其他…

15、前端低代码平台搭建

/

• 降低开发成本；
• 所见即所得；
• 一站式研发；
• 技术收敛；
• 专业门槛低；
• 对新人友好，上手快；

16、微前端（Micro App）

• 技术上的灵活选择；
• 更快的且独立的部署；
• 团队代码的相互隔离；
• 并行开发和团队的自治；
• 项目的增量升级；