index.html

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">

		<title>《更了不起的 Node 4:将下一代 Web 框架 Koa 进行到底》</title>

		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
		<meta name="author" content="Hakim El Hattab">

		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css" id="theme">

		<!-- Code syntax highlighting -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>

		<!--[if lt IE 9]>
		<script src="lib/js/html5shiv.js"></script>
		<![endif]-->
	</head>

	<body>

		<div class="reveal">

			<!-- Any section element inside of this container is displayed as a slide -->
			<div class="slides">
				<section>
					<h1>更了不起的 Node 4</h1>
					<p>将下一代 Web 框架 Koa 进行到底</p>
					<p>
						<small>Created by <a href="https://cnodejs.org/user/i5ting">i5ting</a> / <a href="http://github.com/i5ting">@i5ting</a></small>
					</p>
				</section>

				<section>
					
					<section data-background="#dddddd">
						<a href="#" class="navigate-down">
							<img width="800" height="538" data-src="images/me.png" alt="Down arrow">
						</a>
					</section>
          
					<section data-background="#dddddd">
  					<h2>Node全栈公众号</h2>
  					<p>
  						<p>什么是全栈？一直站在前面讲么？</p>
  						<br>
              <img src='images/nodeonly-wechat.png'/>
  					</p>
            
  					<aside class="notes">
  						Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
  					</aside>
					</section>
          
				</section>
        
        
        <section>
          <section data-markdown>
            ## 主要内容
            
            1. 一张图看懂Node.js 4
            1. 推荐技术栈
            1. 核心变更
            1. 为什么要选Koa？
            1. Koa实践
            
          </section>
          
				</section>
        
				<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
          <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
				    <h2>Part 1：一张图看懂Node.js 4</h2>
					  
          </section>
          
          <section>
              <img src='images/cover.png' />
          </section>
        
      </section>
        
        
				<section data-transition="slide" data-background="#9c56b9" data-background-transition="zoom">
  				<section data-transition="slide" data-background="#9c56b9" data-background-transition="zoom">
  					<h2>Part 2：技术栈推荐</h2>
  					<p>
              http://nodeonly.com/stack/
  					</p>
          </section>     

          <section data-markdown>
            ## 2015年推荐
            
            - express 4.x （express最新版本，初学者先别去碰koa）
            - mongoose（mongodb）
            - bluebird（Promise/A+实现）
            - jade（视图层模板）
            - mocha（测试）
            - node-inspector(调试)
            
          </section>

          <section data-markdown>
            ## 2016年推荐
            
            - koa 1.0 && 2.0 （koa2.0刚发布不久，喜欢折腾的可以考虑）
            - mongoose（mongodb）
            - bluebird（Promise/A+实现）
            - jade（视图层模板）
            - ava（测试）
            - vscode(调试)

          </section>     
          
          <section data-markdown>
            ## Why?

          </section>
          
          
          <section data-markdown>
            ## 推荐Koa生成器
            
            支持koa 1 和 Koa 2（稍后会把ava和bluebird加上）

            https://github.com/17koa/koa-generator
          </section>
          
          
				</section>
        
        
				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
        
  				<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
  					<h2>Part 3：核心变更</h2>
            <p>1）Node SDK里的ES 6 语法支持</p>
            <p>2）Koa</p>
            <p>3）异步流程控制</p>
          </section>
          
          <section data-markdown>
           ## 2.1 ES 6 语法支持
           
           - ECMAScript 2015 (ES6) in Node.js https://nodejs.org/en/docs/es6/
           - 使用Node.js 4.x或5.x里的es6特性，高级可用[babel](babeljs.com)
           - 合理使用[standard](https://github.com/feross/standard) 代码风格约定
           - 需要大家重视OO（面向对象）写法的学习和使用
           
          </section>
          
          <section data-markdown>
            ## Koa
            
            - express
            - koa 1 
            - koa 2
          </section>
          
          <section data-markdown>
            ## 异步流程控制
            
            
          </section>
          <section data-markdown>
            ## 模块生态
            
  
          </section>
        
  
				</section>        
        
				<section data-transition="slide" data-background="#e87e04" data-background-transition="zoom">
          <section data-transition="slide" data-background="#e87e04" data-background-transition="zoom">
					  <h2>Part 4：为什么要选Koa？</h2>
            <br>
					  <p class="fragment">
              1. 性能
            </p>
					  <p class="fragment">
              2. 异步流程控制
            </p>
					  <p class="fragment">
              3. Koa核心概念
            </p>
            
          </section>
          
          <section data-markdown>
            ![](images/koa.png)
          </section>
          
          <section data-markdown>
            ## 4.1 性能
            
            http://17koa.com/koa-benchmark/
            
            ![Benchmark](images/benchmark.png)
            
          </section>
          
          <section data-markdown>
            ```
            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
            ```
          </section>
          
          <section data-markdown>
            ```
            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
            ```
          </section>
          
          <section data-markdown>
            ```
            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
            ```
          </section>
          
          <section data-markdown>
            ```
            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
            ```
          </section>
          
    		  <section>
            <h2>4.2 异步流程改进</h2>
  					<p class="fragment">
              1. callback
            </p>
				 
  				  <p class="fragment">  
              2. Promise/A+
            </p>
  				  <p class="fragment">  
              3. generator/yield + co
            </p>
  				  <p class="fragment">  
              4. async/await
            </p>            
  			  </section>
          
          <section data-markdown>
            ## 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 *(){}`
            
          </section>
          
          <section data-markdown>
            ## Generator野史
           
            - JS 版本的 Generator 最早是由 Brendan Eich 实现，他借鉴了 Python Generator的实现，该实现的灵感来自 Icon
            - 早在 2006 年的 Firefox 2.0 就吸纳了 Generator。但标准化的道路是坎坷的，一路下来，其语法和行为都发生了很多改变
            - Firefox 和 Chrome 中的 ES6 Generator 是由 Andy Wingo 实现 ，这项工作是由 Bloomberg 赞助的
            
          </section>
          
          <section data-markdown>
            ## yield
         
            ```
            I will not yield a step.
            我寸步不让。
            ```
          </section>
          
          
          <section data-markdown>
            ## 不调用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 }
            ```
          </section>
        
          <section data-markdown>
          ## 实例
          
          ```
          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);
          };
          ```
          </section>
          
          <section data-markdown>
            ## 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？
            
          </section>
          
          
          <section data-markdown>
            ## generator相关小结
            
            - generator 协程在 ES6 的实现
            - yield 让步
            - next执行
            - co = 执行 + promise
             
          </section>
          
          <section data-markdown>
            ## 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`);
            });
            ```
          </section>
          <section data-markdown>
            ## 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"); 
                  }); 
                }; 
              }
            ```
          </section>
          
          <section data-markdown>
            ## 看看编译后
            
            ```
            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);
              };
            })());
            ```
            
          </section>
          
              
          <section data-markdown>
          # 4.3 Koa核心概念
        
          - 什么是Middleware？
        
          </section>
          
          <section data-markdown>
          # Express vs Koa 1
        
          Express
          
          ```
          function middleware(req, res, next) {
            ...
            
            next()
          }
          ```
          
          koa 1
          
          ```
          middleware = function *(next){
            ...
            yield next
            ...
            this.xxx
          }
          ```
          </section>
          
          <section data-markdown>
            ## 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`);
              });
            });
            ```
            
          </section>
          
          <section data-markdown>
            ## 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`);
            });
            ```  
          </section>
          
          <section data-markdown>
            ## 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`);
            }));
            ```
            
          </section>

          <section data-markdown>
          ## Middleware
            
          ![](images/1.JPG)
          </section>
          
          <section data-markdown>
          ![](images/2.png)
          
          app.js里堆叠的那些。。。
          
          </section>
          
          <section data-markdown>
          ![](images/3.png)
          
          ```
          router.get('/', $middlewares.check_api_token, $.api.list);
          ```
          </section>
          <section data-markdown>
           ## Context
         
           - req/res
           - this
           - ctx
           
          </section>
          <section data-markdown>
            ## Context
            
            ```
            let m = async (ctx, next) => {
              ...
            }
            ```
            
            等于
            
            ```
            var m = async function (ctx, next) {
              ...
            }
            ```
            
          </section>
          
          <section data-markdown>
            ## 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
            
          </section>
       
				</section>
        
        
				<section data-transition="slide" data-background="#01bf9d" data-background-transition="zoom">
          <section data-transition="slide" data-background="#01bf9d" data-background-transition="zoom">
  					<h2>Part 5：生态与模块</h2>
 
  					<img src='images/npm2.png' width='800px' height='600px'/>
            
          </section>
         <section data-markdown>
            ## 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

            
         </section>
  
          <section data-markdown>
             ## VSCode debug
    
             ![](images/vscode-debug.gif)
              
          </section>
          <section data-markdown>
             ## AVA: Futuristic test runner
 
             ![](images/ava.png)
          </section>
          
          <section data-markdown>
            ## 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最新语法的支持
            - 更简洁，抄了不少其他测试库的优点
          </section>
          
          
          
          <section data-markdown>
           ## npm

           ![](images/npm.png)
          </section>
          
          <section data-markdown>
           ## 举例：性能测试
           
           ```
           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: 每个线程每秒钟的完成的请求数
           
          </section>
          
          
          <section data-markdown>
           ## 可视化

           - 做测试单次不具有比较意义
           - 单一框架也不具有比较意义
           
           然后呢？
           
          </section>
          
          
          <section data-markdown>
           ## 举例：性能测试

           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
          </section>
          
          
          <section data-markdown>
           ## 举例：性能测试

           2）wrkparser
           
           Install

           ```
           npm i -S wrkparser
           ```

           Usages

           ```
           var obj = require('wrkparser')('wrk.log', 'wrk.log.json')
           ```
           
          </section>
          
          <section data-markdown>
           ## 举例：性能测试

           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)
             }
           })
           ```
          </section>
          
          <section data-markdown>
           ## 举例：性能测试

           4）可视化 
           
           - ajax读取wrk.json
           - 生成图表（支持排序等）

           ![Benchmark](images/benchmark.png)
           
          </section>
          
          <section data-markdown>
           ## 举例：性能测试

           5）cli支持 
           
           package.json里加入
           
           ```
           "preferGlobal": "true",
           "bin": {
             "wrk_scan": "bin/wrk_scan.js"
           },
           ```
           
           扫描当前目录下的日志，合并生产wrk.json
           
           ```
           $ npm i -g wrk_scan
           $ wrk_scan
           ```
           
          </section>
          
          <section data-markdown>
           ## 举例：性能测试
           
           6）TODO
           
           - html图表自动生成
           - 更多选项（比如支持nvd3）
           
           http://17koa.com/koa-benchmark/
          </section>
          
          
          
				</section>
        
        <section data-transition="slide" data-background="#1fcf6d" data-background-transition="zoom" >
          
           <section data-transition="slide" data-background="#1fcf6d" data-background-transition="zoom" data-markdown>
          ## 回顾一下
   
          1. 一张图看懂Node.js 4
          1. 核心变更
          1. 推荐技术栈
          1. 为什么要选Koa？
          1. 生态与模块
          
          </section>
          
           <section data-transition="slide" data-background="#1fcf6d" data-background-transition="zoom" data-markdown>
          ## Koa实践
   
          1. HTTP（req和res相关，form && ajax、文件上传）
          1. Session
          1. API
          1. Pub/Sub
          1. MQ
          1. Database、Cache
          1. Scaffold
          1. 部署
          
          </section>
  
          <section data-transition="slide" data-background="#1fcf6d" data-background-transition="zoom" >
          <h2>招聘Nodejs工程师, 我亲自带</h2>
          目标全栈
           <p class="fragment">天津</p>
           </section>
        </section>
        
				<section data-transition="slide" data-background="#5babe6" data-background-transition="zoom">
					<h2>Q & A</h2>
					<p>
						少抱怨，多思考，未来更美好。有的时候我看的不是你一时的能力，而是你面对世界的态度。
					</p>
          
          <img width="178" height="238" data-src="images/q&a.jpg" alt="Down arrow">
	
          <p class="fragment">console.log('The End, Thanks~')</p>
				</section>
       
       
       
   
       
       
			</div>

		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>

			// Full list of configuration options available at:
			// https://github.com/hakimel/reveal.js#configuration
			Reveal.initialize({
				controls: true,
				progress: true,
				history: true,
				center: true,

				transition: 'slide', // none/fade/slide/convex/concave/zoom

				// Optional reveal.js plugins
				dependencies: [
					{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
					{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
					{ src: 'plugin/highlight/highlight.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
					{ src: 'plugin/zoom-js/zoom.js', async: true },
					{ src: 'plugin/notes/notes.js', async: true }
				]
			});

		</script>

	</body>
</html>