Post on 12-May-2015
The First Experience Of
谢传贵 @十月光风
前端开发工程师
2011-07-29
11年7月29日星期五
Topic
• Professionalism in JavaScript
• Web Server and SSJS
• Understanding NodeJS
• Writing Code with NodeJS
• Demo
11年7月29日星期五
The World's Most Misunderstood Programming Language
JavaScript
Has Become the World's Most Popular Programming Language
11年7月29日星期五
The JavaScript Age
1991-1999 2000-2009 2010-Present
11年7月29日星期五
The JavaScript Age
1991-1999HTML
2000-2009LAMP
2010-PresentJvaScript
11年7月29日星期五
11年7月29日星期五
The first JavaScript engine was created by Brendan Eich at Netscape Communications Corporation,code named SpiderMonkey, is implemented in C
11年7月29日星期五
Browser WarsBrowsers not only need to support the Web standards well, allowing developers to optimize, but also to do a little optimization of their own. JavaScript being a core component of Web 2.0, AJAX web sites has become part of the battleground.Each browser has their own JavaScript runtimes
more:http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
11年7月29日星期五
...
JavaScript Engine
11年7月29日星期五
V8 C++
JaegerMonkey C++
JScript JSctipt.Net
Nitro C++
Karakan C++
...
JavaScript Engine
11年7月29日星期五
Web Server
• Web服务(Apache/IIS/JBoss/Nginx)
--处理请求、线程、IO...
• 语言引擎(php/Asp/Java)
--面向开发者
11年7月29日星期五
Web Server
• Web服务(Apache/IIS/JBoss/Nginx)
--处理请求、线程、IO...
• 语言引擎(php/Asp/Java/JavaScript)
--面向开发者
11年7月29日星期五
Server-side JavaScript
11年7月29日星期五
http://jaxer.org/https://developer.mozilla.org/En/JavaScript/Server-Side_JavaScript/Walkthrough
WebServer+SpiderMonkey
11年7月29日星期五
浏览器渲染DOM的部分工作分担到服务器
11年7月29日星期五
http://nodejs.org/
https://github.com/joyent/node
11年7月29日星期五
Brand
11年7月29日星期五
Trends
文本
http://www.google.com/trends?q=node.js%2C+phonegap&ctab=0&geo=all&date=all&sort=2
11年7月29日星期五
Ryan Dahl
Blog: http://four.livejournal.com/
video:http://www.youtube.com/watch?v=jo_B4LTHi3I&feature=player_embedded
NodeJS是个好东西,不管你们信不信,反正我信了
11年7月29日星期五
V8
thread pool
(libeio)
event loop
(libev)
Node bindings
Node standard library
C
JavaScript
NodeJS代码架构
11年7月29日星期五
Why?
Node's goal is to provide an easy way to build scalable network programs.
--Ryan Dahl
11年7月29日星期五
Whatʼs NodeJs ?• JavaScript Framework
• Server-side
• Uses V8
• Evented and non-blocking
• CommonJs
• Uses ECMAScript 5
• Http Libraries
• Module System
11年7月29日星期五
NodeJs Choose?
http://code.google.com/p/v8/
11年7月29日星期五
Google V8 JavaScript Engine
• It’s a VM!
• Developed by Google
• The team lead is Lars Bak (Sun’s Java VM & Smalltalk VM)
• No JIT, compiled to Assembler
11年7月29日星期五
Evented
11年7月29日星期五
Evented
Old (blocking) school:
<?php
$content = file_get_contents("/some/huge/file");
doThings($content); // Waiting, synchron
otherThing();
?>
11年7月29日星期五
Evented
Evented I/O
file.read("/some/huge/file", function(data) {
// called after data is read
doThings(data);
});otherThing(); // execute immediately;
11年7月29日星期五
Benefits
• Asynchronous programming
• Event-loops instead of threads
• Non-blocking
• Single-thread
11年7月29日星期五
the advantages of Single-threaded performance
Nginx(single-thread) vs Apache(multi-thread)
http://blog.webfaction.com/a-little-holiday-present
11年7月29日星期五
the advantages of Non-blocking
Nginx(non-blocking) vs Apache(blocking)
11年7月29日星期五
Smaller is BetterSmaller is Better
concurrency
resp
onse
tim
e (m
s)
20
40
60
80
50 100 150 200 250 300
servernginxthintornadonode
11年7月29日星期五
Smaller is Betterconcurrency=300, Smaller is Better
response size (bytes)
resp
onse
tim
e (m
s)
100
200
300
400
24 26 28 210 212 214 216 218
servernginxthintornadonode_buffer
11年7月29日星期五
Ajax vs Comet
11年7月29日星期五
完美的单线程?
11年7月29日星期五
单线程的先天不足
• 操控多CPU的短板– 单线程程序只能在一个CPU上运行
• 可靠性!?
– 一个异常影响整个线程
11年7月29日星期五
NodeJS的取舍
单线程,可靠性低,性能高多线程,可靠性高,性能低
11年7月29日星期五
CommonJSjavascript: not just for browsers any more!
http://www.commonjs.org/
11年7月29日星期五
• Modules
• Binary
• File system
• and many more!
CommonJS
A collection/library of standards
11年7月29日星期五
CommonJS Module
• There should be a function require
• There should be a var called exports
11年7月29日星期五
Module Example// math.js module exports.multiply = function(a, b) {
return a * b;}
// Some other file, using math.js // var math = require('./math'); var sys = require('sys');
sys.puts(math.multiply(12, 12));
11年7月29日星期五
ECMAScript 5
11年7月29日星期五
ECMAScript 5• Array
indexOf(), lastIndexOf()
forEach(), map(), reduce(), filter(), every(), some()
• JSON
JSON.parse(), JSON.stringify()
• Object.keys（）
• Date.parse(),Date.now()
• __defineGetter__, __defineSetter__
• More: http://davidflanagan.com/Talks/es5/slides.html
11年7月29日星期五
Digg in the node
10年12月17日星期五
Digg in the NodeJS
11年7月29日星期五
Getting Start
$ git clone git://github.com/joyent/node.git $ cd node $ ./configure --prefix=$HOME/node $ make install
https://github.com/joyent/node/wiki/Installation
11年7月29日星期五
Node Package Manage
https://github.com/isaacs/npm
11年7月29日星期五
IDE base on nodeIDE base on node
http://www.cloud9ide.com/
10年12月17日星期五
http://cloud9ide.com/
11年7月29日星期五
NodeJS 优秀的基础架构 给了JavaScript 更多表现空间
11年7月29日星期五
NodeJS带来了...
• SSJS没有“跨浏览器”的烦恼
• DOM、BOM的完整支持
• jQuery和YUI3完全成为“中间件”
• js程序可以无缝移植到服务器端
• ...
11年7月29日星期五
Hello Worldvar http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');
% node example.js
Server running at http://127.0.0.1:1337/
11年7月29日星期五
NodeJS Modules
11年7月29日星期五
Module Types
https://github.com/joyent/node/wiki/modules
2983
modules
11年7月29日星期五
Rendering HTML- nodejs-dom
• jsdomhttps://github.com/tmpvar/jsdom
• node-htmlparserhttps://github.com/tautologistics/node-htmlparser
11年7月29日星期五
• DOM 常规操作
• 选择器
• YUI Node API
Rendering HTML- nodejs-dom
11年7月29日星期五
Want to see more?
10年12月17日星期五
Want to see more?
11年7月29日星期五
Demo
• YUI3
• JQuery
• KISSY
• SEAJS
• YUI+YQL
• Open WeiBo
11年7月29日星期五
YUI3 for NodeJS
http://github.com/yui/nodejs-yui3http://github.com/yui/nodejs-yui3
video：http://www.yuiblog.com/blog/2010/09/29/video-glass-node/
11年7月29日星期五
YUI3var YUI = require("yui3").YUI;YUI().use('*',function(Y){
Y.log('hello jayli!');});
http://express.davglass.com/
11年7月29日星期五
• http://metamarketsgroup.com/blog/node-js-and-the-javascript-age/
• http://en.wikipedia.org/wiki/JavaScript_engine
• http://en.wikipedia.org/wiki/Brendan_Eich
• http://javascript.crockford.com/popular.html
• http://en.wikipedia.org/wiki/List_of_JavaScript_engines
• ttp://www.yuiblog.com/blog/2010/05/20/video-dahl/
Links
11年7月29日星期五
11年7月29日星期五