聊一下前端工程化

前言

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

首先我抱有的但愿很大(人才嘛谁能不爱..)
而后呢通过交流探讨给我带来更多的反馈是失望。固然这个领域是`非主流前端领域`。
可是我的以为仍是颇有趣味并且有必要进行学习的;因此今天笔者简单的聊一下前端工程化,但愿能给你们带来帮助。

回顾一下前端发展史

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

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来讲在日益发展背景下光标准就几百页;谁能记得过来。要学会培养本身语言外的工程能力,架构能力。。加油~ 有任何须要交流的随时留言。