聊一下前端工程化

前言

最近呢筛选了很多候选人的简历,看到很多关于前端工程化的描述:
> "个人一直致力于前端工程化..."
> "在公司前端工程化规范,自动化..方面的建设做出了巨大改革..."
...

首先我抱有的希望很大(人才嘛谁能不爱..)
然后呢经过交流探讨给我带来更多的反馈是失望。当然这个领域是`非主流前端领域`。
但是个人觉得还是很有趣味而且有必要进行学习的;所以今天笔者简单的聊一下前端工程化,希望能给大家带来帮助。

回顾一下前端发展史

笔者为了照顾到不同时间段融入前端大家庭的读者,这边对于前端研发"方式"发展进行一个简单的回顾;回顾经历过几个阶段,从而了解"工程化"提出的必要性。

1. 前后端不分离的时代:那时候所谓的前端担任的工作更多是写页面。 然后还有就是通过一些技术(ASP,JSP...)将数据进行页面填充;涉及到这部分技术更偏向于后端，所以前端可能也不并会涉及到这部分工作。(当然也会有扯皮的时候,谁都不愿意干。。那就是看谁没话语权咯)
2. 前后端半分离时代: 在一部分工作俩边扯来扯去的背景下,就研究着如何进行前后端分离,方便更好的实现团队之间的协作分工。出来很多技术方案 比如在node发展的背景下出现 SSR(server side render) + Node的技术方案;就是服务端将处理好的html模板直接给到前端,前端负责展示。
3. 前后端逐步完全分离: 在各种技术的推进下慢慢出现了逐步前后端完全分离的各类架构方案例如RESTful架构;也就是双方通过协议(http/https/socket)进行调用进行通信数据传输。这样的话彼此的工作可能就不会有太多的扯皮。但是伴随还有一些问题,比如API的设计谁来定的问题,前端定义接口的话可能会更理想化(服务端那边呢有内部的一个大的技术架构服务比如跨集群这些,在这个背景下可能实现确实会比较困难 [也要帮后端兄弟说句话 哈哈.]);所以个人认为更多的是双方合理的讨论设计来进行推动。
4. ....

什么是前端工程化?

在研发技术方案的日益更新背景下。前端已经从"page开发工程师"逐步变成了"app研发工程师";前端的工作随着业务的复杂,用户的体验提升已经不是一个简单的工作了,面临着合作问题,性能问题等等...所以在模式转变下伴随着迎来很多问题:

1. 如何提供团队开发效率?
2. 如何提高项目研发质量?
3. 如何加强项目可维护性?
4. 如何引进更多的人才?
5. ...

为了解决出现的一系列问题就需要选取好的技术架构方案,推进前端工程化的落地。工程化大概包含几个方面呢?

1. 整体规范化

   • 编码规范:项目结构规范;html,js,css编码规范;命名规范;接口规范等等。
   • 协同规范:文档规范;资源管理规范;视觉|交互规范等等

2. 开发模式组件化

   • 模块组件化:公共css提取;公共js提取;公共资源提取等等
   • 技术组件化:base函数库组件化;公共page组件化等等
   • 业务型组件化:同类业务重叠功能组件化等等

3. 工具化&自动化

   • 研发工具化:资源加载整合
   • 自动化构建研发生成环境
   • 自动化部署,单元测试
   • 持续化集成...

4. 技术优化,性能优化,方案优化...

   • 技术优化 大前端的背景下 一定要技术革新进步 别还是冷兵器时代 Jquery一把梭; MVC MVVM的设计模式的优势相信大家都是不言而喻,那么为什么不选择进步呢。
   • 性能优化 2C的业务下这个是必然会经历的一个阶段,用户的体验越来越重要。考虑的不光是程序的实现还有用户的体验简单来说一个首屏加载的时间可能就会导致用户的流失。
   • 方案优化 这方面比如团队来说并不一定有机会推行工程化每一个细节的落地,强行推这个整体方向可能会适得其反;没有最好的只有最合适的。

工程能够解决什么?

下面通过一个简单的日常现象看一下能够帮我们解决什么问题.

首先在非工具化(webpack构建生成)的背景下很多研发人员都会遇到一个问题。每次项目部署的时候需要使用者(测试,产品,用户)去手动清理浏览器的缓存;这就是一个很头疼的问题;每次解释也挺累的。"静态资源要清下缓存..."那么如何从工程方面解决这个问题呢?

...
<link herf ="XXXX.css">
...
<script src="XXX.js">
....

如上代码看起来是没有什么问题 为什么程序需要每次去清理浏览器缓存呢。原因是现代浏览器为了性能,开支方面的考虑。解决资源加载问题做出了缓存机制 相同静态资源会做出本地的缓存。那么如何解决这个问题呢?很简单请看下面伪代码：

...
<link herf ="XXXX?+'new Date()'.css">
...
<script src="XXX?+'new Date()'+.js">
// 不能这样写哈 示意
....

很多细心的同学在构建工程生产打包的时候已经看到了比如webpack打包它的文件生成一般是"chunk" + hash + .js/css 就是和上面一个解决思路。但是又有问题了 如何决定每个文件到底需不需要进行缓存的问题来做性能优化呢? 比如一些图片啊这些就不需要每次重新载入多浪费带宽资源啊?这个问题留给大家思考一下。或者看一下webpack这些构建工具是如何解决的。

结束啦

前端工程化的必要性以及对于个人的成长是起到了很大的作用;相信大家都有了些许了解。

最后笔者认为大家有必要去学习一下。也能在简历上面显得不那么单调。很多人就只会写"精通各种语言,熟悉各种技术..."。哎呀这样只会让你的面试官更加的刁难你。每个语言设计者可能都不敢说自己对于每天在变新的语言每个细节都熟悉。比如就JavaScript来说在日益发展背景下光标准就几百页;谁能记得过来。要学会培养自己语言外的工程能力,架构能力。。加油~ 有任何需要交流的随时留言。