胡诌前端工程化

384 阅读3分钟

工程

要理解前端工程化,首先要清晰工程的定义。而前端工程中的工程化其实是属于软件工程化,何为软件工程,百度百科是这样说的:“软件工程是研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件”。 其中工程的三个特性:

  • 系统性
  • 规范化
  • 可定量

目前前端项目已经满足这三种特性,后面我们一一介绍。

那么工程的产物就是产品,而产品的特性就是:

  • 功能性
  • 可靠性
  • 可用性
  • 效率
  • 可维护性
  • 可移植性

前端工程化

接下来我们要开始说一下前端工程化,先说一下前端的发展史(纯个人观点)。

阶段一:静态模板

技术栈: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 这么简单了 ,我们要开始进化了,我们还要懂前端性能优化、服务器渲染、构建部署、代码规范、高并发、后台开发、数据库。。。。。。。

学无止镜呀, 各位大佬们,且行且珍惜吧