架构设计与技术选型

项目参数：
开发平台：Mac/Windows/Linux
架构模式：前后端完全分离、纯静态方式、分层架构模块化
模块化方案：CommonJs+Webpack
技术栈： Html+CSS +JQuery+React+Sass……
开发工具： Sublime,Chrome,Charles/Fiddler
版本控制工具：Git
项目发布方式： shell脚本自动化发布
代理工具： Charles/Fiddler
语言环境：JQuery,Webpack,Nodejs,Git
需要安装的软件：NodeJs,Sublime,Chrome,Charlse……

架构设计 -- 分层架构
定义：把功能相似，抽象级别相近的实现进行分层隔离
优势：松散耦合（易维护、易复用、易扩展）
常见分层方式： MVC MVVM

架构设计 -- 模块化
定义：解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程
意义：解耦，可并行开发
模块化方案：AMD CMD CommonJS ES6

AMD: require.js
CMD: sea.js
区别：加载和实际运用不太一样
模块化的代码和业务代码一起
commonjs 语法结构简单，语法和业务是分开的
es6 兼容性不好

                                架构设计

逻辑层 主模块
子模块 子模块 子模块
数据层 service 服务器

工具层 工具

技术选型：（挑出主流方案 从稳定性、扩展性、运行速度、开发效率、兼容性等方面综合考虑）
a. 软件过程：（瀑布、螺旋、敏捷开发） 敏捷开发
b. 前后端分离: 完全分离，纯静态的模式
c. 构建工具：webpack (模块化方案：commonJS+webpack)
d. 框架：
e. 版本控制：git
f. 发布方式：

软件过程选择 -- 敏捷开发
（适用于多变的开发需求）
定义：以用户的需求进化为核心，采用迭代、循环渐进的方法进行软件开发
是一种迭代的意识和方法，而不是概念和工具
优点：能够应对满足不断变化的需求
不足：对团队成员的能力要求比较高

前后端分离方式 -- 不分离
前后端共用同一套项目目录，甚至页面内嵌js、css
本地开发环境搭建成本高
共同维护成本高
发布风险高

前后端分离方式 -- 部分分离
后端负责页面模板（JSP/Velocity/Freemarker）
本地开发环境搭建成本较高
更新页面模板仍需后端协助，效率不够高
需要前后端同时发布

前后端分离方式 -- 完全分离1
方案1： velocity,发布的时候同步到后端
优点：完全分离，能直接生成动态的模板，利于SEO
缺点：系统复杂度高，需要前后端同时发布

前后端分离方式 -- 完全分离2
方案2：纯静态html，完全通过接口做数据交互
优点：完全脱离后端模板，系统复杂度低
缺点：不太利于SEO

框架选型：
jQuery Angular Avalon Vue React
Css Less Sass
用户端：求稳、用户类型多样、有SEO要求，多页应用（用户端技术不能一味的追求新技术而忽略用户群体）
管理系统：求快、用户类型单一、无SEO要求（管理人员针对公司内部的开发人员，考虑简洁快速）

构建工具：
grunt gulp webpack

版本控制工具：
svn git

发布方式：
发布过程：拉取待发布的代码 编译打包 发布到线上机器上
域名分布：
html www./admin.
js+css s.
images img.

总结：
软件过程：敏捷开发
前后端分离：完全分离、纯静态方式
模块化方案：CommonJs+Webpack
框架选择：用户端如：jQuery+css, 管理端：React+Sass
版本控制： git
发布过程： 拉取代码 --- 编译打包 --- 发布到线上辑器