AtChina / XTION-PM

大前端架构

我们的初衷着眼于主流架构设计特点和趋势：分布式（前后端分离）、扁平化、微服务、无状态（RESTful）、自动化、异步并行开发、横纵向可伸缩性、跨平台、跨语言、异步IO、事件驱动、高内聚、低耦合；

汇聚并融合了当下大前端技术发展趋势以及设计理念，目的是构造玄讯大前端技术体系和平台，以便凝聚形成更好更专业的前端开发生态环境；首次尝试引入TDD开发模式，结合开发自动化工作流，探索更轻松、更高效、更高质的开发方法论。分享内容有以下几个主题：

1. 技术背景
2. 架构介绍
3. 开发流程
4. 开发技巧
5. 发展规划

技术背景

• Web容器机制

Web页面渲染机制主要分为两种方式：服务端渲染和客户端渲染。传统Web应用通常是采用服务端渲染这种机制，并且使用线程Web容器（例如：IIS和apache）处理请求；我们的大前端架构采用的是客户端渲染机制，使用事件驱动和异步非阻塞 IO Web容器（例如：Nodejs和Nginx）处理请求。目的是满足未来大数据大并发应用在架构层面可以轻松实现水平扩展和纵向扩展等可伸缩性需求。另外，在处理C10K等问题时，NIO和事件驱动服务器在性能方面已经超出了线程服务器，这也是主流Web服务器的设计趋势，我们大前端也基于这一理念，提供了一套基于Nodejs实现的自宿主Web容器。

• 通讯协议机制

Web应用前后端通讯方式主要是基于HTTP协议的RESTful API，使用JSON做为数据传输格式，支持WebSocket、Comet等主流技术。

• 编程语言实现

前端使用纯Javascript语言进行编程，在物理架构上与后端语言完全隔离，因此基于RESTful，只要约定好API 请求和响应格式，保持无状态原则，那么后端可以使用任意编程语言（JAVA、GO、C#等等）实现业务逻辑API的封装，也就是说前端对后端编程语言没有任何限制，甚至可以同时兼容和支持多种后端语言。

• 平台和环境需求

支持跨平台开发（Windows、Linux、IOS），同样的工程结构可在多个操作系统平台进行前端开发，不依赖于任何第三方的IDE，你可以使用记事本、vi编辑器、sublime text等任何你喜欢的编辑器来写前端，因为前端框架自身的插件本身就可以实现了跨平台，并且依赖的插件和组件都是以自实现自宿主的方式封装好，这样就使得部署和迁移粒度保持原子性，维护就更简单。

• 前端模块化设计

前端工程引入了模块化和命名空间等概念，融入了面向对象设计的思维，目的是使得代码更容易组织以及维护管理，也使得前端能够有可测试性。模块化之后，代码职责就更清晰，复用也更简单，多人开发的时候也能避免一些低级的编辑冲突问题。

• 开发自动化工作流

前端框架实现了一些日常常用的自动化开发工作流，目的是把程序员从重复而繁琐的工作中拯救出来，比如：自动代码检查、前端文件修改自动刷新浏览器，服务器文件修改自动启动web容器（热启动）、自动化打包（合并、压缩、优化文件）、源码修改自动测试、自动生成部署包、自动上传文件、自动部署站点等等

• 动态路由设计

前端是基于MVC模式，所以需要路由功能，我们构建了动态路由功能，使得路由管理和扩展只需要一个YAML配置文件即可，添加和删除路由无需修改代码，仅仅更改配置文件即可。我们同时支持两种MVC应用模式：单页面MVC和多页面MVC；此外，我们重写了angularjs前端路由模块，这使得我们前端跟后端路由实现了统一，前端不再需要在JS代码里面去配置路由了，统一使用YAML配置文件管理。

• 大前端相关技术

bootstrap、angularjs、nodejs、Less、font-awesome、YAML、bower、npm、ssh2、cluster、mvc、AMD&CMD、require.js、gulp、underscore、express、ejs、uglify、jshint、livereload、watch、router、log4js、karma、jasmine、mocha

• 相关文档

【工具】前端Javascript开发环境搭建说明.md 【方案】Centos环境nginx安装和部署解决方案.md 【规范】REST API规范.md 【工具】Postman插件安装和使用说明.md 【方案】Centos环境nodejs容器安装解决方案.md 【工具】前后端接口联调技巧.md 【规范】前端工程模块规范化.md

架构介绍

Web物理架构图

Web逻辑架构图

URL分段规则

Nginx路由规则

代码检查工作流

页面加载流程

架构工程目录结构

开发流程

第一步：环境搭建

参考：【工具】前端Javascript开发环境搭建说明.md

第二步：下载依赖库

前端第三方依赖库通过bower进行管理，Web容器依赖库通过npm进行管理，依赖库自动初始化命令如下：

• Client目录初始化

F:\FRONT-END\Client>bower install

• Server目录初始化

F:\FRONT-END\Server>npm install

第三步：前后端接口约定

参考：** 【工具】Postman插件安装和使用说明.md**、【规范】REST API规范.md、【工具】前后端接口联调技巧.md；

第四步：后端API接口开发

基于RESTful框架实现API开发。

第五步：前端Web页面开发

• Step1：在Views目录下新作html页面
• Step2：修改目录下新作html页面
• Step3：修改route.view.yml文件，添加视图路由
• Step4：在app/models目录添加viewmodel文件，并完成视图逻辑开发
• Step5：在app/constrollers目录添加控制器，引入viewmode，实现页面逻辑
• Step6：编辑html页面，引入控制器，完成页面开发

PS:前端工程运行命令：node main.js

开发技巧

技巧：angularjs编程经验

技巧：使用npm doc查看帮助

技巧：chrome插件使用

技巧：debug技术

技巧：TDD开发模式

环境框架已经搭建好，后续再找时间针对TDD给大家做个培训。

技巧：自动化工作流

前端架构实现了日常开发常用的自动化工作流，下面列出工作流执行的命令

• node main.js help：

参看前端支持的所有自动工作流执行命令：

• node main.js doc：

查看前端架构和技术文档，尚未实现。

• node main.js test：

自动化测试命令，监控前端文件修改，自动运行测试，并且自动生成代码覆盖率测试报告等等，目前已经可用，后续继续完善

• node main.js init：

自动下载依赖项，这个命令是其实是将bower install和 npm install封装为一个命令

• node main.js build：

前端自动化打包功能，包括自动化合并脚本文件、压缩文件、工程优化等等。

• node main.js publish：

自动打包命令，先自动执行node main.js build命令，然后再将前端工程打包成zip文件。

• node main.js deploy：

自动化部署命令，先自动执行node main.js publish命令，然后自动连接远程服务器，自动上传文件，自动解压和覆盖原有站点、自动重启动Web容器完成部署。

• node main.js default：

默认任务，启动前端工程，node main.js命令其实是node main.js default的简化，默认任务启动Web容器之后，自动打开浏览，自动监控JS文件修改后执行代码检查，如果发现语言错误在命令给出错误所在行和列的提示，监控html和CSS文件修改之后自动刷新浏览器，配置文件或者服务器容器修改之后，自动重启动（热启动）

发展规划

设计理念

架构规划