NodeJS上海分享会 2011-06-18 http://event.weibo.com/133410

1. Jackson Tian / 田永强 @朴灵 at SAP Mobile Web
BROWSER VS. NODE

2. Agenda
 Browser
 Node
 Browser Vs. Node
 Browser? Or Node?
2

3. Don't Reinvent the Wheel
3

4. Question?
 是否Node在重复发明轮子
4

5. Browsers
5

6. Case: DOM events
$(selector).click(function (ev) {
// TODO
})
.mouseover(function (ev) {
// TODO
})
.hover(function(ev) {
// TODO
});
6

8. Case: 图片加载
var img = new Image();
img.onload = function(){
// TODO
};
img.onerror = function () {
// TODO
}
img.src = url;
8

9. 9

10. Case: 动态脚本加载
var script = document.createElement(”script”);
script.type= “text/javascript”;
script.onload = function () {
// TODO
};
script.src = url;
document.body.appendChild(script);
10

12. Case: Ajax
$.ajax(url, {
data: “foo=bar”,
success: function () {
// TODO
},
error: function () {
// TODO
}
});
12

14. Case: Web Worker
Script.js worker.js
var worker = new Worker(“worker.js”); // TODO
worker.onmessage = function (event) { self.onmessage = function (evnt) {
// TODO // TODO
}; self.postMessage(“I am World!”);
Worker.postMessage(“Hello!”); }
// TODO // TODO
14

16. Case: Cross Document Message
Window A Window B
document.addEventListener('message' document.addEventListener('messa
,function(event){ ge',function(event){
// TODO // TODO
},false); },false);
Iframe.postMessage(“I am Window Iframe.postMessage(“I am Window
A.”); B.”);
16

17. 17

18. Case: WebSocket
Browser ServerSide
var ws = new WebSocket('ws://ip'); // TODO
ws.onopen = function(e){ var ws = require("websocket-server");
// TODO var server = ws.createServer();
}; server.addListener("connection",
ws.onclose = function(e){ function(conn){
// TODO conn.addListener("message",
}; function(msg){
ws.onerror = function(e){ server.broadcast(msg);
// TODO // TODO
}; });
ws.onmessage = function(e){ });
// TODO //监听一个websocket地址
}; server.listen(8080,"127.0.0.1");
ws.send(“message”); // TODO

20. JavaScript in Browser
 Event Driven
 Messages
 Callbacks
 Asynchronous I/O
 Single/Multi Threads
20

21. Event
 观察者模式
 事件切面/AOP
 JavaScript执行背后的多线程
 消息编程模型
 侦听事件
 回调函数
 触发事件
21

22. Douglas Crockford说
 我喜欢浏览器模型的一点就是它只提供给
我们一个线程。有些人对此怨声载道——如
果锁住了线程，那浏览器也被锁住了，因
此不能这么干。现在很多人都在呼吁把线
程加入到JavaScript中，我们一直在抵制。
我很高兴我们抵制住了。
 ——来自《编程人生》92页
22

23. Douglas Crockford说
 浏览器所提供的基于事件的模型确实很不
错。唯一会导致崩溃的地方就是当某些进
程需要花费很长时间的时候。
 我很欣赏Google在Gears中所采取的做法，
他们使用了一个完全独立的进程，你可以
把程序发给这个进程去执行。一旦执行完
毕，它会把结果传回来，而结果的传回是
通过事件实现的，这真是个漂亮的模型。
 ——来自《编程人生》92页
23

24. Evented I/O for V8 JavaScript
24

25. Case: HTTP Server
var http = require('http');
http.createServer( function (request, response) {
request.on("data", function () {
// TODO
});
request.on(“end”, function() {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello Worldn');
});
}).listen(1337, "127.0.0.1");
console.log('Running!');
25

26. 26

27. curl http://npmjs.org/install.sh | sh
Case: HTTP Request
var http = require('http');
var request = http.request(options, function(response) {
var data = '';
response.on('data',function(chunk){
data += chunk;
}).on('end', function (){
console.log(data);
context.renderJSON(JSON.parse(data));
});
});
request.end(“key=value”);
27

29. Case: File exist?
path.exists('/etc/passwd', function (exists) {
util.debug(exists ? "it's there" : "no passwd!");
});
29

30. Case: Read file
fs.readFile('/etc/passwd', function (err, data) {
if (err) throw err;
console.log(data);
});
30

31. Case: Read file by Stream
var frs = fs.createReadStream(‘file’);
frs.on("fd", function () {
});
frs.on("data", function (data) {
});
frs.on("end", function () {
});
frs.on("error", function (ex) {
});
frs.on("close", function () {
});
31

33. JavaScript in Node
 Event Driven
 Messages
 Callbacks
 Asynchronous I/O
 Single/Multi Threads
33

34. Event
 观察者模式
 事件切面/AOP
 JavaScript执行背后的多线程
 消息编程模型
 侦听事件
 回调函数
 触发事件
34

35. Browser Vs. Node
35

36. Keywords
 Event
 I/O
 V8
 JavaScript
36

37. Callbacks & Async
 2010.12.28的D2论坛上见到了@老赵的
Jscex。地址：
http://v.youku.com/v_show/id_XMjMyNzk0O
DA0.html
 让人惊艳。原来JavaScript可以这样来解决y
异步和回调的问题
 我崇拜得五体投地
37

38. Callbacks & Async
 次年的春天开始研究Node。
 对比Browser中的JavaScript。
 我才知道Callbacks和Async才是JavaScript的
特色。
 事件模型才是JavaScript的特性
 但这一切毫不改变我对@老赵的崇拜
38

39. 打酱油场景 in JavaScript
 老妈在做菜
 发现没酱油了
 叫孩子出门买酱油
 继续做下一道菜
 ……
 孩子回来了
 买到了酱油？
 完成之前的菜
39

40. 打酱油场景 in PHP
 老妈在做菜
 发现没酱油了
 叫孩子出门买酱油
 停下一切等待孩子回来
 孩子回来了
 买到了酱油？
 完成之前的菜
 继续做下一道菜
40

41. JavaScript中的线程
 JS能隐式地启动线程，但是无法探知线程
细节
 不用Care多线程的烦恼
 JS与线程之间通过事件进行交互
 JS与线程之间通过消息进行数据传递
41

42. Node没有改变JavaScript
Node仅仅是释放了JavaScript所具有的能力
Unlocking the Power of JavaScript
42

43. Node的语法和API都毫无变化
setTimeout(callback, delay, [arg], [...]);
clearTimeout(timeoutId);
setInterval(callback, delay, [arg], [...]);
clearInterval(intervalId);
console.log();
console.info();
console.warn();
console.error();
console.dir(obj);
console.time(label);
……
43

44. Node or Browser?
44

45. Browser Architecture
45

46. Node Architecture
46

47. Node是Browser的延续
 Node没有改变JavaScript的语法
 Node没有改变JavaScript的机制
 事件模型
 线程消息
 Node没有改变JavaScript的架构
 比较Node与Chrome，极其相似
47

48. Node与UI？
 假如：
 Node可以处理UI？
 移除掉Browser中的UI部分的功能？
 那么：
 Node就是Browser
 Browser就是Node
48

49. Node其实是运行在服务端的Browser
49

50. Node比浏览器的优势
 数据库
 Browser
 WebDataBase
 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024
* 1024);
 Node
 MySQL
 MongoDB
 PostgreSQL
50

51. Node比浏览器的优势
 同源策略限制
 Browser
 JSONP
 Flash Proxy
 Access Control
 ……
 Node
 对此问题免疫
51

52. Node比浏览器的优势
 WebSocket
 Browser
 在浏览器中实现WebSocket走了多久？
 兼容性？
 支持程度？
 Node
 Server端的实现与Client端的实现，Effort之比？
 看起来Node天生就是用于支持它的
 Node作为WebSocket的客户端？
52

53. Node比浏览器的优势
 Node可以通过Addons的形式通过C/C++带
来比浏览器更多的便利
 当Node遇见Webkit？(这是现实，不是梦)
 共享到HTML5时代的所有benefits
 弥补了UI的缺陷时，Node就是Browser
 Node是更Powerful的Browser
53

54. Node + Webkit = NodeBrowser?
Node + Webkit >> Browser
54

55. 下一代的应用
55

56. NodeBrowser
 在传统App模式中不失其优势
 在嵌入等领域更具有其广泛的应用
 在机顶盒中已经应用广泛
56

57. 57

58. 下一代的应用
 Node > Browser
 享受到了Web革命带来的所有成果
 改变传统Native程序的缺陷
 没有Browser带来的负面影响
 神马叫浏览器兼容性？
 B/S模式 + 定制native feature
 事件模型真的很简单，很简单，很简单
58

59. Answer 1
 Node重复发明了轮子
 语法
 完全没有改动JavaScript的语法
 事件机制
 与浏览器中的事件机制如出一辙
 功能
 除了UI的显示外，Node能做JavaScript在浏览器中
的事情
 甚至更多
59

60. Answer 2
 Node并未重复发明轮子
 Node没有重新走任何一门Server端语言的路
 Jscript虽然是JavaScript语法，但是丢失了事件编
程模型
 Node解决了其他语言没有解决的问题
 采用事件模型消除多线程的烦恼
60

61. 最后感言
 Brendan Eich发明了JavaScript
 Douglas Crockford改变了JavaScript在
Browser中被人误解的境地
 Ryan Dahl将JavaScript成功地带到了另一个
领地
61

62. Q &A
62