前海人寿官方商城项目技术选型主要侧重于三个方面：
- 前端数据展现和后端逻辑分离，后端数据以数据API的方式提供
- 开发过程中的自动化构建，例如开发和产品环境分离，CSS 的预编译等
- 系统的高性能和可扩展性
基于以上侧重点，官方商城项目前端技术架构总结如下：
TODO: 说明图
标签: 前后端分离，自动化构建，高性能和可扩展性
Express 是托管在 Github 上基于 NodeJS 的 热门的开源 MVC 框架。依托长时间的开源社区积累，Express 已经成为 NodeJS 生态圈中非常成熟的开发框架。基于 NodeJS 平台在处理大量并发请求的优势，Express 框架的性能表现不俗，而且因为使用的是 JavaScript 语言，所以前后端代码复用性很强。
Express 在此架构中起到的是与其他系统 API 连接的作用，所以从前端架构角度来看，它是其中一个部分。这样一来，后端开发者（例如 Java 应用开发者）只用专注在业务逻辑和数据API。
相关文档链接：
- 官网 http://expressjs.com/
- 开源**社区 http://www.oschina.net/p/expressjs
- 淘宝前后端分离分析系列，共6篇 http://ued.taobao.org/blog/2014/04/full-stack-development-with-nodejs/
标签: 自动化构建，可扩展性
后端 Java 应用程序都会有成熟的依赖包管理，随着 NodeJS 的成熟和流行，前端 UI 依赖包可通过Bower 来管理，而后端的依赖包（NodeJS包）可以通过 NPM 来管理。
相关文档链接：
- Bower 官网 http://bower.io/
- NPM 官网 https://www.npmjs.org/
- 一个比较详细的 Bower 使用介绍 http://blog.fens.me/nodejs-bower-intro/
标签: 前后端分离，自动化构建
因为需要考虑到复用之前代码，目前系统中推荐使用 swig 作为页面模板，它带来了以下好处：
- HTML 代码可以直接进行复用
- 支持强大的模板继承和重载功能，有利于灵活地组织页面模板
相关文档链接：
- Swig on Github https://github.com/paularmstrong/swig/
- Swig 例子 https://github.com/paularmstrong/swig/tree/master/examples
标签: 自动化构建
Stylus 是目前在 NodeJS 平台上最好的 CSS 预编译语言，支持的功能包括：变量定义、Mixin、导入（import）、依赖（require）、CSS 按层级编写。
同时，Stylus 的代码容错性很强，编写起来速度很快，质量很高。在配合第三方帮助包使用时，扩展性表现不错。目前使用到的第三方帮助包有：
- nib 推荐使用一个常用的 Mixin 的集合，比如引入后可以不加浏览器前缀（比如
-webkit-..）的情况下使用 CSS3 的属性 https://visionmedia.github.io/nib/ - jeet 推荐使用一个通过属性定义而非类名（
class 属性为 span5）的方式来使用 Grid 栅格系统 http://jeet.gs/ - rupture 推荐使用 CSS3 响应式布局帮助类库 https://github.com/jenius/rupture
相关文档链接：
标签: 自动化构建
前端需要处理的任务愈来愈多，包括CSS的预编译、资源的拷贝、模板的预编译、开发环境和产品环境区分、打包上传、监听文件修改、运行测试等等，从而需要一种统一的方式来管理这些任务。Grunt 是目前用来管理和运行任务的工具中最好的一个，现有的任务包在 http://npmjs.org 上数不甚数。
使用 Grunt 可以帮助我们自由组合任务，从而来完善前端代码开发过程中的自动化。
相关文档链接：
- Grunt 官网 http://www.gruntjs.org/
- 现有的 Grunt Plugins 列表 http://www.gruntjs.org/plugins.html
标签：自动化构建
Livereload 顾名思义就是用来刷新页面的。当监听到配置好的文件有修改时，浏览器会自动的进行刷新。Livereload 只在开发模式下启用。
相关文档链接：
- 官网 http://livereload.com/
- on Github https://github.com/livereload
- 如何和 Express 做集成 https://github.com/intesso/connect-livereload#connectexpress-example
标签: 自动化构建，高性能和可扩展性
使用 npm start 可以开启开发模式，启用开发模式下的功能。同时，也可通过使用 grunt build 就可以把现有系统整理为产品模式，然后使用 NODE_ENV=production PORT=80 node bin/www。具体内容请参考下文“开发模式下运行”和“产品模式下运行”。
使用的是 grunt-contrib-clean 插件，在此架构中的目的是在每次构建之前，清空之前生成的过期资源，保证新的运行环境是干净的。
目前这个任务会清理 dev，public 和临时文件夹 .temp。
使用的是 grunt-contrib-concat 插件，用于合并生成产品模式下的 JS（.min.js） 和 CSS（.min.css） 文件。
css: {
files: {
'.temp/styles/index.min.css': '.temp/styles/**/*.css'
}
}
指的是 .temp/styles/ 文件夹下的所有 CSS 文件合并成一个文件叫做 index.min.css。
使用的是 grunt-contrib-cssmin 插件，用于最小化（minify）CSS 文件。一般用于 grunt concat 之后，这样合并之后的 CSS 代码就可以压缩到最小。
使用的是 grunt-contrib-uglify 插件，用于最小化（minify）和代码优化 JS 文件。一般用于 grunt concat 之后，这样合并之后的 JS 代码进行变量优化，从而文件可以被压缩到最小。
使用的是 grunt-contrib-stylus 插件，用于把 Stylus 文件编译为 CSS 文件。如果开启了文件监听 grunt watch ，此任务在文件修改的时候会自动更新为 CSS。
use: [
require('rupture'),
require('jeet'),
require('nib')
]
代码指的是，在编译 Stylus 为 CSS 代码时，会自动引入第三方的 rupture 和 jeet hunli的依赖包。
使用的是 grunt-contrib-watch 插件，用于开启文件监听，目前开始监听 styles/scripts/views 三个文件夹下的文件。开发模式下，当文件修改时，会触发 CSS 的重新编译和其他资源文件的准备。
使用的是 grunt-nodemon 插件。在默认情况下，NodeJS 的运行程序不支持动态的加载，所以在开发模式下需要 nodemon 来帮助我们在文件修改后，自动地重新启动服务。
使用的是 grunt-concurrent 插件。由于 Grunt 是穿行运行任务，当上一个任务结束之后才会运行下一个，所以当遇到需要运行两个需要持续运行的任务，比如 watch 和 nodemon 时，就需要用到 concurrent 任务。
运行时的任务的命令行输出会统一显示在 concurrent 任务的命令行输出中。
安装基础的 Git 和 NodeJS，NodeJS的版本选择 0.10.20 以上。安装之后可以确认一下命令可用。
$ git
$ node
$ npm安装项目搭建需要的基础工具包
$ npm install -g grunt-cli
$ npm install -g bower$ git clone [email protected]:winsonwq/qhlife-web.git下载完成之后进入项目目录
$ cd qhlife-web安装前端 bower 依赖包。
$ bower install安装 npm 依赖包。
$ npm install使用以下命令进入开发模式。
$ npm start
// or
$ NODE_ENV=development grunt dev开发模式所需的资源文件都会位于项目根目录的 dev 临时文件夹中，进入开发模式后会开启以下功能：
- Stylus 到 CSS 代码的预编译，当修改Stylus代码时，会自动编译 CSS 代码
- Livereload 功能，当 Stylus 文件、模板文件、JavaScript 文件修改时，浏览器会自动刷新显示适配最终效果
先试用以下命令生成产品环境所需资源，所需的资源都会位于项目根目录下的 public 文件夹中。
$ grunt build其中资源会包括：
- 压缩之后的JavaScript 和 CSS，比如
index.min.js和index.min.css - 二次优化 JavaScript 代码，使之更精简，使用的是 UglifyJS
- 系统所需的第三方库，比如 jQuery 或者 purecss
- 系统所需的图片或者字体资源
产品环境资源准备完成之后，运行以下命令运行产品代码。
$ NODE_ENV=production PORT=80 node bin/www前端技术架构已经搭建起来，已经有两个关键点做了技术验证：
- 现有商城 Profile 页面的个人信息页面实现（数据是模拟的）。已有的 Profile 页面使用静态 HTML 实现，数据请求用的是基础的 Ajax 请求。目前使用新的结构，新的开发方式快速实现了页面和样式，还做了数据演示的优化，放弃了之前延迟加载的方式，目前速度更快了。
. +-- .temp -> 临时文件夹，用来存放编译，连接，压缩css和js文件过程中，产生的中间文件 +-- bin | +-- www -> 项目启动脚本，由nodeJs创建监听进程 +-- config -> 配置文件夹，内存放不同环境配置 | +-- config.development.js -> 开发环境的配置信息 | +-- config.global.js -> 共享的配置信息 | +-- config.test.js -> 测试环境的配置信息 | +-- index.js -> 根据不同参数，加载不同的配置信息 +-- dev -> 存放编译后的静态图片和文件（js，css），开发环境使用 +-- images -> 存放图片 +-- lib -> 存放第三方的js资源(第三方js文件一般用bower管理，这里存放需要对源文件进行自定义修改的js文件) | +-- cas.js -> cas验证模块 +-- models -> 存放mvc中的模型，存放业务逻辑 | +-- cas | | +-- index.js -> cas验证的业务逻辑 | +-- policy | | +-- index.js -> 获取保单信息业务逻辑 | +-- profile | | +-- index.js -> 获取用户信息业务逻辑 | +-- index.js +-- node_modules -> nodeJs模块 +-- routes -> 路由信息 | +-- cas -> cas相关的路由信息以及对应的挑战逻辑 | +-- main -> 主页 | +-- product | | +-- index.js -> 产品相关的路由信息 | | +-- middleware.js -> 利用中间件实现后端数据的验证 | +-- profile -> 用户信息相关的路由 | +-- index.js +-- scripts -> 存放js文件 +-- styles -> 存放styl文件 +-- tasks -> 存放grunt任务配置信息 | +-- clean.js -> 存放clean任务的配置信息 | +-- concat.js -> 存放concat任务的配置信息 | +-- ... +-- test -> 测试文件夹 | +-- routes -> 测试路由逻辑 | | +-- home_spec.js -> mocha测试js逻辑 +-- vendors -> bower将下载的第三方库放在此文件夹中 +-- views -> 存放所有的html模板 +-- .bowerrc -> bower的配置文件 +-- .gitignore -> git忽略配置文件 +-- app.js -> express网站配置文件 +-- bower.json -> bower的依赖管理配置 +-- gruntfile.js -> grunt的配置文件 +-- package.json -> npm的配置文件 +-- README.md -> readme的markdown文件
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent