AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

Building web apps with node.js, socket.io, knockout.js and zombie.js by Iván Loire

发布者 noder
发布于 1451869240308  浏览 5738 关键词 Node.JS, JavaScript, English 
分享到

第1页

Building web apps with node.js, socket.io, knockout.js and zombie.js

Iván Loire

ivan@iloire.com

Freelance node.js developer

http://iloire.com http://letsnode.com

Sunday, March 25, 2012



第2页

ninja rockstar dev real-time



javascript



Why is everybody talking about Node.js?



sockets



What are we node.js developers



cool so excited about? startup



hype



nodeconf



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第3页

What is node.js?



.. why should you get into it?

an extra framework to learn? please leave me alone...



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第4页

• high performance javascript library for intensive I/O operations. (like HTTP)



• single threaded, event oriented. • built on Chrome’s Javascript runtime (V8) • lightweight, efficient, really fast. • .. insanely fast.



- Node.js is not a language. - Node.js is not a framework. - Node.js is not (just) a web server.

- Node.js will always be simple and optimized for speed and high concurrency.



• modular. Excellent package manager: NPM



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第5页

Why node.js?



• Ryan Dahl (creator of node.js): – “I am not happy with the way web servers and apps work today” (apache, php, rails, IIS, etc). – “We need something faster, highly scalable”.

• Check “History of node” – http://www.youtube.com/watch? v=SAc0vQCC6UQ

Sunday, March 25, 2012



- Thanks Ryan!

Iván Loire freelance node.js developer





第6页

Sunday, March 25, 2012



Traditional server

- New thread per request - The thread is blocked during long IO operations (red)

When a new http request hits the web server:

1. A new thread is created. 2. Web server connects to database server (tcp handshake, authentication, etc..) 3. Web server sends SQL query to be executed. 4. Idle.. (database server retrieves data..) 5. Idle... (web server waits for data) 6. Idle... (web server waits for data...) 7. Web server finally gets the data. 8. Web response is returned to the client.



image from: http://magnetik.github.com/node-webid-report/



Iván Loire freelance node.js developer





第7页

Node.js thesis

• I/O is expensive.. (see left) • Thread per connection is

memory expensive.

• POLL: 9 out of 10 servers think they have more interesting things to do than waiting for I/O.



image: http://blog.mixu.net/2011/02/01/understanding-the-node-js-event-loop/



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第8页

Sunday, March 25, 2012



Node.js

- Event loop in a single thread - Operations are executed asynchronously (callbacks)

- Single thread to handle callbacks. - Ideal for waiting for I/O calls (network, filesystem, database) - Not ideal for CPU intensive operations (it will block) -> solution: fork new child process. - No thread management - No need for synchronization - Creating scalable web servers is easy



image from: http://magnetik.github.com/node-webid-report/



Iván Loire freelance node.js developer





第9页

Why are we so excited about node.js?



• Powerful: Designed for high concurrency.



- A new programming language is a new way of solving problems.



• Real-time: Designed for next generations, real-time web apps (socket.io)



• Productivity: Code a high performance web app in a day.



• Simple: You don’t need expensive, complicated, heavy and buggy IDE’s.



• Easy: Deploys in minutes (git, npm).



• Efficient: Node.js uses minimum resources (a few hundred Mb of RAM are fine for hosting several node.js processes)



• Safe: Don’t worry about shared resources (node.js is single threaded)



Sunday, March 25, 2012



it just works, well and fast!!



Iván Loire freelance node.js developer





第10页

and also... node.js is real..

FUN!!



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第11页

Web development with node.js



Sunday, March 25, 2012



Handling HTTP request is just I/O right?

So node.js should be quite good on this...



Iván Loire freelance node.js developer





第12页

Web development with node.js

Ok, I already made the 5 lines web server example with node.js. Now... how do I create real web apps?

• How do I handle http requests and responses? • How do I parse form and querystring input data? • How do I manage user sessions? • How do I render html? Can I use MVC, views, layouts, etc ?



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第13页

Node.js community to the rescue!



• Hundreds of modules submitted by programmers like you or me (hopefully better) !!

So has anybody created a framework to create web apps in node.js yet!jQuery110201320242783651817_1451869369736



well, let’s see...



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第14页

mmmm... YES, someone did!!!



• Connect

• Express.js <- yes, I heard about this one • Railways.js <- this is rails style right?

• Geddy.js • Tower.js • SocketStream (websockets) • ...



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第15页

express.js



• High performance, high class web development for node.js.



• Simple, minimalist. • Sexy ..really fast.



- Express is one the most common node.js web frameworks out there. - It is simple and minimalist. - If you need anything else, get a module.



Express is an extra layer of abstraction on top of Node.js so you can easily create high performance web servers



• MVC, session support (in-memory, redis), cookie parsing, middleware, view engines (ejs, jade), etc.



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第16页

Sunday, March 25, 2012



http://expressjs.com



Iván Loire freelance node.js developer





第17页

In the browser ..



• Express.js serves HTML pages or render JSON data as response (faster, lighter)

• We need something to actually get the JSON data and render the proper UI in the browser.

• We need a view-model with declarative bindings, automatic UI refresh, templating...



something like...



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第18页

knockout.js

• Rich, responsive display with a clean underlying data model. – declarative bindinds <span data-bind=”value: msg”></span> – automatic UI refresh – dependency tracking – templating



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第19页

Knockout.js model binding

- Declarative binding



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第20页

Sunday, March 25, 2012



- Define the view-model. - Knockout automatically synchronizes UI when model changes.



Iván Loire freelance node.js developer





第21页

Single Page Interface (SPI)



node.js socket.io



JSON {msg: ‘hi!’}



<span data-bind=”value: msg”>

browser



- Once we have our view model, we just need to push and pull data from and to the server (by using HTTP or websockets communication)



We update the view-model using JSON through HTTP or over websockets (faster!)



web server



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第22页

Example: directorio.cachirulovalley.com

- express.js - knockout.js - redis (db)



Sunday, March 25, 2012



https://github.com/iloire/cachirulovalleydirectory



Iván Loire freelance node.js developer





第23页

Zombie.js

from the website (http://zombie.labnotes.org/):

Insanely fast, headless full-stack testing using Node.js

hey! Why everything is

“INSANELY fast” in this presentation??



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第24页

Zombie.js



var Browser = require("zombie");



var assert = require("assert"); browser = new Browser() // Load the page from localhost browser.visit("http://localhost:3000/", function () {

browser. // Fill email, password and submit form fill("email", "zombie@underworld.dead"). fill("password", "eat-the-living"). pressButton("Sign Me Up!", function() {



This code will:

- Create a new instance of zombie browser - Open url - Find form elements and fill them - Submit form - Read and analyze the response



// Form submitted, new page loaded.



assert.ok(browser.success);



assert.equal(browser.text("title"), "Welcome To Brains Depot");



})



});



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第25页

Zombie.js

• Tests are meant to be fast (or you won’t run them)

– Zombie.js run your tests on parallel.

• Zombie.js will trigger the proper client side events and will wait for all your asynchronous code to be executed.

– This is good for testing SPI (single page interface) apps



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第26页

Similar to zombie.js

• Phantom.js: (PhantomJS is a headless WebKit with JavaScript AP)

• Selenium: (Unit testing with real browsers)



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第27页

Last but not least...

• Websockets. • Socket.io. • Real-time apps.



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第28页

Websockets

• Bi-directional, full duplex over a single tcp socket. • Connection remains open = no tcp handshake • Lightweight protocol = no http headers, 2 byte

overhead • Supported on chrome 16, FF 11, IE 10, Opera 10 • Reducing latency from 150 (http) to 50 ms (sockets)



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第29页

HTTP overhead (for each request)

“hello, my name is Chrome, encoding UTF-8... I would like a web page please.”



++



TCP handshake



HTTP Headers (request)



Sunday, March 25, 2012



HTTP Headers (response)



Iván Loire freelance node.js developer





第30页

TCP handshake (just first request)

Sunday, March 25, 2012



Websockets



- HTTP handshake negotiated only once. - 2 bytes overhead - Bi-directional full duplex channel.



data + 2 byte overhead



data + 2 byte overhead



Browser



Server

Iván Loire freelance node.js developer





第31页

socket.io



• Websockets for the rest of us (even IE!!)



• Fallback transports:

– websockets – flash sockets – ajax long polling – ajax streaming



Websockets is not fully supported in all browsers yet.

Some smart people created socket.io, a library for cross browsing real-time communication

If websockets is available, we will use it. If it is not, it will try fallback transports until one of them works.



– iframe



– json polling..



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第32页

Don’t forget a really fast database



• open source, high performance, in-memory, key-value data store



• support master-slave replication, pub/sub channels.



• really fast!



don’t tell me...



• if (ACID) durability is not needed... INSANELY FAST!!



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第33页

node.js / socket.io examples

• Math-Race

– code: https://github.com/iloire/math-race – demo: http://letsnode.com:8090/

- Simple game that shows the basics of socket.io and how you can create applications that communicate browsers in real time.



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第34页

Video: http://www.youtube.com/watch?v=LXbYSJfLUW8



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第35页

node.js / socket.io examples

• Socket-piano

– Play the piano in remote browsers. – code: https://github.com/iloire/socket-piano

Let’s try the demo...



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第36页

New generation of low latency mobile web apps

SenchaTouch2 + node.js + socket.io



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第37页

Video: http://www.youtube.com/watch?v=yyHl4cGOlss



Sunday, March 25, 2012



Iván Loire freelance node.js developer





第38页

That’s all folks! Eso es todo amigos!

Iván Loire @ivanloire http://iloire.com



Sunday, March 25, 2012



Iván Loire freelance node.js developer





支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。