Fred's blog

在 Node.js 的世界裡，說到今天最潮的 Web Framework，肯定就是 Koa！其用了最新的 JavaScript 語法和特性，來改善 Web Framework 的設計。只不過，Koa 雖然相對於其他舊的 Web Framework 來說有相當多的進步，但很多人卻相當討厭 Koa 的 Generator 設計，尤其是那些「*」符號，那不知所謂的 yield 也讓很多人不舒服。所以至今仍然有許多人在使用 express 來當作自己的 Web Framework，寧可繼續使用那老派的 callback 設計，而不肯嘗試 Koa。 隨著 ECMAScript 標準的進步，Koa 才剛被開發出來沒多久，原本的開發團隊就立即著手打造 Koa 2 ，開始更進一步採用更新的 JavaScript 特性，以 async/await 語法重新打造了全新且更簡潔的框架。可惜的是，由於 async/await 語法一直遲遲沒有被 JavaScript 引擎原生支援，因此總需要靠 babel 編譯打包程式碼後，才能正常跑在 Node.js 之上。這讓 Koa 2 一直無限期處於非穩定版，讓原開發者從開發的一開始，就打算等到 V8 和 Node.js 開始原生支援 async/await 後，才會被以穩定版（stable）的姿態釋出。 所以，即使 Koa 2 到了今天已經相當穩定，也開始有不少人使用在自己的線上服務，卻一直無限期處於非穩定版的狀態。 另外，由於 Koa 2 大量使用 Async/Await，如果你還對 Async/Await 的使用還不熟悉，建議在閱讀本文之前，先閱讀舊文「 JavaScript 好用的 async 異步函數！ 」來學習如何使用。 學習 Koa 的好時機來囉 總算，日前 Node.js v7.6.0 釋出後已經正式宣布原生支援了 async/await 語法，而且不需要額外的參數選項。伴隨著這個消息，Koa 2.0 也隨即正式釋出了！ Node.js 內建支援 ES7 的 async/await 真的是非常棒的消息！過去我們使用 async/await，都還需要 babel 的協助才能正常跑在舊版的 Node.js，不但開發上相當麻煩，非原生的各種 ES7 特性也浪費不少額外的記憶體和效能，這樣的問題在斤斤計較效...

身為 Node.js 使用者的你，還在使用 Express 嗎？快來使用下一代的 Web Framework 吧！Koa 是由 Express 的開發者們出來所開發的新網站框架，嘗試採用了最新的 ECMAScript 6 語法，讓開發者可以用更簡約的方式，開發網站應用程式，讓程式碼更好維護之外，也能受益於最新的語言特性。 穩定版與不穩定版 現在的 Koa 分為 1.0 和 2.0 兩個版本，1.0 使用 ES6 的 Generator 特性，也是目前的 stable 版本，而 2.0 採用 ES7+ 的 async/await，據 Koa 官方說法，2.0 穩定度可以用於實際產品，只是在 ECMAScript 7 規格正式敲定，且 JavaScript V8 Engine 推出原生的實作之前，將無限期處於 unstable 的狀態。也就是說，若你想要在你自己的專案上使用 2.0，你必須使用 babel 這一類的編譯器，因為裡面用到了 ES7 的語法。 本篇文章的重點將放在 Koa 1.0 之上，畢竟在 ECMAScript 7 還處於草案階段的現在，很難說未來會不會有什麼改變。 安裝 Koa 由於 Koa 需要用到 ECMAScript 6 的語言特性，請先檢查你的 Node.js 版本，最少為 0.12 以上，如果你已經使用了 Node.js 4.0 或更高版本，請不用擔心這個問題。 然後透過 NPM 即可安裝模組： npm install koa 開發第一個應用程式 開發 Koa 應用程式非常容易，下面是程式碼範例： var koa = require('koa'); var app = koa(); app.use(function *() { this.body = 'Hello World'; }); app.listen(3001); 跑起來後，用瀏覽器連入 3001 埠即可看到「Hello World」的字樣，因為 this.body 的內容，將會被輸出到前端瀏覽器上。 使用 Generator 打造的 Middleware koa.use() 將用來載入 Middleware，所有連線工作都會經過 Middleware 處理。所以前一個例子裡，我們...

Koa 採用了 Generator 來控制非同步流程，所以在採用 Koa 的程式碼上，我們會看到很多 yield 關鍵字的出現。某程度來說，Generator 讓程式碼變得乾淨許多，也平坦許多，比較少出現太複雜的 Callback 高山。這對 JavaScript 來說是件不錯的事，只是，對很多開發者來說，需要點時間熟悉其概念。 總而言之，所有 yield 的關鍵字，一定只會出現在 Generator 當中，而一個 Generator 長得會是一個以『*』符號開頭的函數模樣： function *() {     // 工作流程 } 所以若是你仔細觀察，就會發現 Koa 的路由處理，採用的不是 callback 來處理客戶端要求，而是 Generator： router.get('/test', function *() {     // 處理客戶端要求的工作 }); 其實不久前，舊文『 如何於 KOA 實作長輪詢（LONG-POLLING）機制 』已提及怎麼來掌控 Koa 的流程，雖然只是簡單提及，但已經大略展示其使用方法。簡單來說，你可以當作這個 Generator 結束後，與客戶端的連線就會結束，所以我們如果要處理非同步的工作，也必須避免和阻止這個 Generator 執行完。 使用 yield 控制 Generator 的流程 為了阻止 Generator 一下就跑完，我們會使用 yield 方法來暫停 Generator 的執行，並等待一個需要花時間的非同步工作完成。如果你對舊文的內容有印象就會知道，想要使用 yield 在 Koa 中去呼叫一個非同步機制，就需要設計一個特別的函數，其函數有一個 callback，當這個 callback 被呼叫時，代表工作完成。 如下面範例就是想要執行一個非同步函數 setTimeout()，並等待其執行完成。在這範例中，我們加上了 console.log() 印出 START 和 END 字串，便於觀察其行為： router.get('/test', function *() {     console.log('START');     // 暫停 Generator 並等待工作完成     y...

io.js 的到來以及即將釋出的 Node.js v0.12，意味著我們不能再忽視 ECMAScript 6 的存在，更代表著 Koa Web Framework 開始要正式進入到市場了（如果你對 Koa 有興趣，可以參考『 舊文 』的簡報內容，有說明完整的開發方法，也有說明 Generator 的使用方法）。Koa 大量運用到 ECMAScript 6 新的 Generator 支援，簡化了非同步的機制，更減少了 Callback 的使用場景。 平心而論，Generator 的機制對許多 JavaScript 開發者確是一個不小的門檻，與舊有的習慣格格不入，需要一點時間學習及熟悉。如果你還不熟悉其機制的細節，不如先學習一些習慣的使用，這是一個比較快能上手的方式。所以，我們可以試著來實作 Long-polling（長輪詢）機制，理解如何運用 Generator 在 Koa 中進行非同步的實作。 若開發 Web 應用涉及了即時的需求，不免碰到 Long-polling（長輪詢）的機制， Long-polling（長輪詢）簡單來說，就是讓伺服器可以即時通知客戶端有資料要進行傳送，常被用在聊天室、即時通知訊息等應用，如 Facebook 的訊息通知機制，就是採用這樣的方式。 Long-polling（長輪詢）的運行原理，就是讓客戶端向伺服器要求新的資料，但取得資料後雙方都不中止連線，等到伺服器有資料要通知客戶端時才將連線中斷，而客戶端就知道有新資料要接收，重新建立一次連線以取得新資料，然後又再次保持連線不中斷，等待下次通知。 暸解了原理，我們就可以開始實作伺服器的部分。首先，假設我們現在有一個事件發送器，每次有資料更新，就會觸發一次事件。如下範例，是每秒鐘更新一次資料： // 建立一個事件發送器 var dispatcher = new events.EventEmitter(); var num = 0; setInterval(function() {     // 將 num 加一，更新資料     num++;     // 通知所有客戶端資料有更新     dispatcher.emit('update'); }, 1000); 如果是 Express，若要實...

很開心，這次十二月的『 Hackathon Taiwan 』相當多人參與，百人的報到數讓所有工作人員都感到興奮。最重要的，多虧了活動夥伴的遊戲設計，這次讓很多隻身而來的人，化解尷尬、相互認識並熱絡起來，最後順利組成隊伍，這算是種格外特別的創舉，過去很少有黑客松能做到這樣的地步。 有趣的是，這次活動找來了重量級的神秘講師 Jeremy Lu （對，就是那位最近紅極一時的 React.js 講者）開課，讓聽眾大飽耳福，絕對不枉來這一趟。有很多人也衝著 Qt 的課程而來，學習 QML 這樣先進的 UI 技術，這次的 QML 遊戲開發課程，相信讓很多人也開心地學會很多技術。 小弟在第二天的結尾，也給了篇一小時的分享『Koa 正在等一個人』，其內容在探討並帶領上手 Koa 這個下一代的網站框架、ECMAScript 6 Generator，以及 Node.js 和 io.js 的最新動態。（事實上是把最近將要出的書，擷取片段內容出來分享） 後記 對於我而言，活動內容再豐富，都比不上找到了好隊友可以一起創作。這次活動，得到了一個硬體工程師加入我們的團隊，所以可以開始進行硬體設計及控制等工作，而且大家相約了下次一起再來。下次，我們將會開始進行各種智慧家電的控制，以及 IoT 的相關應用。看來，我們只差一個設計師的加入了！如果你有興趣，快來加入我們！:-D 下次黑客松活動預計將於 2015 年 1/31、2/1（六、日）兩天，無論你是軟體開發者、硬體開發者、設計師還是學生，都歡迎來參加！而且，一樣會有神秘講師！