Node.js勉強会 Framework Koa

7,491 views

Published on

Node.js勉強会 Framework Koaについてのスライドです

Published in: Technology, Business
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,491
On SlideShare
0
From Embeds
0
Number of Embeds
775
Actions
Shares
0
Downloads
25
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

Node.js勉強会 Framework Koa

  1. 1. Framework Koa Node.js勉強会 2014.2.8
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam)
 http://nantokaworks.com • Engineer • だいたい Node.js の人 • たまにカメラの人
  3. 3. Framework Koa
  4. 4. Koa Koa is a new web framework designed by the team behind Express, which aims to be a smaller, more expressive, and more robust foundation for web applications and APIs. 
 Through leveraging generators Koa allows you to ditch callbacks and greatly increase error-handling. Koa does not bundle any middleware within core, and provides an elegant suite of methods that make writing servers fast and enjoyable. Via. http://koajs.com/
  5. 5. Expressの次のフレームワーク? 現在 Express がNode.jsのスタンダードな
 Frameworkだが、そのExpress チームが積極的に開発 が関わっている。
  6. 6. Expressではダメなのか? Express(というかNode.js/JavaScript)では 、
 コールバックが多階層構成となりやすく(コールバック 地獄)、エラーハンドリングが煩雑となる。
  7. 7. 遠い昔に書いた(描いた?) <script> // document ready $(function(){ var $target = $(".initAnimetion"); $target.fadeIn( "slow" ); setTimeout( 2*1000 ); //delay $target.fadeOut( "slow” ); console.log( "completed!!!" ); }); </script> Hello JavaScript??
  8. 8. コールバック地獄 // document ready $(function(){ var $target = $(".initAnimetion”); $target.fadeIn( "slow", function() { setTimeout(function(){ $target.fadeOut( "slow", function() { console.log( "completed!!!" ); }) }), 2*1000 ); //2秒待つ }); }); Hello Callback Hell!!!
 http://callbackhell.com/ http://codepen.io/kamiyam/details/kDxrw
  9. 9. 他言語での実行イメージ ! var result= getHttpResponse(“http://example.com”);・・・① var geo = getGeoLocale( result.local );・・・② response.send( geo.json );・・・③
  10. 10. Koaならイケてるのか? “generator/yield” を使い
 簡潔に “middleware”を書くことが出来る
  11. 11. Koa要件 To use Koa you must be running node 0.11.9 or higher
 for generator support $ alias node='node --harmony' package.json "scripts": { "start": "node --harmony app.js" }
  12. 12. Koa sample var koa = require('koa'), app = koa(); app.use(function *() { // Here is the important bit of application logic for this example. // We make use of a series of async operations without callbacks. var city = yield geolocation.getCityAsync(this.req.ip);・・・① var forecast = yield weather.getForecastAsync(city);・・・② this.body = 'Today, ' + city + ' will be ' + forecast.temperature + ' degrees.';・・・③ }); app.listen(8080); Via. http://blog.stevensanderson.com/2013/12/21/ experiments-with-koa-and-javascript-generators/
  13. 13. え?JavaScriptなのに同期処理?
  14. 14. 同期処理 処理内容 処理時間 処理① 処理② 処理③ 完了 同時に実行出来る処理は実行してしまいたい ※ 前述サンプルのような処理の結果を以って
 次の処理を行う場合は別
  15. 15. 半非同期処理 処理内容 処理時間 処理① 処理② 処理③ 完了 それぞれの処理を同時に実行し、一番遅い処理が
 完了するまで他は待機
  16. 16. Koa sample app.use(function *() { var tasks = { imposeMinimumResponseTime: delay(500), fetchWebPage: doHttpRequest('http://example.com/'), squareTenSlowly: getSquareValueThunk(10) }; // All of the operations have already started. Yielding // the key-value object to Koa just makes it wait for them. var results = yield tasks; this.body = 'OK, all done.'; this.body += 'nResult of waiting is: ' + results.imposeMinimumResponseTime; // ① Displays: undefined this.body += 'nWeb page status code is: ' + results.fetchWebPage.statusCode; // ② Displays: Typically 200 in this case this.body += 'nSquare of ten is: ' + results.squareTenSlowly; // ③ Displays: 100 }); Via. http://blog.stevensanderson.com/2013/12/21/ experiments-with-koa-and-javascript-generators/
  17. 17. generator/yield?
  18. 18. generator/yield generator/yield は EcmaScrpt6 (ES6) で
 規格化されている機能の一つである。
  19. 19. generator/yield ! function *getAllSquareNumbers() { for (var i = 1; ; i++) { yield i * i; } } ! var generator = getAllSquareNumbers(); console.log(generator.next().value); // console.log(generator.next().value); // console.log(generator.next().value); // console.log(generator.next().value); // Outputs Outputs Outputs Outputs '1' '4' '9' '16' Via. http://blog.stevensanderson.com/2013/12/21/ experiments-with-koa-and-javascript-generators/
  20. 20. generator/yieldは 直交で処理を動作させることの出来るIterator
  21. 21. middleware?
  22. 22. middleware middlewareは(Web)アプリケーションの中間層を
 受け持つ。 例) ログイン管理やリダイレクト処理などのフィルター 的機能など。 Expressではconnect という名称で処理を
 実装する仕組みを持っている。
  23. 23. ghost 301 redirect //for wordpress permlink import articles app.use(function redirect301 ( req, res, next ){ ! ! var querys = { p: req.query["p"], page: req.query["page_id"] } // console.log("access to: " + req.headers.host); if ( querys.p || querys.page ){ var redirect = "http://" + req.headers.host; if ( querys.p ){ redirect += "/p" + querys.p + ""; } else if( querys.page ){ redirect += "/page" + querys.page + ""; } // console.log("301 redirect: " + redirect + req.headers.url + "=>" + redirect ); res.writeHead(301, {"Location": redirect, 'Expires': (new Date).toGMTString()}); res.end(); https://gist.github.com/kamiyam/649fb9c12ef83ced920b ! }); } else { next(); }
  24. 24. 非同期処理の例外処理 <script> try { // console.log("hello !!"); throw new Error("error"); } catch(e){ console.log(e); } ! try{ setTimeout(function(){ // console.log("hello callback"); throw new Error("callback error"); }, 2 * 1000) } catch(e){ console.log(e); } </script> Via. http://techblog.yahoo.co.jp/programming/javascript_error/
  25. 25. middleware _人人人人人人人人人人_ > 忘れられたエラー < request  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄ next(); middleware next(); middleware error next(); middleware error それぞれのエラー処理 response response response response middleware
  26. 26. Koa log middleware // x-response-time ! app.use(function *(next){ var start = new Date; yield next; var ms = new Date - start; this.set('X-Response-Time', ms + 'ms'); }); Via. http://dailyjs.com/2014/01/09/koa/
  27. 27. middleware request yield next; yield next; yield next; middleware middleware middleware try catch(e) error error var start = new Date; var ms = new Date - start; response response response response middleware error
  28. 28. generator/yieldを活用するKoaは ミドルウェアの実装、エラー処理を楽にしてくれる
  29. 29. 今後Express はどうなる? すぐKoaに取って代わるものではない
 ( Node.js v0.12.x でGenerator の標準実装は見送り ) ただし、koaモジュールの拡張に伴って
 Express/Connect から置き換わる???
  30. 30. 改めてKoaについて まず、Generetor/Yield は自身のコードの書き方すら 変えてしまうものである。 Koaが新しい仕組みを勝手に提供してくれるのではな く、いままで通りの書き方をするだけではあまり従来 のものと変わりがない(ように見えてしまう)。 Generetor/Yieldを活用出来るフレームワークである ため、それらをうまく使いこなすことが重要。
  31. 31. Koa モジュール ベースとなるコア以外モジュールとして拡張していく • koa-static
 静的ファイル • koa-route
 URLルーティング • co-views
 Viewエンジン etc...
  32. 32. まとめ • Koa は Generator/Yield を利用するフレームワーク • Generator/Yield は並行処理を実行出来るIterator • Koaはmiddlewareの実装を簡素化するスケルトン • Cascading/upstreamの話もある
  33. 33. 参考 ∼Koa編∼ • from scratch - koa入門
 http://yosuke-furukawa.hatenablog.com/entry/2013/12/26/125351 • DailyJS - Is Koa the Future of Node Frameworks?
 http://dailyjs.com/2014/01/09/koa/ • かずぽんブログ - 新しいWebフレームワーク Koa について 
 http://blog.kazupon.jp/post/71041135220/koa • Steven Sanderson's blog - Experiments with Koa and JavaScript Generators
 http://blog.stevensanderson.com/2013/12/21/experiments-with-koa-and-javascript-generators/ • Flowery - KoaとJavaScriptのジェネレーターを試す
 (Experiments with Koa and JavaScript Generators 日本語訳)
 http://yukihr.github.io/blog/2013/12/31/experiments-with-koa-and-javascript-generators-ja/
  34. 34. 参考 ∼Generator/Yield編∼ • テック煮ブログ - Node.js 0.12 では yield が使えるので
 コールバック地獄にサヨナラできる話
 http://tech.nitoyon.com/ja/blog/2013/06/27/node-yield/ • PHP5.5新機能「ジェネレータ」初心者入門 by @kwatch
 http://www.slideshare.net/kwatch/php55 • Python Snippets -ジェネレータ関数とyield
 http://python.civic-apps.com/generator/ • JavaScriptと非同期のエラー処理
 http://techblog.yahoo.co.jp/programming/javascript_error/
  35. 35. ご清聴ありがとうございました

×