Nov 29, 2012 在國立海洋大學資工系的分享，對象為大四與研究所一年級同學。

1. 淺談 NodeJS 與框架
Yahoo! 資深前端工程師
廖英翔
Nov 29, 2012

2. About
廖英翔
Yahoo! 資深前端工程師
@clayliao
1

3. Agenda
 The Legend of Node
 Getting Started
 Node in Yahoo!
 DEMO
2

4. The Legend of Node
3

5. Case Study
source 4

6. High Performance
source 5

7. High Performance
source 6

8. About Node
 Non-blocking
 Event-driven
 High concurrency
 V8 engine
 Server side JavaScript
 …
7

9. Open Source!
https://github.com/joyent/node 8

10. Getting Started
9

11. Node 官方網站
http://nodejs.org/ 10

12. Download & Install
http://nodejs.org/download/ 11

13. Create a HTTP Server
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');
12

14. MORE THINGS NODE CAN DO
13

15. YUIDoc
http://yui.github.com/yuidoc/ 14

16. TypeScript
http://www.typescriptlang.org/ 15

17. Yahoo! Cocktails
NODE IN YAHOO!
16

18. 1. 終端設備愈來愈複雜
17

19. Multi Screen
圖片來源: Apple 18

20. 2. 要懂得程式語言愈來愈多
19

21. 工程師必須身懷絕技
 PHP/Java/ASP/.Net
 Python/Ruby/Perl
 JavaScript
 CSS
 HTML
 YUI/jQuery
 Node.js
 …
圖片來源
20

22. 3. 一個產品 多個Codebase
21

23. The Solution: Yahoo! Cocktails
解決之道：Yahoo! Cocktails
22

24. Yahoo! Cocktails
Mojito Manhattan
圖片來源: Mojito, Manhattan
23

25. 24

26. Open Source!
http://developer.yahoo.com/cocktails/mojito/
25

28. Production-ready
 Yahoo! Axis
 Fantasy Finance
 Sportacular
 Search Direct
 …
iPhone iPad
27

29. One language, Two Runtimes
一個語言 兩個運行環境
28

30. 100% 純 JavaScript
Server Common Client
JS JS JS
29

31. Views for Different Devices
一套程式碼支援多種終端設備
30

32. Android.hb.html Blackberry.hb.html
Iphone.hb.html 31

33. 更多內建功能
 單元測試 Unit Test
 多國語系 Internationalization
 漸進式增強 Progressive Enhancement
 …
32

34. Mojito 101: Quick Start
第一次 Mojito 就上手
33

35. Quick Start: 安裝 Mojito
 Installation
$ npm install mojito -g
34

36. Quick Start: 建立 Mojito App
 Create a Mojito Application
$ mojito create app hello_world
$ cd hello_world
$ mojito create mojit myMojit
35

37. Quick Start: 打完收工
 Running the Application
$ mojito start
http://localhost:8666/@myMojit/index
36

38. Architecture
Mojito
Handlebar
Express
YUI 3
Connect
JavaScript Runtime (Node.js or Browser)

39. DEMO: Bomberman
 多人即時遊戲
 純HTML/CSS/
JavaScript
 HTML5/Canvas
 CSS 3
 原始碼
38

40. Thank You! 39

41. Resources
 NodeJS
- http://nodejs.org/
 Express Framework
- http://expressjs.com/
 Yahoo! Cocktails
- http://developers.yahoo.com/cocktails
 Yahoo! Mojito
- http://developers.yahoo.com/cocktails/mojito
40