前端开发工程化

随着时代的快速发展,为了提高效率,节约成本,前端工程化应运而生,我们一起来看看前端工程化具体是怎么实现的。

软件工程的定义

软件工程是一门学科:是一门研究如何利用“工程化”方法构建和维护高质量的软件系统的学科

软件工程的目标: 在指定成本和进度的前提下开发出具有可靠性、适用性、有效性,可维护性,可重用性,可移植性,满足用户需求的软件产品

软件工程的目的:通过系统化、规范化的方法或流程,来提高软件产品的质量和开发效率,减少维护的成本

前端开发工程化

什么是工程化?

“工程化”就是就利用适当的工具、方法或流程来提高系统构建的生产效率

工程化只是软件工程的一部分,其包含了多个主要的软件开发过程,如:编码、测试、部署、维护等

前端开发工程化

前端工程化

当今随着互联网技术的蓬勃发展,Web应用可以说无处不在,从最初的聊天室、论坛、门户网站,到如今的博客、电商平台到处都可见Web应用的身影。

前端开发的演化也从最初的以 Web Page 为主转变为以 Web App 为主的开发模式Web应用项目越来越庞大,用户交互也越来越复杂。

前端开发在 Web 应用系统中的的重要性不言而喻,那么:

如何提高前端开发的生产效率?
如何加快Web应用开发的迭代速度?
如何高效的进行多人协作开发?
如何确保前端项目的可维护性?

答案就是通过采用适当的前端工程化手段。
前端开发工程化

前端开发工程化的实现

前端开发自动化

现代化的前端应用开发是一个较为复杂的过程,其中包含了一系列的工程活动,项目脚手架的搭建、代码编写、源码压缩合并、语法检查、打包、部署、测试等。

如果每个活动都完成由手工完成,其效率必定非常低下,这时就需要通过适当的工具来自动化实现上述的部分活动过程。

项目自动构建:Webpack、Grunt、Gulp、Yeoman等

项目依赖管理:npm、Bower等

源码压缩及合并:minify、cssmin、uglify、concat等(通常要配合构建工具使用)

系统部署及测试:Jenkins

前端开发规范化

前端应用作为一个独立的项目进行设计和开发时,需要一套完整的规范对其进行约束和检查,如:

目录和文件的命令规范、代码编写规范、码版本管理规范

代码规范检查工具:ESLint、Stylelint、JSLint、JSHint、CSSLint、CSSHint 等

源码版本管理管理:Git、SVN

Airbnb 前端规范

https://github.com/airbnb/css

https://github.com/airbnb/javascriptGoogle

前端规范

https://github.com/google/styleguide

前端开发模块化

模块化是将一个大文件拆分成多个相互依赖的小文件,再进行统一的拼装和加载,文件拆分后进一步细化了每个文件的具体职责,同时更有利于多人协作开发。

包含JS的模块化、CSS模块化、资源模块化等。

前端开发组件化

页面上的每个独立的、可视/可交互区域视为一个组件:

前端开发工程化前端开发工程化

每个组件相对独立,页面是组件的容器,通过组件*组合形成功能完整的界面。

END
查看更多文章请关注【实训在线】微信公众号
原文首发:www.shixun.online