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日星期五