单页面应用 SPA

来介绍一下 SPA 的定义，优势，以及实现 SPA 的各种框架如何进行选择。

什么是 SPA

SPA 是 Single Page App 的缩写。意思是“单页面应用”。指的不是本地应用，而是网站。传统的网站都是多页面的，每次点击一个链接就会打开一个新的页面。但是 SPA 是“单页面”的，意思是一旦我打开这个网站，这个“页面”就会一次性的下载到本地。SPA 页面给用户最直观的一个感受是，每次点击一个链接，页面是不会刷新的。所以用户体验更接近于本地应用，舒适感提高很多。需要注意的是，这里所谓的“单页面”指的是技术底层网站只有一个页面，但是从显示内容角度而言，一个 SPA 仍然可以展示多页内容的。一个例子 http://differential.com/ ，点击这里的导航栏链接，会发现会有新的页面内容加载进来，但是整个应用是不刷新的。

为啥要写 SPA ？

原来的网站架构不是挺好吗？为何 SPA 这个概念最近几年这么火？

简单答案是，为了追求更高一层楼的用户体验。SPA 应用的特点是一次性的把页面显示逻辑都加载到了本地浏览器中，以后每次请求，服务器那边都是提供新的数据，而不再向以往一样传送 HTML 。所以，每次点一个链接，页面上能看到的是显示加载数据的转来转去小圈圈，而不是页面整个刷新，闪我们一下。这个逻辑其实跟用 C++ 写的桌面应用，Swift 和 Java 写的 ios 和安卓 APP 一样了。

这种类原生应用的体验无疑是更好的用户体验，所以像 Facebook Twitter 这样的大公司多年来都通过各种复杂的技术来达成类似这样的效果。那么，用户用了这些网站，他们对其他应用的用户体验的要求也就会水涨船高。未来如果你的网站，不能做出这样“无刷新”的效果，用户就会觉得你很 Low 了。

各种为 SPA 而生的框架

最早大公司达成 SPA 效果，都是手工打造，用很复杂的手段来实现。随着 SPA 的流行，诞生了一些框架，让开发 SPA 变得简单。

这一类的框架比较知名的有 AngularJS, Ember.js, ExtJS 还有 facebook 的 React ，国人尤小右开发的 vue.js 。上面这些都是前端框架，还有一个奇葩就是 meteorjs 。这个是个全栈框架，但是也是用来写 SPA 应用的。

AngularJS 和 Ember.js 都比较复杂，学习曲线陡峭。 Vue.js 其实和 React 非常像（其实 vue.js 实现很多想法要比 react 还要早，目前 react 大火，所以 vue 的作者很多方面也都在向 react 看齐）。Vue 的好处是简单高效，但是毕竟 react 社区最为火爆，资源最多，同时又比 Angular 和 Ember 容易上手，所以 Peter 的最爱是 React 。

但是 React 本身只是 View 层（界面），要完成一个完整的应用需要其他应用架构的支持，例如 Flux 。但是更容易上手，而且功能也非常强大的一种组合式 React + Meteor 来构建单页面应用。目前这种方式是 Peter 的最爱。

自己选择框架

http://todomvc.com/ 给出了同一个应用的各种版本的实现，每个人的技术背景和思维方式都不同，所以对比一下才能找到自己的最爱。