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

1. Framework Koa
Node.js勉強会
2014.2.8

2. 自己紹介
•
かみやん (Twitter@kamiyam)
http://nantokaworks.com
•
Engineer
•
だいたい Node.js の人
•
たまにカメラの人

3. Framework Koa

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. Expressの次のフレームワーク？
現在 Express がNode.jsのスタンダードな
Frameworkだが、そのExpress チームが積極的に開発
が関わっている。

6. Expressではダメなのか?
Express(というかNode.js/JavaScript)では 、
コールバックが多階層構成となりやすく(コールバック
地獄)、エラーハンドリングが煩雑となる。

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. コールバック地獄
// 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. 他言語での実行イメージ
!
var result= getHttpResponse(“http://example.com”);・・・①
var geo = getGeoLocale( result.local );・・・②
response.send( geo.json );・・・③

10. Koaならイケてるのか?
“generator/yield” を使い
簡潔に “middleware”を書くことが出来る

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. 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. え?JavaScriptなのに同期処理?

14. 同期処理
処理内容
処理時間
処理①
処理②
処理③
完了
同時に実行出来る処理は実行してしまいたい
※ 前述サンプルのような処理の結果を以って
次の処理を行う場合は別

15. 半非同期処理
処理内容
処理時間
処理①
処理②
処理③
完了
それぞれの処理を同時に実行し、一番遅い処理が
完了するまで他は待機

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. generator/yield?

18. generator/yield
generator/yield は EcmaScrpt6 (ES6) で
規格化されている機能の一つである。

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. generator/yieldは
直交で処理を動作させることの出来るIterator

21. middleware?

22. middleware
middlewareは（Web）アプリケーションの中間層を
受け持つ。
例) ログイン管理やリダイレクト処理などのフィルター
的機能など。
Expressではconnect という名称で処理を
実装する仕組みを持っている。

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. 非同期処理の例外処理
<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. 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. 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. 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. generator/yieldを活用するKoaは
ミドルウェアの実装、エラー処理を楽にしてくれる

29. 今後Express はどうなる?
すぐKoaに取って代わるものではない
( Node.js v0.12.x でGenerator の標準実装は見送り )
ただし、koaモジュールの拡張に伴って
Express/Connect から置き換わる？？？

30. 改めてKoaについて
まず、Generetor/Yield は自身のコードの書き方すら
変えてしまうものである。
Koaが新しい仕組みを勝手に提供してくれるのではな
く、いままで通りの書き方をするだけではあまり従来
のものと変わりがない（ように見えてしまう）。
Generetor/Yieldを活用出来るフレームワークである
ため、それらをうまく使いこなすことが重要。

31. Koa モジュール
ベースとなるコア以外モジュールとして拡張していく
•
koa-static
静的ファイル
•
koa-route
URLルーティング
•
co-views
Viewエンジン
etc...

32. まとめ
•
Koa は Generator/Yield を利用するフレームワーク
•
Generator/Yield は並行処理を実行出来るIterator
•
Koaはmiddlewareの実装を簡素化するスケルトン
•
Cascading/upstreamの話もある

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