当前分为以下四个阶段

第一阶段：库/框架选型（暂定react）


第二阶段：1.简单构建优化
                  2.NPM管理包
                  3.node+webpack打包
第三阶段：JS、CSS模块化开发


第四阶段：组件化开发
  开发过程当中注意：前端安全XSS CSRF攻击等 后期文章中将讲述如何处理
尽管web应用复杂程序与日俱增，用户对其前端界面也提出更高的要求，但时至今日仍然没有多少前端开发者会从软件工程的解度去思考前端开发，来助力团队的开发效率，以下我们使用以上说明的四个阶段来完成基本的前端项目开发流程及技术选型

第一阶段:库/框架选型
使用react框架实现，基本上现在没有人完全从0开始做网站了。React框架，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

React特点

1 声明式设计—React采用声明范式，可以轻松描述应用
2高效—React通过对DOM的模拟，最大限度地减少与DOM的交互
3灵活—React可以与已知的库或框架很好的配合
4 JSX —JSX是javascript语法的扩展，React开发不一定使用JSX，但我们建议使用它
5组件—通过React构建组件，使用代码更加容易得到复用，能够很好的应用在大项目的开发中。
6单向响应的数据流—React实现单向响应的数据，从而减少重复代码，这也是它为什么比传统的数据绑定更简单

React单向数据流：在React中，数据的流向是单向的—从父节点传递到子节点。因为组件是简单而且易于把握的，他们只需要从父节点获取props渲染即可，如果顶层组件的某个prop改变了，React会递归的向在便利整个组件树，重新渲染所以使用这个属性的组件


第二阶段：简单构建优化
由于我们当前技术选择为react解决了开发效率问题 ，但是必须要兼顾运行性能。前端工程进行到第二阶段我们将选一种构建工具，对代码进行压缩、校验，之后再以页面为单位进行简单的资源合并。
构建工具
node ：5.0.0+
npm： 3.0.0
webpack :^2.3.2
react ：^15.5.4
react-dom ：^15.5.4
react-router:^2+暂时不使用3.0+因为3.0以上版本路由写法完全不同
至于其它插件将在项目中体现

第三阶段JS/CSS模块化

JS模块化—JS模块化方案很多如AMD/CommonJS/ES6 Module
我们当前使用webpack按需加载react
reqiure.ensure
基本使用
require.ensure(dependencies,callback,chunkName)
例如
const Index=(nextState,cb)=>{
require.ensure([],require=>{
cb(null,require(‘../pages/index/Index’).default)
},’Index’)
}

在路由中使用getComponent

CSS模块化：使用less。具体说明将在第四阶段组件化中详细说明

第四阶段：组件化开发与资源管理

1、页面上的每个独立的可视。可交互区域视为作一个组件;
2、每个组件对应一个工程目录，组件所需的各种资源(JS、Image、CSS)都在这个目录下就近维护;
3、由于组件具有独立性，因此组件与组件之间可以，自由组合;
4、页面只不过是组件的容器，负责组合组件形成功能完整的界面;
5、当不需要某个组件或者想要替换组件时，可以整个目录删除/替换
---------------------

注：每二项中就近维护原则是工程化的体现。每个开发者都清楚知道，自己所开发维护的功能模块。因为代码必须存在于对应的组件目录，当前目录包函 CSS、JS、HTML、Image

当前分为以下四个阶段

第一阶段：库/框架选型（暂定react）


第二阶段：1.简单构建优化
                  2.NPM管理包
                  3.node+webpack打包
第三阶段：JS、CSS模块化开发


第四阶段：组件化开发
  开发过程当中注意：前端安全XSS CSRF攻击等 后期文章中将讲述如何处理
尽管web应用复杂程序与日俱增，用户对其前端界面也提出更高的要求，但时至今日仍然没有多少前端开发者会从软件工程的解度去思考前端开发，来助力团队的开发效率，以下我们使用以上说明的四个阶段来完成基本的前端项目开发流程及技术选型

第一阶段:库/框架选型
使用react框架实现，基本上现在没有人完全从0开始做网站了。React框架，解放了不少生产力，合理的技术选型可以为项目节省许多工程量这点毋庸置疑。

React特点

1 声明式设计—React采用声明范式，可以轻松描述应用
2高效—React通过对DOM的模拟，最大限度地减少与DOM的交互
3灵活—React可以与已知的库或框架很好的配合
4 JSX —JSX是javascript语法的扩展，React开发不一定使用JSX，但我们建议使用它
5组件—通过React构建组件，使用代码更加容易得到复用，能够很好的应用在大项目的开发中。
6单向响应的数据流—React实现单向响应的数据，从而减少重复代码，这也是它为什么比传统的数据绑定更简单

React单向数据流：在React中，数据的流向是单向的—从父节点传递到子节点。因为组件是简单而且易于把握的，他们只需要从父节点获取props渲染即可，如果顶层组件的某个prop改变了，React会递归的向在便利整个组件树，重新渲染所以使用这个属性的组件


第二阶段：简单构建优化
由于我们当前技术选择为react解决了开发效率问题 ，但是必须要兼顾运行性能。前端工程进行到第二阶段我们将选一种构建工具，对代码进行压缩、校验，之后再以页面为单位进行简单的资源合并。
构建工具
node ：5.0.0+
npm： 3.0.0
webpack :^2.3.2
react ：^15.5.4
react-dom ：^15.5.4
react-router:^2+暂时不使用3.0+因为3.0以上版本路由写法完全不同
至于其它插件将在项目中体现

第三阶段JS/CSS模块化

JS模块化—JS模块化方案很多如AMD/CommonJS/ES6 Module
我们当前使用webpack按需加载react
reqiure.ensure
基本使用
require.ensure(dependencies,callback,chunkName)
例如
const Index=(nextState,cb)=>{
require.ensure([],require=>{
cb(null,require(‘../pages/index/Index’).default)
},’Index’)
}

在路由中使用getComponent

CSS模块化：使用less。具体说明将在第四阶段组件化中详细说明

第四阶段：组件化开发与资源管理

1、页面上的每个独立的可视。可交互区域视为作一个组件;
2、每个组件对应一个工程目录，组件所需的各种资源(JS、Image、CSS)都在这个目录下就近维护;
3、由于组件具有独立性，因此组件与组件之间可以，自由组合;
4、页面只不过是组件的容器，负责组合组件形成功能完整的界面;
5、当不需要某个组件或者想要替换组件时，可以整个目录删除/替换
---------------------

注：每二项中就近维护原则是工程化的体现。每个开发者都清楚知道，自己所开发维护的功能模块。因为代码必须存在于对应的组件目录，当前目录包函 CSS、JS、HTML、Image