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