SlideShare una empresa de Scribd logo
1 de 29
Web.js Node.js 》 Node.js  Web.js and
Web.js Node.js JavaScript on Server-side http://nodejs.org/
Web.js Node.js E vent A sync N onBlocking
Web.js Node.js 前 端们,回想下当年你做页面的时候,因为各种原因,使页面 Block 住的情景吧! 再回想下 Ajax 一直在等待服务器的回答,但是因为服务器突然挂掉,而使到正在使用中的页面没有任何动作的情景吧!
Web.js Node.js
Web.js Node.js var  http = require( 'http' ), fs = require( 'fs' ), url = require( 'url' ); var  server = http. createServer (function ( req ,  res ) { var  filePath = url. parse (req. url ). pathName ; fs. readFile (filePath, function ( err ,  data ) { res. writeHead ( 200 , { 'Content-type' :  'text/plain' }); res. write ( data ); res. end (); }); }); server. listen ( 8888 );
Web.js Node.js http://expressjs.com/
Web.js Node.js var  express   = require( 'express' ), app = express. createServer (); app. configure (function(){ app. use (express. static ( __dirname )); }); app. listen ( 8888 );
Web.js Node.js /:Web.js http://web.jit.im/
Web.js Node.js require( 'webjs' ). run ()
Web.js Node.js { 速度! 灵活度! 简易度!
Web.js Node.js } 兼容性 ! 稳定性 ! 还原性 !
[object Object],[object Object],[object Object],Web.js Node.js
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Web.js Node.js
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Web.js Node.js Web.js
Web.js Node.js Request Server POST GET PostRouter PostHandler UrlRouter GetRouter Response File System Redirect GetHandler
Web.js Node.js DEMO ——  Web.js TODOS http://todos.jit.im/
Web.js Node.js Node.js + MongoDB Web.js + Mongoose
Web.js Node.js var  web = require( 'webjs' ), mongoose = require( 'mongoose' ), config = require( './config' ); var  Item =  new  mongoose. Schema ({ title:  String , status:  Number }); mongoose. model ( 'Item' ,  Item ); Item = mongoose. model ( 'Item' ); var  getRouter = { 'getItems' : function ( req ,  res ) { Item. find ({}, function ( err ,  items ) { res. sendJSON ( items ); }); } }, postRouter = { 'addItem' : function ( req ,  res ) { new  Item({ ...... }). save (function ( err ) { ...... }); }, ...... }; web. run ({},  config . www . port ) . get ( getRouter ) . post ( postRouter );
Web.js Node.js 不会有哪个 SB 的 Node.js 第三方模块开发者会提供同步的 API !! 不过 Node.js 原生 API 里的确有。。 =_=
Web.js Node.js Web.js 的 API  是全裸的 Node.js 原生代码可以无缝迁移 //Node.js 官方 Hello World var  http = require( 'http' ); http. createServer (function ( req ,  res ) { res. writeHead ( 200 , { 'Content-Type' :  'text/plain' }); res. end ( 'Hello World' ); }). listen ( 1337 ,  "127.0.0.1" ); //Web.js var  web = require( 'webjs' ); web. run ({},  1337 ,  '127.0.0.1' ) . get ({ '/' : function (req, res) { res. end ( 'Hello World' ); //res.send('Hello World'); } });
Web.js Node.js 别小看 Node.js , Node.js 也是 CMS 潜力股! 上传文件 var  postRouter = { 'upload' : function ( req ,  res ) { fs. writeFile ( 'somefile.txt' , //file name req. data . upload , //file data function ( err ) { //callback if ( err ) return res. send ( 'Upload failed' ); res. send ( 'Upload successed' ); }); } } * 基于 node-formiable express 原生不支持文件上传
Web.js Node.js RESTful API
Web.js Node.js
Web.js Node.js Sencha Touch + Web.js MongoDB(Mongoose) | Node.js(Web.js) | JSONP | Front End (Sencha Touch)
Web.js Node.js var  mongoose = require( "mongoose" ), …… web = require( "webjs" ); …… var  Post =  new  mongoose. Schema ({ …… }); …… var  getRouter = { "jsonData" : function (req, res) { Post. find ({}, function ( err ,  posts ) { res. sendJSON (req. qs . callback  +  '('  + JSON. stringify ( posts ) +  ')' ); }) } }; web. run ({}, config. www . port , config. www . host ) . get (getRouter); Web.js + Mongoose
Web.js Node.js Ext. apply (mmq. views , { hotMsgInnerList: new mmq. views . HotMsgInnerList ({ store : new Ext. data . Store ({ id:  'store_hm' , model:  'mmq.models.HotMsg' , autoLoad:  true , proxy : { type:  'scripttag' , url:  'http://localhost:8888/jsonData' , reader: { type:  'json' , root:  'data' }, } }) }) });
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Web.js Node.js Friendly Modules
Web.js Node.js Q&A

Más contenido relacionado

La actualidad más candente

Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service WorkerShogo Sensui
 
Where to start refactoring?
Where to start refactoring?Where to start refactoring?
Where to start refactoring?thiagoalessio
 
jQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe JavascriptjQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe JavascriptNando Vieira
 
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化hagino 3000
 
Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»
Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»
Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»DataArt
 
JavaScript frameworks, libraries and tools
JavaScript frameworks, libraries and toolsJavaScript frameworks, libraries and tools
JavaScript frameworks, libraries and toolsDima Denisenko
 
Web components
Web componentsWeb components
Web componentsJace Lee
 
噗浪最近有點胖
噗浪最近有點胖噗浪最近有點胖
噗浪最近有點胖Irvin Chen
 
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task RunnerGRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task RunnerLarry Nung
 
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてNode.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてkamiyam .
 
Основы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPressОсновы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPressDmitry Mayorov
 

La actualidad más candente (19)

Introduction to Service Worker
Introduction to Service WorkerIntroduction to Service Worker
Introduction to Service Worker
 
Where to start refactoring?
Where to start refactoring?Where to start refactoring?
Where to start refactoring?
 
SmartCSS
SmartCSSSmartCSS
SmartCSS
 
jQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe JavascriptjQuery - Javascript para quem não sabe Javascript
jQuery - Javascript para quem não sabe Javascript
 
HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化HTML5を使ったウェブアプリケーションの高速化
HTML5を使ったウェブアプリケーションの高速化
 
Socket.io - Intro
Socket.io - IntroSocket.io - Intro
Socket.io - Intro
 
Slay
SlaySlay
Slay
 
詳説WebAssembly
詳説WebAssembly詳説WebAssembly
詳説WebAssembly
 
Service Workers
Service WorkersService Workers
Service Workers
 
Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»
Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»
Александр Кашеверов «Пара слов о веб - приложениях и что такое Gulp»
 
JavaScript frameworks, libraries and tools
JavaScript frameworks, libraries and toolsJavaScript frameworks, libraries and tools
JavaScript frameworks, libraries and tools
 
Web components
Web componentsWeb components
Web components
 
Node ch12
Node ch12Node ch12
Node ch12
 
Local storages
Local storagesLocal storages
Local storages
 
噗浪最近有點胖
噗浪最近有點胖噗浪最近有點胖
噗浪最近有點胖
 
Dart und JavaScript
Dart und JavaScriptDart und JavaScript
Dart und JavaScript
 
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task RunnerGRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
 
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情についてNode.js をさりげなく取り入れた 最近のフロントエンド事情について
Node.js をさりげなく取り入れた 最近のフロントエンド事情について
 
Основы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPressОсновы CSS препроцессоров и их использование в WordPress
Основы CSS препроцессоров и их использование в WordPress
 

Node.js and Web.js

  • 1. Web.js Node.js 》 Node.js Web.js and
  • 2. Web.js Node.js JavaScript on Server-side http://nodejs.org/
  • 3. Web.js Node.js E vent A sync N onBlocking
  • 4. Web.js Node.js 前 端们,回想下当年你做页面的时候,因为各种原因,使页面 Block 住的情景吧! 再回想下 Ajax 一直在等待服务器的回答,但是因为服务器突然挂掉,而使到正在使用中的页面没有任何动作的情景吧!
  • 6. Web.js Node.js var http = require( 'http' ), fs = require( 'fs' ), url = require( 'url' ); var server = http. createServer (function ( req , res ) { var filePath = url. parse (req. url ). pathName ; fs. readFile (filePath, function ( err , data ) { res. writeHead ( 200 , { 'Content-type' : 'text/plain' }); res. write ( data ); res. end (); }); }); server. listen ( 8888 );
  • 8. Web.js Node.js var express = require( 'express' ), app = express. createServer (); app. configure (function(){ app. use (express. static ( __dirname )); }); app. listen ( 8888 );
  • 9. Web.js Node.js /:Web.js http://web.jit.im/
  • 10. Web.js Node.js require( 'webjs' ). run ()
  • 11. Web.js Node.js { 速度! 灵活度! 简易度!
  • 12. Web.js Node.js } 兼容性 ! 稳定性 ! 还原性 !
  • 13.
  • 14.
  • 15.
  • 16. Web.js Node.js Request Server POST GET PostRouter PostHandler UrlRouter GetRouter Response File System Redirect GetHandler
  • 17. Web.js Node.js DEMO —— Web.js TODOS http://todos.jit.im/
  • 18. Web.js Node.js Node.js + MongoDB Web.js + Mongoose
  • 19. Web.js Node.js var web = require( 'webjs' ), mongoose = require( 'mongoose' ), config = require( './config' ); var Item = new mongoose. Schema ({ title: String , status: Number }); mongoose. model ( 'Item' , Item ); Item = mongoose. model ( 'Item' ); var getRouter = { 'getItems' : function ( req , res ) { Item. find ({}, function ( err , items ) { res. sendJSON ( items ); }); } }, postRouter = { 'addItem' : function ( req , res ) { new Item({ ...... }). save (function ( err ) { ...... }); }, ...... }; web. run ({}, config . www . port ) . get ( getRouter ) . post ( postRouter );
  • 20. Web.js Node.js 不会有哪个 SB 的 Node.js 第三方模块开发者会提供同步的 API !! 不过 Node.js 原生 API 里的确有。。 =_=
  • 21. Web.js Node.js Web.js 的 API 是全裸的 Node.js 原生代码可以无缝迁移 //Node.js 官方 Hello World var http = require( 'http' ); http. createServer (function ( req , res ) { res. writeHead ( 200 , { 'Content-Type' : 'text/plain' }); res. end ( 'Hello World' ); }). listen ( 1337 , "127.0.0.1" ); //Web.js var web = require( 'webjs' ); web. run ({}, 1337 , '127.0.0.1' ) . get ({ '/' : function (req, res) { res. end ( 'Hello World' ); //res.send('Hello World'); } });
  • 22. Web.js Node.js 别小看 Node.js , Node.js 也是 CMS 潜力股! 上传文件 var postRouter = { 'upload' : function ( req , res ) { fs. writeFile ( 'somefile.txt' , //file name req. data . upload , //file data function ( err ) { //callback if ( err ) return res. send ( 'Upload failed' ); res. send ( 'Upload successed' ); }); } } * 基于 node-formiable express 原生不支持文件上传
  • 25. Web.js Node.js Sencha Touch + Web.js MongoDB(Mongoose) | Node.js(Web.js) | JSONP | Front End (Sencha Touch)
  • 26. Web.js Node.js var mongoose = require( "mongoose" ), …… web = require( "webjs" ); …… var Post = new mongoose. Schema ({ …… }); …… var getRouter = { "jsonData" : function (req, res) { Post. find ({}, function ( err , posts ) { res. sendJSON (req. qs . callback + '(' + JSON. stringify ( posts ) + ')' ); }) } }; web. run ({}, config. www . port , config. www . host ) . get (getRouter); Web.js + Mongoose
  • 27. Web.js Node.js Ext. apply (mmq. views , { hotMsgInnerList: new mmq. views . HotMsgInnerList ({ store : new Ext. data . Store ({ id: 'store_hm' , model: 'mmq.models.HotMsg' , autoLoad: true , proxy : { type: 'scripttag' , url: 'http://localhost:8888/jsonData' , reader: { type: 'json' , root: 'data' }, } }) }) });
  • 28.