前端工程化

一、前端发展阶段概述

1、混沌期

整个江湖中只有一个传奇,就是"程序员"

  • 这种模式下对人员的综合要求高,开发者既要会数据库开发(SQL)、又要会服务器端开发(Java、C#、Php),还要会基本的前端开发(HTML、CSS、JS)。
  • 初期以客户端应用为主,后期随着web应用的发展,对界面交互和页面端开发的需求日益旺盛,对人员职责划分的需求日渐迫切。

2、过渡阶段(觉醒)

  • 随着页面特效和用户体验的需求上升,专注CSS样式和JS脚本的前端开发脱颖而出
  • 伴随着人员职责分离,架构也发生变化了,常见的就是后端开发+前端开发(偏静态)

3、前后端分离(发展)

分工协作是社会发展的必然选择。

  • 前端人员重心为页面开发(Html+CSS+JavaScript),对js的要求上升,也称大前端,弱化复杂业务逻辑后端人员重心转到业务逻辑处理与数据性能处理,不再关心前端界面的呈现
  • 服务的分离,代码管理,服务部署也都独立出来分别管理,系统的灵活性也获得了极大的提升。
  • 前端选用 node 服务器,后端选用 Java、C#、Php 等结构化语言

4、前端工程化(规范期)

从传统的手写页面的认知阶段走到工程化的世界,是跨越性。

  • 前端工程化是把软件工程相关的方法和思想应用到前端开发中,覆盖从代码编码到部署的整个周期,包含:编码、构建、打包、集成,测试和部署全流程。
    前端工程化的出现要感谢Node的发布。
  • 此阶段的前端,不局限于代码开发,还要对服务器、容器、Nginx等有一定的了解,除了不直接操作数据库外,与后端开发并无实质性区别。

二、前端工程化

1、什么是前端工程化?

规范化、标准化、组件化、自动化

  • 前端工程化是指使用软件工程的技术和方法,对前端开发流程、技术、工具、经验等进行规范化、标准化,以提高开发效率、降低开发成本,让前端开发能够"自成体系"。
  • 前端工程化主要包括四个方面:模块化、组件化、规范化、自动化。其目的是为了让前端开发更加高效、有序、可重复,便于团队协作和管理,同时也能更好地与后端进行集成和交互。

2、前端工程化的四个方面

  • 模块化:将前端代码拆分成多个独立的模块,每个模块负责一部分功能,这样可以降低代码的耦合性,提高代码的可维护性和可复用性。模块化的主要应用包括ES6的模块化语法、Webpack的模块化打包等。
  • 组件化:将页面拆分成多个独立的组件,每个组件包含模板、样式和逻辑,这样可以提高代码的复用性和可维护性,降低项目的复杂度。组件化的主要应用包括React、Vue等前端框架。
  • 规范化:制定一套统一的编码规范和标准,包括HTML、CSS、JavaScript等,这样可以保证代码风格的一致性,提高团队协作的效率。规范化的应用包括制定统一的代码规范、目录结构、命名规则等。
  • 自动化:通过自动化工具和流程,减少重复的手动操作,提高开发效率。自动化的应用包括自动化构建、自动化测试、自动化部署等。

通过前端工程化,可以实现开发流程的优化和规范化,提高开发效率和代码质量,降低项目的维护成本。同时,前端工程化还可以提高团队协作的效率,减少沟通成本,让前端开发更加有序、高效。

3 、工程化的优势

  • 引入了模块化和包的概念,作用域隔离,解决了代码冲突的问题
  • 按需导出和导入机制,让编码过程更容易定位问题
  • 自动化的代码检测流程,有问题的代码在开发过程中就可以被发现
  • 编译打包机制可以让使用开发效率更高的编码方式,比如 Vue 组件、 CSS 的各种预处理器
  • 引入了代码兼容处理的方案( Babel),可以让自由使用更先进的 JavaScript 语句,而无需顾忌浏览器兼容性,因为最终会帮转换为浏览器兼容的实现版本

4、团队协作的优势

  • 统一的目录结构
  • 统一的代码风格
  • 可复用的模块和组件
  • 代码健壮性保障(TS类型约束及面向对象语法的支持)
  • 代码质量保障(EsLint+Prettier)
    代码风格及语法检测,变量及函数规范检测,减少编码错误,提高代码质量
  • 自动化(配置CI/CD完成自动化流水线)

5、开发、集成、部署的自动化

CI/CD 的核心概念是持续集成、持续交付和持续部署。它的底层逻辑是稳定的运行环境,高效的集成机制,快速的部署与响应。它需要开发与运营团队共同完成。

相关推荐
Backstroke fish9 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小曲程序9 小时前
vue3 封装request请求
java·前端·typescript·vue
Lysun00110 小时前
[less] Operation on an invalid type
前端·vue·less·sass·scss
程序视点17 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
刚刚好ā18 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
ZwaterZ21 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
ZwaterZ1 天前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
木子七1 天前
vue2-vuex
前端·vue
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
Ztiddler1 天前
【npm设置代理-解决npm网络连接error network失败问题】
前端·后端·npm·node.js·vue