Skip to content

Latest commit

 

History

History
143 lines (108 loc) · 6.93 KB

engineering.md

File metadata and controls

143 lines (108 loc) · 6.93 KB

前端工程化建设

随着浏览器和前端技术的发展,现在的前端项目越来越大、业务也越来越复杂,前端工程化已经成为一件势在必行的事情。

前端工程化其实就是软件工程在前端方向上的实施,不过篇幅有限,本文只讲解其中的几个点。

团队规范

如果前端团队只有一两个人,规范的作用微乎其微;但团队人数超过一定数量时,规范的作用就显现出来了。举个例子,拿代码风格规范来说,有些人喜欢用两个空格缩进,有些人喜欢用四个空格缩进,如果这两个人合作写一个项目,即使嘴上不说,心里也会相互吐槽。所以统一规范是非常有必要的,在制定规范前,大家可以相互讨论,提意见;规范制定后,所有人都得遵守,强制执行。

本文说的规范主要包括以下几种:

  • 代码规范
  • UI 规范
  • 项目结构规范
  • git commit 规范

代码规范

代码规范的好处

  • 规范的代码可以促进团队合作
  • 规范的代码可以降低维护成本
  • 规范的代码有助于代码审查
  • 养成代码规范的习惯,有助于程序员自身的成长

每个程序员都不喜欢修改别人的代码,无论代码好坏,因为第一眼看上去没有熟悉感,下意识就会排斥。

所以当团队的成员都严格按照代码规范来写代码时,可以保证每个人的代码看起来都像是一个人写的,看别人的代码就像是在看自己的代码。

重要的是我们能够认识到规范的重要性,并坚持规范的开发习惯。

UI 规范

UI 规范需要前端、UI、产品沟通,互相商量,最后制定下来,建议使用统一的 UI 组件库。

制定 UI 规范的好处:

  • 统一页面 UI 标准,节省 UI 设计时间
  • 提高前端开发效率

项目结构规范

项目结构规范包括文件命名、文件目录组织方式,用 Vue 项目举个例子。

├─public
├─src
├─tests

一个项目包含 public(公共资源,不会被 webpack 处理)、src(源码)、tests(测试),其中 src 目录,又可以细分。

├─api (接口)
├─assets (静态资源)
├─components (公共组件)
├─styles (公共样式)
├─router (路由)
├─store (vuex)
├─utils (工具函数)
└─views (页面)

每个前端团队的项目命名及组织方式都可能不一样,以上仅提供参考。

git commit 规范

良好的 git commit 规范,让人只看描述就能明白这个 commit 是干什么的,提高解决 BUG 的效率。

推荐阅读: git commit 提交规范

其他规范

除了上述几个规范,还有:

  • 前后端接口规范
  • 文档规范
  • 代码分支规范 ...

由于篇幅有限,并且研究不深,就只能到这了。

执行

规范制定下来了,如何保证执行?

基本上都得靠代码审查以及测试人员测试,不过代码规范有一个工具能用得上,那就是 vscode + eslint 自动格式化代码。

推荐阅读: ESlint + VSCode自动格式化代码(2020)

性能优化

前端性能优化是一个老生常谈的问题,网上关于性能优化的文章与书籍也有很多。我之前还写过一篇关于 JavaScript 性能优化的文章

性能优化包括代码优化和非代码优化。

代码优化
  • 复用代码
  • 避免全局变量
  • 使用事件委托
  • 使用Object/Array字面量
  • 位操作在JavaScript中性能非常快,可以使用位运算来代替纯数学操作 ...
非代码优化
  • 减少HTTP请求次数
  • 使用CDN
  • 使用缓存
  • 压缩资源
  • css 放头部,js 放底部
  • 减少 DOM 操作 ...

推荐阅读:

测试

测试是前端工程化建设必不可少的一部分,它的作用就是找出 bug,越早发现 bug,所需要付出的成本就越低。

在前端测试中,单元测试和集成测试一般用得比较多,工具也有很多,例如 Karma + Mocha + PhantomJS / Chai 等。

但是自动化测试工具可以说几乎没有,因为 UI 界面自动化测试太难了,目前只能靠人工测试。

构建、部署

得益于 node 和 webpack 的发展,自动化构建不再是梦。通过 webpack 以及相关配置,一行命令就可以做到下列所有事情:

  • 代码检查
  • 单元测试、集成测试
  • 语言编译
  • 依赖分析、打包、替换等
  • 代码压缩、图片压缩等

自动化部署通过 Jenkins、Docker 等工具也可以很方便的实现。

推荐阅读:yumminhuang-如何理解持续集成、持续交付、持续部署?

性能和错误监控

性能监控 前端页面性能是一个非常核心的用户体验指标,影响到了用户的留存率,如果一个页面性能太差,用户等待时间过长,很有可能就直接离开了。

错误监控 因为测试永远无法做到100%覆盖,用户也不会总是按照我们所预期的进行操作,因此当生产环境出现 bug 时,需要对其进行收集。

监控是前端工程化建设中的最后一环,当项目上线后,通过监控系统可以了解到项目在生产环境中的运行情况,开发团队可以根据监控报告对项目做进一步的调整和优化。

目前市面上有大量成熟的监控产品可以使用,对于没有精力开发监控系统的团队来说,可以算是一个好消息。此前我还针对监控系统进行了一番调查和研究, 并写了一篇文章,对监控系统原理有兴趣的可以看一下,前端性能和错误监控