i

src/json/168.json

@@ -1,4 +1,3 @@
 {
-  "title": "the first episode",
   "video": "168-youziku.mp4"
 }

src/json/170.json

@@ -0,0 +1,3 @@
+{
+  "video": "170-spa.mp4"
+}

src/md/170.md

@@ -0,0 +1,33 @@
+# 单页面应用 SPA
+
+来介绍一下 SPA 的定义，优势，以及实现 SPA 的各种框架如何进行选择。
+
+### 什么是 SPA 
+
+![](http://media.haoduoshipin.com/pic/haoduo/170/spa-poster.png)
+
+SPA 是 Single Page App 的缩写。意思是“单页面应用”。指的不是本地应用，而是网站。传统的网站都是多页面的，每次点击一个链接就会打开一个新的页面。但是 SPA 是“单页面”的，意思是一旦我打开这个网站，这个“页面”就会一次性的下载到本地。SPA 页面给用户最直观的一个感受是，每次点击一个链接，页面是不会刷新的。所以用户体验更接近于本地应用，舒适感提高很多。需要注意的是，这里所谓的“单页面”指的是技术底层网站只有一个页面，但是从显示内容角度而言，一个 SPA 仍然可以展示多页内容的。一个例子 <http://differential.com/> ，点击这里的导航栏链接，会发现会有新的页面内容加载进来，但是整个应用是不刷新的。
+
+### 为啥要写 SPA ？
+
+原来的网站架构不是挺好吗？为何 SPA 这个概念最近几年这么火？
+
+简单答案是，为了追求更高一层楼的用户体验。SPA 应用的特点是一次性的把页面显示逻辑都加载到了本地浏览器中，以后每次请求，服务器那边都是提供新的数据，而不再向以往一样传送 HTML 。所以，每次点一个链接，页面上能看到的是显示加载数据的转来转去小圈圈，而不是页面整个刷新，闪我们一下。这个逻辑其实跟用 C++ 写的桌面应用，Swift 和 Java 写的 ios 和安卓 APP 一样了。
+
+这种类原生应用的体验无疑是更好的用户体验，所以像 Facebook Twitter 这样的大公司多年来都通过各种复杂的技术来达成类似这样的效果。那么，用户用了这些网站，他们对其他应用的用户体验的要求也就会水涨船高。未来如果你的网站，不能做出这样“无刷新”的效果，用户就会觉得你很 Low 了。
+
+### 各种为 SPA 而生的框架
+
+![](http://media.haoduoshipin.com/pic/haoduo/170/spa-frameworks.png)
+
+最早大公司达成 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](https://facebook.github.io/flux/docs/overview.html) 。但是更容易上手，而且功能也非常强大的一种组合式 React + Meteor 来构建单页面应用。目前这种方式是 Peter 的最爱。
+
+### 自己选择框架
+
+<http://todomvc.com/> 给出了同一个应用的各种版本的实现，每个人的技术背景和思维方式都不同，所以对比一下才能找到自己的最爱。