单页面应用 SPA

2015年11月6日

来介绍一下 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/ 给出了同一个应用的各种版本的实现,每个人的技术背景和思维方式都不同,所以对比一下才能找到自己的最爱。