Node全栈公众号

什么是全栈？一直站在前面讲么？

主要内容

Part 1：一张图看懂Node.js 4

Part 2：技术栈推荐

http://nodeonly.com/stack/

2015年推荐

• express 4.x （express最新版本，初学者先别去碰koa）
• mongoose（mongodb）
• bluebird（Promise/A+实现）
• jade（视图层模板）
• mocha（测试）
• node-inspector(调试)

2016年推荐

• koa 1.0 && 2.0 （koa2.0刚发布不久，喜欢折腾的可以考虑）
• mongoose（mongodb）
• bluebird（Promise/A+实现）
• jade（视图层模板）
• ava（测试）
• vscode(调试)

Why?

推荐Koa生成器

支持koa 1 和 Koa 2（稍后会把ava和bluebird加上）

https://github.com/17koa/koa-generator

Part 3：核心变更

1）Node SDK里的ES 6 语法支持

2）Koa

3）异步流程控制

2.1 ES 6 语法支持

• ECMAScript 2015 (ES6) in Node.js https://nodejs.org/en/docs/es6/
• 使用Node.js 4.x或5.x里的es6特性，高级可用babel
• 合理使用standard 代码风格约定
• 需要大家重视OO（面向对象）写法的学习和使用

Koa

• express
• koa 1
• koa 2

异步流程控制

模块生态

Part 4：为什么要选Koa？

1. 性能

2. 异步流程控制

3. Koa核心概念

4.1 性能

http://17koa.com/koa-benchmark/

benchmark koa-1
  1 middleware 5893.92
  5 middleware 5902.22
  10 middleware 1935.14
  15 middleware 5300.84
  20 middleware 5137.80
  30 middleware 5339.12
  50 middleware 5049.62
  100 middleware 4578.32

benchmark koa-2
  1 middleware 5872.58
  5 middleware 5729.20
  10 middleware 4860.80
  15 middleware 5767.69
  20 middleware 5766.93
  30 middleware 5446.56
  50 middleware 5022.90
  100 middleware 5250.70

benchmark koa-2-async
  1 async middleware 5815.71
  5 async middleware 4639.42
  10 async middleware 4423.81
  15 async middleware 4261.05
  20 async middleware 4217.97
  30 async middleware 3620.62
  50 async middleware 2478.95
  100 async middleware 1745.38

benchmark express
  1 middleware 6374.90
  5 middleware 6098.11
  10 middleware 4436.94
  15 middleware 4344.61
  20 middleware 5904.50
  30 middleware 5945.77
  50 middleware 5171.96
  100 middleware 4317.21

4.2 异步流程改进

1. callback

2. Promise/A+

3. generator/yield + co

4. async/await

ES 6里的Generator

Generators are a way of returning an arbitrary sequence of results from a function, with the function’s execution suspended in between results.

• 参考协程，在 ES6 实现的
• 交出函数的执行权（即暂停执行）
• 外在形式：function *(){}

Generator野史

• JS 版本的 Generator 最早是由 Brendan Eich 实现，他借鉴了 Python Generator的实现，该实现的灵感来自 Icon
• 早在 2006 年的 Firefox 2.0 就吸纳了 Generator。但标准化的道路是坎坷的，一路下来，其语法和行为都发生了很多改变
• Firefox 和 Chrome 中的 ES6 Generator 是由 Andy Wingo 实现 ，这项工作是由 Bloomberg 赞助的

yield

I will not yield a step.
我寸步不让。

不调用next()，甭想执行

function* gen(x){
  var y = yield x + 2;
  return y;
}

var g = gen(1);
g.next() // { value: 3, done: false }
g.next(2) // { value: 2, done: true }

实例

let getTweets = function* () {
  let totalTweets = [];
  let data;

  // pause. On `iterator.next()` get the 1st tweet and carry on.
  data = yield get('https://api.myjson.com/bins/2qjdn');
  totalTweets.push(data);

  // pause. On `iterator.next()` get the 2nd tweet and carry on.
  data = yield get('https://api.myjson.com/bins/3zjqz');
  totalTweets.push(data);

  // pause. On `iterator.next()` get the 3rd tweet and carry on.
  data = yield get('https://api.myjson.com/bins/29e3f');
  totalTweets.push(data);

  // log the tweets
  console.log(totalTweets);
};

co

Generator based control flow goodness for nodejs and the browser, using promises, letting you write non-blocking code in a nice-ish way.

co(function* () {
  var result = yield Promise.resolve(true);
  return result;
}).then(function (value) {
  console.log(value);
}, function (err) {
  console.error(err.stack);
});

• next在哪里？
• 竟然还可以promise？

generator相关小结

• generator 协程在 ES6 的实现
• yield 让步
• next执行
• co = 执行 + promise

async/await

• 语义上更好
• 内置执行器
• 通用性

app.use(async (ctx, next) => {
  const start = new Date();
  await next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

async/await

它就一个语法糖

function _asyncToGenerator(fn) { 
  return function () { 
    var gen = fn.apply(this, arguments); 
    return new Promise(function (resolve, reject) { 
      function step(key, arg) { 
        try { 
          var info = gen[key](arg); var value = info.value; 
        } catch (error) { reject(error); return; } 
        if (info.done) { 
          resolve(value); 
        } else {

          return Promise.resolve(value)
          .then(function (value) {

 return step("next", value); 
          }, function (err) { 

return step("throw", err); }); 
          } 
        } 

        return step("next"); 
      }); 
    }; 
  }

看看编译后

app.use(async (ctx, next) => {
  await next();
  ctx.body = body;
});

翻译后

app.use((() => {
  var ref = _asyncToGenerator(function* (ctx, next) {
    yield next();
    ctx.body = body;
  });

  return function (_x3, _x4) {
    return ref.apply(this, arguments);
  };
})());

4.3 Koa核心概念

• 什么是Middleware？

Express vs Koa 1

Express

function middleware(req, res, next) {
  ...

  next()
}

koa 1

middleware = function *(next){
  ...
  yield next
  ...
  this.xxx
}

koa 2 中间件 Common function

app.use((ctx, next) => {
  const start = new Date();
  return next().then(() => {
    const ms = new Date() - start;
    console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
  });
});

koa 2 中间件 async functions (Babel required)

app.use(async (ctx, next) => {
  const start = new Date();
  await next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
});

koa 2 中间件 GeneratorFunction

app.use(co.wrap(function *(ctx, next) {
  const start = new Date();
  yield next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`);
}));

Middleware

app.js里堆叠的那些。。。

router.get('/', $middlewares.check_api_token, $.api.list);

Context

• req/res
• this
• ctx

Context

let m = async (ctx, next) => {
  ...
}

等于

var m = async function (ctx, next) {
  ...
}

Lifecycle

• config.pre
• settings
  • config.before_settings
  • config.after_settings
• global_middlewares
  • config.before_global_middlewares
  • config.after_global_middlewares
• routes
  • config.before_routes
  • config.after_routes
• config.post

Part 5：生态与模块

Node.js能干什么？

• 网站（如express/koa等）
• im即时聊天(socket.io)
• api（移动端，pc，h5）
• http proxy（淘宝首页）
• 前端构建工具(grunt/gulp/bower/webpack/fis3...)
• 写操作系统（NodeOS）
• 跨平台打包工具（nw.js,electron）
• 命令行工具（比如cordova）
• 编辑器（atom，vscode）

https://github.com/sindresorhus/awesome-nodejs

VSCode debug

AVA: Futuristic test runner

ava 代码

import test from 'ava';

test('foo', t => {
    t.pass();
});

test('bar', async t => {
    const bar = Promise.resolve('bar');

    t.is(await bar, 'bar');
});

• 主要是针对es 6、7最新语法的支持
• 更简洁，抄了不少其他测试库的优点

npm

举例：性能测试

wrk -t8 -c1000 -d2  http://127.0.0.1:3333 > wrk.log

结果

Running 2s test @ http://127.0.0.1:3333
  8 threads and 1000 connections
  Thread Stats   Avg   Stdev(标准偏差)     Max   +/- Stdev( 正负一个标准差占比)
    Latency   135.20ms   40.84ms 389.59ms   93.44%
    Req/Sec   683.58    294.98     1.24k    62.99%
  10712 requests in 2.10s, 1.54MB read
  Socket errors: connect 0, read 202, write 14, timeout 0
Requests/sec:   5108.43
Transfer/sec:    753.29KB

• Latency: 可以理解为响应时间
• Req/Sec: 每个线程每秒钟的完成的请求数

可视化

• 做测试单次不具有比较意义
• 单一框架也不具有比较意义

然后呢？

举例：性能测试

1）提取文本

Running 2s test @ http://127.0.0.1:3333

正则js里的match

/Running\s(\d+)s\s+test\s+\@\s+http:\/\/([\w\W]+):([\d+]+)\n?/

• result[1] = 2s
• result[2] = 127.0.0.1
• result[3] = 3333

举例：性能测试

2）wrkparser

Install

npm i -S wrkparser

Usages

var obj = require('wrkparser')('wrk.log', 'wrk.log.json')

举例：性能测试

3）合并多次测试结果你(wrk_scan)

• 遍历所有*.log日志文件
• 使用wrkparser生成wrk.log.json
• 合并多个log.json为wrk.json

var files = require('fs').readdirSync(path)
// console.log(files)
var result = {}

files.forEach(function(file){
  if (/\.log$/.test(file)) {
    console.log(file)
    result[file.replace('.log', '')] = require('wrkparser')(file)
  }
})

举例：性能测试

4）可视化

• ajax读取wrk.json
• 生成图表（支持排序等）

举例：性能测试

5）cli支持

package.json里加入

"preferGlobal": "true",
"bin": {
  "wrk_scan": "bin/wrk_scan.js"
},

扫描当前目录下的日志，合并生产wrk.json

$ npm i -g wrk_scan
$ wrk_scan

举例：性能测试

6）TODO

• html图表自动生成
• 更多选项（比如支持nvd3）

http://17koa.com/koa-benchmark/

回顾一下

Koa实践

招聘Nodejs工程师, 我亲自带

天津