2。1  前端React框架及HTML5

React是FaceBook近几年开发的一个用于构建用户界面的js库。它最初来自于FaceBook内部的一个广告系统项目，项目过程中由于前端代码变得越来越糟糕混乱并且可维护性越来越低，于是项目组重新思考了前端页面的构建方式，从而导致了React的诞生[6]。

区别于angular。js等前端MVC框架，React框架仅仅负责MVC中的V这一层（JUST THE UI）。在前端开发中，我们需要根据数据的变化来对用户界面做出更新，也就是说我们要时刻保持数据与界面的一致性，这就不可避免的涉及到了DOM操作的问题。我们知道，DOM操作是浏览器中很耗性能的操作，不恰当的DOM操作会极大的拖慢web应用的性能。在一个复杂的界面中UI之间一般都存在依赖关系，一片小区域的更新很有可能会触发大规模的界面刷新，引起大规模的DOM重绘，即便有些刷新不是必须的，这样就会导致性能问题。而React则通过一种叫做虚拟DOM（virtual DOM）的技术来解决了这个问题。React从不会直接操作浏览器的DOM树。React会在浏览器端通过js维护自己的一个DOM描述，而所有实际DOM的构造都是通过虚拟DOM树进行的，每当应用有数据更新的时候React都会调用render() 函数返回新的DOM描述，然后快速的计算出新旧DOM树的差异，最后只对有差异的部分进行实际的DOM更新，这样就极大程度的缩小了DOM操作影响的范围，从而使得DOM操作的性能得到巨大的提升。这意味着React完全接管了界面操作部分，我们在开发中只需要关注数据的变化，当数据变化时通知React，React就会以最优的方案解决界面的变化问题。

React的另一个特性是其组件化的UI开发方式。利用React我们可以将web网页的开发转换成一个个组件的开发，然后将开发好的组件组合成一个个的页面。这样做不仅可以达到组件复用的效果，而且可以使UI和业务逻辑解耦，从而使代码更加易于维护、更新、测试。而且使用React独有的JSX开发组件，也使得这个过程变得更加的简单。

本系统前端还用到了很多HTML5的技术，之前已经介绍过HTML5，HTML5使web应用更具有竞争力，也为原生应用提供了很多解决方案。本系统大致用到了应用缓存、DOM存储、WebSocket、地理定位、service worker等HTML5技术。

2。2  Node。js+socket。io

Node。js可以说是刷新了很多人对js这门语言的理解，js不是一个只能写前端脚本的玩具语言吗，难道还能用它写服务器？是的，Node。js就是一个服务端的语言，他不仅可以用来做web服务器，而且性能非常高！

Node。js是Ryan Dahl在2009年创造的，它的出现得益于Google的V8引擎的出现[7]。之前已经提到过，V8引擎是一个非常快的js解析引擎，它使得js的执行速度得到了质的提升，正是这种高效率的执行速度为js成为服务端语言提供了可能。

Node。js的性能很高，它的I/O速度甚至可以达到传统服务器Apache的3倍！这种高性能得益于它的异步I/O，举个例子，在传统服务器中，当请求到达时会有线程去为它服务，而如果这个请求涉及I/O操作，在I/O操作进行时主线程必须等待I/O操作完成才能继续执行，这就造成了资源的浪费。而在Node。js中请求到来时主线程去为它服务，进行I/O时主线程不会等待而是继续执行其他的代码，等I/O完成后会有回调函数通知主线程，这极大的提高了资源利用率[8]。Node。js的这种机制使得它在高并发处理及多I/O服务中非常占优势。

Socket。io则是基于Node和Websocket的实时通信框架。Socket。io的最大优点在于他的兼容性，它几乎兼容任何版本的浏览器，这是原生的Websocket所无法做到的。Websocket的性能很好，所以在浏览器支持Websocket的情况下Socket。io会使用Websocket进行通信，然而如果浏览器不支持Websocket，socket。io就会使用ajax长轮询等回退方案进行通信，也就是说socket。io会自动选择最合适来实现双向通信。