Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Node.js勉強会 Framework Koa

7,788 views

Published on

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

Published in: Technology, Business
  • Be the first to comment

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. ご清聴ありがとうございました

×