BROWSER VS. NODE

Jackson Tian / 田永强 @朴灵 at SAP Mobile Web

Agenda

Browser

Node

Browser Vs. Node

Browser? Or Node?

2

Don't Reinvent the Wheel

3

Question?

是否Node在重复发明轮子

4

Browsers

5

Case: DOM events

6

$(selector).click(function (ev) {// TODO}).mouseover(function (ev) {// TODO}).hover(function(ev) {// TODO});

Case: 图片加载

8

var img = new Image();img.onload = function(){

// TODO};img.onerror = function () {

// TODO}img.src = url;

9

Case: 动态脚本加载

10

var script = document.createElement(”script”);script.type= “text/javascript”;script.onload = function () {

// TODO};script.src = url;document.body.appendChild(script);

Case: Ajax

12

$.ajax(url, {data: “foo=bar”,success: function () {

// TODO},

error: function () {// TODO

}});

Case: Web Worker

14

var worker = new Worker(“worker.js”);worker.onmessage = function (event) {

// TODO};Worker.postMessage(“Hello!”);// TODO

// TODOself.onmessage = function (evnt) {

// TODOself.postMessage(“I am World!”);

}// TODO

Script.js worker.js

Case: Cross Document Message

16

document.addEventListener('message',function(event){

// TODO},false);Iframe.postMessage(“I am Window A.”);

document.addEventListener('message',function(event){

// TODO},false);Iframe.postMessage(“I am Window B.”);

Window A Window B

17

Case: WebSocket

var ws = new WebSocket('ws://ip');ws.onopen = function(e){

// TODO};ws.onclose = function(e){

// TODO}; ws.onerror = function(e){

// TODO}; ws.onmessage = function(e){

// TODO}; ws.send(“message”);

// TODOvar ws = require("websocket-server"); var server = ws.createServer(); server.addListener("connection", function(conn){

conn.addListener("message", function(msg){

server.broadcast(msg); // TODO

}); });

//监听一个websocket地址server.listen(8080,"127.0.0.1");// TODO

Browser ServerSide

JavaScript in Browser

Event Driven

Messages

Callbacks

Asynchronous I/O

Single/Multi Threads

20

Event

观察者模式

事件切面/AOP

JavaScript执行背后的多线程

消息编程模型

侦听事件

回调函数

触发事件

21

Douglas Crockford说

我喜欢浏览器模型的一点就是它只提供给我们一个线程。有些人对此怨声载道——如

果锁住了线程，那浏览器也被锁住了，因此不能这么干。现在很多人都在呼吁把线程加入到JavaScript中，我们一直在抵制。我很高兴我们抵制住了。

——来自《编程人生》92页

22

Douglas Crockford说

浏览器所提供的基于事件的模型确实很不错。唯一会导致崩溃的地方就是当某些进程需要花费很长时间的时候。

我很欣赏Google在Gears中所采取的做法，

他们使用了一个完全独立的进程，你可以把程序发给这个进程去执行。一旦执行完毕，它会把结果传回来，而结果的传回是通过事件实现的，这真是个漂亮的模型。

——来自《编程人生》92页

23

24

Evented I/O for V8 JavaScript

Case: HTTP Server

25

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 World\n');

});}).listen(1337, "127.0.0.1");console.log('Running!');

26

Case: HTTP Request

27

curl http://npmjs.org/install.sh | sh

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”);

Case: File exist?

29

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

});

Case: Read file

30

fs.readFile('/etc/passwd', function (err, data) {if (err) throw err; console.log(data);

});

Case: Read file by Stream

31

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 () {});

JavaScript in Node

Event Driven

Messages

Callbacks

Asynchronous I/O

Single/Multi Threads

33

Event

观察者模式

事件切面/AOP

JavaScript执行背后的多线程

消息编程模型

侦听事件

回调函数

触发事件

34

Browser Vs. Node

35

Keywords

Event

I/O

V8

JavaScript

36

Callbacks & Async

2010.12.28的D2论坛上见到了@老赵的Jscex。地址：http://v.youku.com/v_show/id_XMjMyNzk0ODA0.html

让人惊艳。原来JavaScript可以这样来解决y异步和回调的问题

我崇拜得五体投地

37

Callbacks & Async

次年的春天开始研究Node。

对比Browser中的JavaScript。

我才知道Callbacks和Async才是JavaScript的特色。

事件模型才是JavaScript的特性

但这一切毫不改变我对@老赵的崇拜

38

打酱油场景 in JavaScript

老妈在做菜

发现没酱油了

叫孩子出门买酱油

继续做下一道菜

……

孩子回来了

买到了酱油？

完成之前的菜

39

打酱油场景 in PHP

老妈在做菜

发现没酱油了

叫孩子出门买酱油

停下一切等待孩子回来

孩子回来了

买到了酱油？

完成之前的菜

继续做下一道菜

40

JavaScript中的线程

JS能隐式地启动线程，但是无法探知线程细节

不用Care多线程的烦恼

JS与线程之间通过事件进行交互

JS与线程之间通过消息进行数据传递

41

42

Node没有改变JavaScript

Node仅仅是释放了JavaScript所具有的能力

Unlocking the Power of JavaScript

Node的语法和API都毫无变化

43

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);……

Node or Browser?

44

Browser Architecture

45

Node Architecture

46

Node是Browser的延续

Node没有改变JavaScript的语法

Node没有改变JavaScript的机制

事件模型

线程消息

Node没有改变JavaScript的架构

比较Node与Chrome，极其相似

47

Node与UI？

假如：

Node可以处理UI？

移除掉Browser中的UI部分的功能？

那么：

Node就是Browser

Browser就是Node

48

49

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

Node比浏览器的优势

数据库

Browser

WebDataBase

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

Node

MySQL

MongoDB

PostgreSQL

50

Node比浏览器的优势

同源策略限制

Browser

JSONP

Flash Proxy

Access Control

……

Node

对此问题免疫

51

Node比浏览器的优势

WebSocket

Browser

在浏览器中实现WebSocket走了多久？

兼容性？

支持程度？

Node

Server端的实现与Client端的实现，Effort之比？

看起来Node天生就是用于支持它的

Node作为WebSocket的客户端？

52

Node比浏览器的优势

Node可以通过Addons的形式通过C/C++带来比浏览器更多的便利

当Node遇见Webkit？(这是现实，不是梦)

共享到HTML5时代的所有benefits

弥补了UI的缺陷时，Node就是Browser

Node是更Powerful的Browser

53

54

Node + Webkit = NodeBrowser?

Node + Webkit >> Browser

下一代的应用

55

NodeBrowser

在传统App模式中不失其优势

在嵌入等领域更具有其广泛的应用

在机顶盒中已经应用广泛

56

57

下一代的应用

Node > Browser

享受到了Web革命带来的所有成果

改变传统Native程序的缺陷

没有Browser带来的负面影响

神马叫浏览器兼容性？

B/S模式+ 定制native feature

事件模型真的很简单，很简单，很简单

58

Answer 1

Node重复发明了轮子

语法

完全没有改动JavaScript的语法

事件机制

与浏览器中的事件机制如出一辙

功能

除了UI的显示外，Node能做JavaScript在浏览器中的事情

甚至更多

59

Answer 2

Node并未重复发明轮子

Node没有重新走任何一门Server端语言的路

Jscript虽然是JavaScript语法，但是丢失了事件编程模型

Node解决了其他语言没有解决的问题

采用事件模型消除多线程的烦恼

60

最后感言

Brendan Eich发明了JavaScript

Douglas Crockford改变了JavaScript在Browser中被人误解的境地

Ryan Dahl将JavaScript成功地带到了另一个领地

61

62

Q&A