概述

web应用从本质上说就是一种运行在浏览器上的软件，而这些软件的图形化用户界面即为web前端。现如今，web应用更加的复杂，例如社交网络，购物平台，金融信贷等。这样的应用，动辄就是几十上百人一起开发并维护的，其前端界面的规模也极为庞大。与此同时，web应用面对的用户对于前端界面的要求也越来越多。因此，从软件工程化的角度去思考前端开发是大势所趋。

传统方式的不足和待解决的问题

以前，前端资源是按照页面或类似业务页面集合的形式进行组织。例如，manage.js对应着管理界面的交互；user.css对应着用户界面的样式，这种方式在很长一段时间内广泛使用。

存在的不足：

前端页面资源冗杂。页面功能越来越多，交互越来越复杂，前端代码量增多。直接导致为了使用一个js中某个函数，可能需要加载整个js文件，或者为了使用部分css样式，需要加载其依赖的整个css，这样无疑会增加请求，影响页面性能。
资源维护困难。js和css等资源是依赖于页面或者相似页面集合，它们之间的依赖关系也只能通过人来维护，容易出错，常出现删除某个页面但其相关的资源还存在的情况。
不利于单元测试。以页面为最小粒度进行资源整合，不同功能的业务模块相互影响，耦合度很高，不利于进行自动化单元测试。

工程化要解决的问题：

设计前端的架构
库/框架的选型
js/css模块化开发
组件化开发
静态资源智能化管理

前端工程化方案

前端架构

其中上有的React、Redux、ImmutableJs等框架为该架构的直接依赖。下游为Business Components业务组件和Bussiness Modules业务模块，衔接上下游的，是基础组件。

技术选型

场景	方案
开发语言	ES6+Jsx(React)
模块化CSS	Sass/Less
RemoteData	FetchAPI
Routing(路由)	react-router
I18n	gettext方案
编译打包	Babel+webpack
Lint	Eslint
UT(单元测试)	Mocha+chai+Sinon+Enzyme
Demo Server	Nodejs

JS/CSS模块化开发

模块化最核心的价值在于解决不同文件之间的分工和调用问题，及依赖关系。
JS模块化方案有ES6 Module、AMD、CommonJS等。
CSS模块化方案有less，Sass，stylus等预处理器。

组件化开发

页面上的每一个独立的可视/可交互的区域视为一个组件
每个组件对应一个工程目录，组件所需的静态资源就近维护。
组件具有独立性，组件之间自由组合。
页面是组件的容器，负责组合形成完整的界面。

名称	说明	举例
JS模块	独立的算法和数据单元	浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操作(dom)，工具函数(utils)，以及组件里的JS单元
CSS模块	独立的样式单元	栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元
UI组件	独立的可使/可交互单元	页头(header)，页尾(footer)，导航栏(nav)，搜索框(search)
页面	UI组件的容器	首页(index)，列表页(list)，用户管理(user)