Browser vs. Node.js Jackson Tian Shanghai

2,037 views
1,920 views

Published on

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

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,037
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
47
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Browser vs. Node.js Jackson Tian Shanghai

  1. 1. Jackson Tian / 田永强 @朴灵 at SAP Mobile WebBROWSER VS. NODE
  2. 2. Agenda Browser Node Browser Vs. Node Browser? Or Node? 2
  3. 3. Dont Reinvent the Wheel 3
  4. 4. Question? 是否Node在重复发明轮子 4
  5. 5. Browsers 5
  6. 6. Case: DOM events$(selector).click(function (ev) {// TODO}).mouseover(function (ev) {// TODO}).hover(function(ev) {// TODO}); 6
  7. 7. Case: 图片加载var img = new Image();img.onload = function(){ // TODO};img.onerror = function () { // TODO}img.src = url; 8
  8. 8. 9
  9. 9. Case: 动态脚本加载var script = document.createElement(”script”);script.type= “text/javascript”;script.onload = function () { // TODO};script.src = url;document.body.appendChild(script); 10
  10. 10. Case: Ajax$.ajax(url, { data: “foo=bar”, success: function () { // TODO }, error: function () { // TODO }}); 12
  11. 11. Case: Web WorkerScript.js worker.jsvar worker = new Worker(“worker.js”); // TODOworker.onmessage = function (event) { self.onmessage = function (evnt) { // TODO // TODO}; self.postMessage(“I am World!”);Worker.postMessage(“Hello!”); } // TODO // TODO 14
  12. 12. Case: Cross Document MessageWindow A Window Bdocument.addEventListener(message document.addEventListener(messa,function(event){ ge,function(event){ // TODO // TODO},false); },false);Iframe.postMessage(“I am Window Iframe.postMessage(“I am WindowA.”); B.”); 16
  13. 13. 17
  14. 14. Case: WebSocketBrowser ServerSidevar ws = new WebSocket(ws://ip); // TODOws.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
  15. 15. JavaScript in Browser Event Driven Messages Callbacks Asynchronous I/O Single/Multi Threads 20
  16. 16. Event 观察者模式 事件切面/AOP JavaScript执行背后的多线程 消息编程模型  侦听事件  回调函数  触发事件 21
  17. 17. Douglas Crockford说 我喜欢浏览器模型的一点就是它只提供给 我们一个线程。有些人对此怨声载道——如 果锁住了线程,那浏览器也被锁住了,因 此不能这么干。现在很多人都在呼吁把线 程加入到JavaScript中,我们一直在抵制。 我很高兴我们抵制住了。 ——来自《编程人生》92页 22
  18. 18. Douglas Crockford说 浏览器所提供的基于事件的模型确实很不 错。唯一会导致崩溃的地方就是当某些进 程需要花费很长时间的时候。 我很欣赏Google在Gears中所采取的做法, 他们使用了一个完全独立的进程,你可以 把程序发给这个进程去执行。一旦执行完 毕,它会把结果传回来,而结果的传回是 通过事件实现的,这真是个漂亮的模型。 ——来自《编程人生》92页 23
  19. 19. Evented I/O for V8 JavaScript 24
  20. 20. Case: HTTP Servervar 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
  21. 21. 26
  22. 22. 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
  23. 23. Case: File exist?path.exists(/etc/passwd, function (exists) { util.debug(exists ? "its there" : "no passwd!");}); 29
  24. 24. Case: Read filefs.readFile(/etc/passwd, function (err, data) { if (err) throw err; console.log(data);}); 30
  25. 25. Case: Read file by Streamvar 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
  26. 26. JavaScript in Node Event Driven Messages Callbacks Asynchronous I/O Single/Multi Threads 33
  27. 27. Event 观察者模式 事件切面/AOP JavaScript执行背后的多线程 消息编程模型  侦听事件  回调函数  触发事件 34
  28. 28. Browser Vs. Node 35
  29. 29. Keywords Event I/O V8 JavaScript 36
  30. 30. Callbacks & Async 2010.12.28的D2论坛上见到了@老赵的 Jscex。地址: http://v.youku.com/v_show/id_XMjMyNzk0O DA0.html 让人惊艳。原来JavaScript可以这样来解决y 异步和回调的问题 我崇拜得五体投地 37
  31. 31. Callbacks & Async 次年的春天开始研究Node。 对比Browser中的JavaScript。 我才知道Callbacks和Async才是JavaScript的 特色。 事件模型才是JavaScript的特性 但这一切毫不改变我对@老赵的崇拜 38
  32. 32. 打酱油场景 in JavaScript 老妈在做菜 发现没酱油了 叫孩子出门买酱油 继续做下一道菜 …… 孩子回来了 买到了酱油? 完成之前的菜 39
  33. 33. 打酱油场景 in PHP 老妈在做菜 发现没酱油了 叫孩子出门买酱油 停下一切等待孩子回来 孩子回来了 买到了酱油? 完成之前的菜 继续做下一道菜 40
  34. 34. JavaScript中的线程 JS能隐式地启动线程,但是无法探知线程 细节  不用Care多线程的烦恼 JS与线程之间通过事件进行交互 JS与线程之间通过消息进行数据传递 41
  35. 35. Node没有改变JavaScriptNode仅仅是释放了JavaScript所具有的能力Unlocking the Power of JavaScript 42
  36. 36. 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
  37. 37. Node or Browser? 44
  38. 38. Browser Architecture 45
  39. 39. Node Architecture 46
  40. 40. Node是Browser的延续 Node没有改变JavaScript的语法 Node没有改变JavaScript的机制  事件模型  线程消息 Node没有改变JavaScript的架构  比较Node与Chrome,极其相似 47
  41. 41. Node与UI? 假如:  Node可以处理UI?  移除掉Browser中的UI部分的功能? 那么:  Node就是Browser  Browser就是Node 48
  42. 42. Node其实是运行在服务端的Browser 49
  43. 43. Node比浏览器的优势 数据库  Browser  WebDataBase  var db = openDatabase(mydb, 1.0, Test DB, 2 * 1024 * 1024);  Node  MySQL  MongoDB  PostgreSQL 50
  44. 44. Node比浏览器的优势 同源策略限制  Browser  JSONP  Flash Proxy  Access Control  ……  Node  对此问题免疫 51
  45. 45. Node比浏览器的优势 WebSocket  Browser  在浏览器中实现WebSocket走了多久?  兼容性?  支持程度?  Node  Server端的实现与Client端的实现,Effort之比?  看起来Node天生就是用于支持它的  Node作为WebSocket的客户端? 52
  46. 46. Node比浏览器的优势 Node可以通过Addons的形式通过C/C++带 来比浏览器更多的便利 当Node遇见Webkit?(这是现实,不是梦)  共享到HTML5时代的所有benefits  弥补了UI的缺陷时,Node就是Browser  Node是更Powerful的Browser 53
  47. 47. Node + Webkit = NodeBrowser? Node + Webkit >> Browser 54
  48. 48. 下一代的应用 55
  49. 49. NodeBrowser 在传统App模式中不失其优势 在嵌入等领域更具有其广泛的应用  在机顶盒中已经应用广泛 56
  50. 50. 57
  51. 51. 下一代的应用 Node > Browser 享受到了Web革命带来的所有成果 改变传统Native程序的缺陷 没有Browser带来的负面影响  神马叫浏览器兼容性?  B/S模式 + 定制native feature 事件模型真的很简单,很简单,很简单 58
  52. 52. Answer 1 Node重复发明了轮子  语法  完全没有改动JavaScript的语法  事件机制  与浏览器中的事件机制如出一辙  功能  除了UI的显示外,Node能做JavaScript在浏览器中 的事情  甚至更多 59
  53. 53. Answer 2 Node并未重复发明轮子  Node没有重新走任何一门Server端语言的路  Jscript虽然是JavaScript语法,但是丢失了事件编 程模型  Node解决了其他语言没有解决的问题  采用事件模型消除多线程的烦恼 60
  54. 54. 最后感言 Brendan Eich发明了JavaScript Douglas Crockford改变了JavaScript在 Browser中被人误解的境地 Ryan Dahl将JavaScript成功地带到了另一个 领地 61
  55. 55. Q &A 62

×