前端工程化

一、前端发展阶段概述

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

相关推荐
计算机-秋大田6 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml417 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf20 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot
虞泽3 天前
鸢尾博客项目开源
java·spring boot·vue·vue3·博客
工业互联网专业3 天前
Python毕业设计选题:基于django+vue的4S店客户管理系统
python·django·vue·毕业设计·源码·课程设计
麦麦大数据3 天前
vue+django+neo4j航班智能问答知识图谱可视化系统
django·vue·echarts·neo4j·智能问答·ltp·航班