工程
要理解前端工程化,首先要清晰工程的定义。而前端工程中的工程化其实是属于软件工程化,何为软件工程,百度百科是这样说的:“软件工程是研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件”。 其中工程的三个特性:
- 系统性
- 规范化
- 可定量
目前前端项目已经满足这三种特性,后面我们一一介绍。
那么工程的产物就是产品,而产品的特性就是:
- 功能性
- 可靠性
- 可用性
- 效率
- 可维护性
- 可移植性
前端工程化
接下来我们要开始说一下前端工程化,先说一下前端的发展史(纯个人观点)。
阶段一:静态模板
技术栈:css + html + php
前期的前端主要是负责页面开发、样式调整,把写好的页面给到后端php,php再根据业务逻辑去动态化页面逻辑。优势就是前端只需要关心页面样式,业务逻辑都交给后台处理,这个时修并不涉及到seo等问题;缺点就是开发效率低,偶合性高,沟通成本高,需要两边人员同时去维护一个模块。
阶段二:jquery 等工具库的出现, 让前端开发更简单。
技术栈: css + html + jquery/swiper + php/java
随着前端的发展开始出现类似于jquery等等的工具库,让开发更简单,封装大量的工具库,让前端更高效。这个时候也开始出现前后端分离式开发,优势就是前端开发更高效,独立维护自己的模块,后端也可以专注于自己负责的模块。
队段三:进入完全前后端分离式开发 前端工程化
技术栈: 前端框架 + UI框架 + 后台
至今,前端框架逐渐成熟,我们开发不仅仅只关心页面功能以及样式这样简单的问题,更多的时候我们关心的更多,比如:如何让开发更高效、如何进行页面优化、如何做seo、如何管理项目、如何让代码更加规范化。。。,这个前端项目就已经工程化了。
这时候的前端项目就已经符合工程的三个特性,那我们如何做好前端工程:
- 选择开发框架,根据当前的业务需求与业务场景。(目前比流行的框架(vue/react/angular))
- 选择UI框架,还是根据当前的业务需求与业务场景。(比如说像已管理后台的项目就可以用antdesign或是element).
- 选择代码管理工具(git)
- 选择项目构建工具(jenkins / gitlab CI/CD),集成测试,集成部署
队段四:前端走向全栈化
技术栈: 前端框架 + UI框架 + 中间层 + node.js
这时候前端就像一个成年意气风发的孩子,在各个领域中翩翩起舞并且婀娜多姿。
这个孩子不仅仅在移动端浏览器得瑟了,他还去了微信小程序,百度小程序等等各种小程序,最后还是耐不住寂寞盯上了原生app, 那就是 flutter,凭着和dart亲密的关系,我们可以搞定的,当然还有electron,桌面应用,不难能开发桌面应用,还能把html打包成桌面应用,棒棒哒。
说的有点题外话,现在的前端不仅要懂 html、css、css3 、js 这么简单了 ,我们要开始进化了,我们还要懂前端性能优化、服务器渲染、构建部署、代码规范、高并发、后台开发、数据库。。。。。。。
学无止镜呀, 各位大佬们,且行且珍惜吧