初入下一代網站框架 Koa！快速上手不用等！

1. Koa 正在等一個人
Koa Is Just Waiting For You
Fred Chien

2. Fred Chien
錢逢祥

3. cfsghost
At Github

4. fred-zone
blogspot.com

5. Open Source Developer

6. HanGee
蕃薯哥

7. HanGee
蕃薯哥

8. Koa？
苦啊？

9. 討論 Koa 之前

10. 最近什麼最潮
？

11. Node.js v.s. io.js
0.12 的搶先釋出大戰

12. ECMAScript 6
Generator

13. Node.js 0.11.9+
Generator

14. 使用 ES6 的方法
node --harmony

16. 初入 Generator
How to write a generator?

17. Generator 的使用流程
1. 宣告 Generator 函數
2. 建立 Generator 物件
3. 執行 Generator 內部流程

18. Generator 的使用方法
function* myGenerator() {
console.log('My Generator!');
}
var generator = myGenerator();
generator.next();

19. 設計流程
With Generator

20. Generator 的基本流程設計
function* myGenerator() {
console.log('My Generator!');
yield
console.log('My Generator! Again!');
yield
console.log('My Generator! Again! Again!');
}

21. Generator 的回傳與代入值
function* myGenerator() {
console.log( 'My Generator!' );
yield
console.log( 'My Generator! Again!' );
var input = yield 123;
console.log(input);
}
var generator = myGenerator();
generator.next();
var ret123 = generator.next();
console.log(ret123);
generator.next( ':-D');

22. Generator 的回傳與代入值
function* myGenerator() {
console.log( 'My Generator!' );
yield
console.log( 'My Generator! Again!' );
var input = yield 123;
console.log(input);
}
var generator = myGenerator();
generator.next();
var ret123 = generator.next();
console.log(ret123);
generator.next( ':-D');

23. Generator 的回傳與代入值
function* myGenerator() {
console.log( 'My Generator!' );
yield
console.log( 'My Generator! Again!' );
var input = yield 123;
console.log(input);
}
var generator = myGenerator();
generator.next();
var ret123 = generator.next();
console.log(ret123);
generator.next( ':-D');
想像這是
setImediate()
setTimeout()

24. 長得 Sync 樣
卻有 Async 骨
Generator

26. Koa 起手式
npm install koa

27. First Example
var koa = require( 'koa');
// 建立一個網站伺服器
var app = koa();
// 當有瀏覽器要求頁面時，進行處理
app.use(function *() {
// 回應文字內容給瀏覽器
this.body = 'My First Koa Web' ;
});
// 監聽 3000
app.listen(3000);

29. Routing
npm install koa-route

30. Routing
var koa = require( 'koa');
var route = require( 'koa-route');
// 建立一個網站伺服器
var app = koa();
// 當有瀏覽器要求 /test 頁面時，進行處理
app.use(route.get( '/test', function *() {
// 回應文字內容給瀏覽器
this.body = 'Testing Page!' ;
}));
// 監聽 3000
app.listen(3000);

32. Data Transfer
Query String, body, parameters

33. Query String
var koa = require( 'koa');
var route = require( 'koa-route');
// 建立一個網站伺服器
var app = koa();
// 當有瀏覽器要求 /test 頁面時，進行處理
app.use(route.get( '/test', function *() {
// 回應 Query String 的 hackathon 欄位內容給瀏覽器
this.body = this.query.hackathon;
}));
// 監聽 3000
app.listen(3000);

34. Body Parser
npm install koa-bodyparser

35. Body
var koa = require('koa');
var route = require('koa-route');
var bodyParser = require('koa-bodyparser');
// 建立一個網站伺服器
var app = koa();
app.use(bodyParser());
// 當有瀏覽器使用 POST 方法要求 /test 頁面時，進行處理
app.use(route.post('/test', function *() {
// 回應 BODY 的 hackathon 欄位內容給瀏覽器
this.body = this.request.body.hackathon;
}));
// 監聽 3000
app.listen(3000);

36. Parameters
var koa = require( 'koa');
var route = require( 'koa-route');
// 建立一個網站伺服器
var app = koa();
// 當有瀏覽器要求 /test 頁面時，進行處理
app.use(route.get( '/test/:hackathon' , function *(hackathon) {
// 回應 hackathon parameter 內容給瀏覽器
this.body = hackathon;
}));
// 監聽 3000
app.listen(3000);

38. 靜態頁面支援
npm install koa-static

39. Static
var koa = require( 'koa');
var serve = require( 'koa-static');
// 建立一個網站伺服器
var app = koa();
app.use(serve( './public'));
// 監聽 3000
app.listen(3000);

41. 模板引擎
npm install co-views

42. Template Engine
var koa = require( 'koa');
var views = require( 'co-views');
// 建立模板渲染器，指定模板目錄及格式（以 jade 為例）
var render = views(__dirname + '/views', { ext: 'jade' });
// 建立一個網站伺服器
var app = koa();
// 找到 home.jade ，畫出並輸出頁面給瀏覽器
app.use(function *() {
this.body = yield render( 'home', { message: 'Koa is great!' });
});
// 監聽 3000
app.listen(3000);

43. Jade Template (home.jade)
p #{message}

45. Session
npm install koa-session

46. Session Mechanism Initializing
var koa = require( 'koa');
var session = require( 'koa-session');
// 建立一個網站伺服器
var app = koa();
// 自訂或以亂數設定一組加密金鑰
app.keys = [ 'asdfghjkl!@#$%ASDFGHJ' ];
// 初始化 Session
app.use(session());

47. Session Usage
app.use(function *() {
// 將 Session 中 count 屬性的數字累加
var n = this.session.count || 0;
n++;
this.session.count = n;
// 將 Session 中 count 屬性內容回傳給客戶端
this.body = this.session.count;
});

49. Questions?

50. Thanks