new file: _posts/2017-10-28-client-rendering.md

harttle · harttle · commit 29511ce24ba6 · 2017-10-31T00:10:23.000+08:00
new file:   _posts/2017-10-30-cli-testing.md
diff --git a/_posts/2017-10-28-client-rendering.md b/_posts/2017-10-28-client-rendering.md
@@ -0,0 +1,84 @@
+---
+title: 客户端渲染有哪些坑？
+tags: MVVM 异步渲染 路由 兼容性 pushState popstate
+---
+
+从别的角度出发，客户端渲染有很多其他名字比如前端渲染、前端异步、前端 MVC。
+今天的 Web 稍有交互的站点都会做一套前端渲染，从早期的 Backbone，AngularJS 1.0，
+到现在的流行的 Vue，React。基于这些技术做 MVVM 的同时甚至可以完成服务器端渲染。
+但浏览器的客户端渲染（也就是前端 MVC）仍然存在不少限制，这些限制都是前端渲染绕不过的问题。
+
+<!--more-->
+
+# 概述
+
+一个支持客户端渲染的技术架构应当包括这些内容：
+
+* 首屏渲染。服务器端渲染首屏，或者客户端根据当前 URL 渲染对应的页面。
+* 前端路由。点击链接时改变页面的 URL，返回/前进时渲染对应页面。
+* 异步渲染。在不发生整页重新载入的情况下更新页面内容。
+
+下文中，我们用 [同步渲染][sync] 指代浏览器直接载入 HTML 及其中的资源；用 [异步渲染][async] 指通过 DOM API 去动态插入元素和资源。
+
+# 共享同一个后端服务
+
+**结论**：异步打开的所有 URL 都必须在同一服务器，或者这些服务器都知道所有 URL 对应的页面信息。
+
+**场景**：打开页面A -> 跳转到页面 B -> 刷新 -> 返回到页面 A。考虑如何渲染页面 A？
+
+对于传统的同步渲染，构成 Web 站点的页面之间不需共享任何信息，一个链接就足够了。
+但对于一部打开的页面，没有对方页面的信息就意味着无法异步渲染。
+
+在同构渲染流行之前，通常的实现是让服务器对所有页面都返回同样的内容：框架页面。
+前端路由会根据页面 URL （最初还是使用 hash 部分）从这个框架页面渲染出真正的页面。
+因此那个框架页面知道所有可能的页面如何渲染。
+
+显然上述实现搜索引擎不友好，首屏时间延迟。同构渲染技术使得服务器可以直接渲染用户请求的那个页面，而不需要先在客户端启动 MVC 框架。但即使是同构渲染，仍然要求一个服务器知道所有可能会异步打开的页面。
+
+> 这一限制从某个角度上理解是反 Web 的。Web 是开放互联的同时服务器之间完全独立，正是这一点让 Web 变得 Scalable。客户端渲染让一组页面对应同一个后端服务，它们组成一个前端 App。
+
+# 脚本要符合异步风格
+
+**结论**：所有页面的脚本都必须无副作用、不依赖 `<script>` 顺序。
+
+**场景**：两个页面间异步切换时，对应脚本能够多次执行和卸载。
+
+同步渲染中，所有全局变量、定时器、事件监听器会在一个 Reload 后完全消失，而异步页面则不然。
+如果一个脚本依赖于（读写）全局变量，那么多次载入后它的行为可能会发生异常。
+比如一个交互统计脚本多次载入后可能会重复计数，因为它每次载入都产生一个事件监听器。
+
+如果一个异步页面有多个 `<script>`，在 [异步渲染时脚本的执行顺序][dynamic-script] 是不保证的。
+这一点与 [浏览器同步渲染][static-render] 完全不同。
+因此可能需要类似 [RequireJS][req] 之类的模块加载器。
+
+为了解决上述问题，多数前端 MVVM 框架都不建议直接在 HTML 中插入 `<script>` 来编写业务代码。
+与此相反，会提供类似 [模块][ng-module]、[组件][comp] 之类的概念来托管脚本的执行。
+
+# PushState API 不完善
+
+**结论**：浏览器的路由相关 API 能力较弱且存在兼容性问题。
+
+**场景**：在用户点击链接时，需要操作 URL；在用户点击浏览器返回/前进时，需要渲染页面。
+
+HTML5 中定义了 pushState API，包括 [pushState 方法][pushState]，[replaceState 方法][replaceState] 和 [popstate 事件][popstate]。
+我们不谈这些 API 的设计，只看它们的奇怪行为：
+
+* [同步渲染的页面资源][static-render] 加载会延迟 `popstate` 事件。这使得页面未加载完时可以点出但无法返回。
+* `pushState` 调用不会触发 `popstate` 事件。通常需要一个路由工具来包装这些不一致。
+* [PopStateEvent.state][popstate-event] 总是等于 `history.state`。无法获取被 pop 出的 state。
+* `popstate` 事件处理函数中无法区分是前进还是后退。考虑刷新页面的场景不能只存储为变量，只能存储在 [`sessionStorage`][local-store] 中，但这无疑会增加路由的延迟。
+* 有些浏览器不支持 `history.state`，但支持 `pushState` 和 `popstate`。
+
+[static-render]: /2016/11/26/static-dom-render-blocking.html
+[sync]: /2016/11/26/static-dom-render-blocking.html
+[async]: /2016/11/26/dynamic-dom-render-blocking.html
+[dynamic-script]: /2017/01/16/dynamic-script-insertion.html
+[req]: http://requirejs.org/
+[ng-module]: https://angular.io/api/core/NgModule
+[comp]: https://reactjs.org/docs/react-component.html
+[static-render]: /2016/11/26/static-dom-render-blocking.html
+[pushState]: https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState
+[popstate]: https://developer.mozilla.org/zh-CN/docs/Web/Events/popstate
+[replaceState]: https://developer.mozilla.org/zh-CN/docs/Web/API/History/replaceState
+[popstate-event]: https://developer.mozilla.org/zh-CN/docs/Web/API/PopStateEvent
+[local-store]: /2015/08/16/localstorage-sessionstorage-cookie.html
diff --git a/_posts/2017-10-30-cli-testing.md b/_posts/2017-10-30-cli-testing.md
@@ -0,0 +1,125 @@
+---
+title: CLI 测试：文件与标准输出
+tags: BDD Mocha Node.js 测试 Ramdisk
+---
+
+在 [利用 Mocha 进行 BDD 风格测试](/2016/06/23/mocha-chai-bdd.html) 中介绍了
+Node.js 下如何做单元测试，要确保软件的质量我们还需要 e2e 测试，
+确保整个系统在真实场景下能够正常工作。
+
+> End-to-end testing involves ensuring that the integrated components of an application function as expected. The entire application is tested in a real-world scenario such as communicating with the database, network, hardware and other applications. -- [techopedia][techopedia]
+
+本文 Node.js 的命令行程序（CLI）为例，介绍如何测试一个可执行程序的输入输出以及文件修改。
+样例代码可参考 [APM 的 e2e 测试代码][apm]。
+
+<!--more-->
+
+# 输入输出
+
+测试一个 cli 程序的输入输出很容易，几乎不需要借助任何工具。
+使用内置的 `child_process` 模块就足够了：
+
+```javascript
+import {exec} from 'child_process'
+
+it('should print author', function (done) {
+  exec('./bin/cli --author',
+    (err, stdout, stderr) => err ? done(err) : expect(stdout).to.equal('http://harttle.com')
+  )
+})
+```
+
+如果希望注入环境变量，修改要执行的命令即可：
+
+```javascript
+exec('PORT=8080 ./bin/cli --start')
+```
+
+为了测试代码更加可读，可以引入 `chai-as-promise`。上述测试项可以重写为：
+
+```javascript
+import Promise from 'bluebird'
+
+it('should print author', function () {
+  var p = Promise.fromCallback(cb => exec('./bin/cli --author', cb))
+  return expect(p).to.eventually.equal('http://harttle.com')
+})
+```
+
+> 更多细节请参考：[Mocha 下测试异步代码](/2016/07/12/async-test-with-chai-as-promised.html) 一文。
+
+# 文件系统
+
+在单元测试中，我们可以 [修改内置的 `fs` 模块][mock-fs] 达到测试的目的。
+其实文件并没有真正被读写，只是测试了调用读写的逻辑是否正确。
+但 e2e 测试中命令行程序在不同的进程启动，无法修改其中的 `fs` 模块。
+当然你可以 `require` 进来去执行，但那就不是 e2e 测试了。
+
+在此 [Harttle](http://harttle.com) 介绍两种方式来初始化用于测试的工作区。
+
+## 临时目录
+
+如果文件读写较少，可以在测试开始前初始化一个临时目录，测试完成时删除。
+使用 [fs-extra][fs-extra] 会让这个工作变得非常简单：
+
+```javascript
+import fs from 'fs-extra'
+import os from 'os'
+
+beforeEach(() => fs.emptyDir(os.tmpdir() + '/test'))
+```
+
+## Ramdisk
+
+也可以把一部分内存挂载到文件系统，有大量文件读写时比较快，同时可以保护 SSD（是这样吗？）。
+Node 下有一个不错的 [node-ramdisk][ramdisk] 工具来创建内存虚拟磁盘。
+
+```javascript
+const ramdisk = require('node-ramdisk')
+var mountpoint
+var disk
+
+before(done => {
+  disk = ramdisk(this.dirname)
+  disk.create(10, function (err, mount) { // 创建 10MB 的虚拟磁盘
+    mountpoint = mount
+  })
+})
+after(done => disk.delete(mountpoint, cb))
+```
+
+创建 ramdisk 系统调用比较耗时，建议在 `before()` 时完成，`beforeEach()` 时清空目录。
+此外，因为设备根目录存在权限较高的隐藏文件，建议在 `mountpoint` 下创建一个子目录来进行测试。
+
+# 网络
+
+在单元测试中可以使用 [Sinon fakeXHR][fakeXHR] 或 [nock][nock] 来 Mock 掉 http 模块，
+但 e2e 测试中则需要启动真实的服务器。
+
+```javascript
+var server
+
+before(done => {
+  server = http.createServer(requestHandler)
+  server.listen(8080, done))
+})
+
+after(done => server.close(done))
+
+function requestHandler (req, res) {
+  res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' })
+  res.end('ok')
+}
+```
+
+由于不同机器的环境可能不同，端口应该在置默认值的同时读取环境变量。
+如果只需要静态文件服务，可以直接引入 [http-server][http-server] 模块。
+
+[mock-fs]: /2016/08/01/javascript-mock-fs.html
+[techopedia]: https://www.techopedia.com/definition/7035/end-to-end-test
+[apm]: https://github.com/apmjs/apmjs/tree/master/test/e2e
+[fs-extra]: https://github.com/jprichardson/node-fs-extra
+[ramdisk]: https://www.npmjs.com/package/node-ramdisk
+[fakeXHR]: http://sinonjs.org/releases/v4.0.2/fake-xhr-and-server/
+[nock]: https://github.com/node-nock/nock
+[http-server]: https://github.com/indexzero/http-server
diff --git a/assets/lib/jquery-ias.min.js b/assets/lib/jquery-ias.min.js
