Exploring the Future Potential of AI-Enabled Smartphone Processors
Â
Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012
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. real-time javascript
ninja rockstar dev
Why is everybody talking about Node.js?
sockets
What are we node.js developers
so excited about?
cool
startup hype
nodeconf
IvĂĄn Loire 2
freelance node.js developer
Sunday, March 25, 2012
3. What is node.js?
.. why should you get into it?
an extra framework to learn?
please leave me alone...
IvĂĄn Loire 3
freelance node.js developer
Sunday, March 25, 2012
4. ⢠high performance javascript library for intensive I/O
operations. (like HTTP)
- Node.js is not a language.
⢠single threaded, event oriented. - Node.js is not a framework.
- Node.js is not (just) a web
⢠built on Chromeâs Javascript runtime (V8) server.
- Node.js will always be simple
⢠lightweight, efficient, really fast. and optimized for speed and high
concurrency.
⢠.. insanely fast.
⢠modular. Excellent package manager: NPM
IvĂĄn Loire 4
freelance node.js developer
Sunday, March 25, 2012
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? - Thanks Ryan!
v=SAc0vQCC6UQ
IvĂĄn Loire 5
freelance node.js developer
Sunday, March 25, 2012
6. 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 6
freelance node.js developer
Sunday, March 25, 2012
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/
IvĂĄn Loire 7
freelance node.js developer
Sunday, March 25, 2012
8. 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 8
freelance node.js developer
Sunday, March 25, 2012
9. Why are we so excited about node.js?
- A new programming language is a new way of
solving problems.
⢠Powerful: Designed for high concurrency.
⢠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)
it just works, well and fast!!
IvĂĄn Loire 9
freelance node.js developer
Sunday, March 25, 2012
10. and also...
node.js is real..
FUN!!
IvĂĄn Loire 10
freelance node.js developer
Sunday, March 25, 2012
11. Web development with node.js
Handling HTTP request is
just I/O right?
So node.js should be quite
good on this...
IvĂĄn Loire 11
freelance node.js developer
Sunday, March 25, 2012
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 ?
IvĂĄn Loire 12
freelance node.js developer
Sunday, March 25, 2012
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!??
well, letâs see...
IvĂĄn Loire 13
freelance node.js developer
Sunday, March 25, 2012
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)
⢠...
IvĂĄn Loire 14
freelance node.js developer
Sunday, March 25, 2012
15. express.js
⢠High performance, high class web development for node.js.
⢠Simple, minimalist. - Express is one the most common node.js web
frameworks out there.
⢠Sexy ..really fast. - 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.
IvĂĄn Loire 15
freelance node.js developer
Sunday, March 25, 2012
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...
IvĂĄn Loire 17
freelance node.js developer
Sunday, March 25, 2012
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
IvĂĄn Loire 18
freelance node.js developer
Sunday, March 25, 2012
19. Knockout.js model binding
- Declarative binding
IvĂĄn Loire 19
freelance node.js developer
Sunday, March 25, 2012
20. - Define the view-model.
- Knockout automatically
synchronizes UI when model
changes.
IvĂĄn Loire 20
freelance node.js developer
Sunday, March 25, 2012
21. Single Page Interface (SPI)
node.js
socket.io
JSON
{msg: âhi!â}
- Once we have our view model, we just
<span data-bind=âvalue: msgâ> need to push and pull data from and to
the server (by using HTTP or
websockets communication)
browser
We update the view-model using JSON web server
through HTTP or over websockets (faster!)
IvĂĄn Loire 21
freelance node.js developer
Sunday, March 25, 2012
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??
IvĂĄn Loire 23
freelance node.js developer
Sunday, March 25, 2012
24. Zombie.js
var Browser = require("zombie");
var assert = require("assert");
This code will:
browser = new Browser() // Load the page from localhost
browser.visit("http://localhost:3000/", function () { - Create a new instance of zombie browser
browser. // Fill email, password and submit form - Open url
fill("email", "zombie@underworld.dead"). - Find form elements and fill them
fill("password", "eat-the-living").
- Submit form
- Read and analyze the response
pressButton("Sign Me Up!", function() {
// Form submitted, new page loaded.
assert.ok(browser.success);
assert.equal(browser.text("title"), "Welcome To Brains Depot");
})
});
IvĂĄn Loire 24
freelance node.js developer
Sunday, March 25, 2012
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
IvĂĄn Loire 25
freelance node.js developer
Sunday, March 25, 2012
26. Similar to zombie.js
⢠Phantom.js: (PhantomJS is a headless WebKit
with JavaScript AP)
⢠Selenium: (Unit testing with real browsers)
IvĂĄn Loire 26
freelance node.js developer
Sunday, March 25, 2012
27. Last but not least...
⢠Websockets.
⢠Socket.io.
⢠Real-time apps.
IvĂĄn Loire 27
freelance node.js developer
Sunday, March 25, 2012
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)
IvĂĄn Loire 28
freelance node.js developer
Sunday, March 25, 2012
29. HTTP overhead (for each request)
âhello, my name is Chrome, encoding UTF-8...
I would like a web page please.â
+ +
HTTP Headers HTTP Headers
TCP handshake (request) (response)
IvĂĄn Loire 29
freelance node.js developer
Sunday, March 25, 2012
30. Websockets - HTTP handshake negotiated only
once.
- 2 bytes overhead
- Bi-directional full duplex channel.
data + 2 byte overhead
data + 2 byte overhead
TCP handshake
(just first request)
Browser Server
IvĂĄn Loire 30
freelance node.js developer
Sunday, March 25, 2012
31. socket.io
⢠Websockets for the rest of us (even IE!!)
⢠Fallback transports: Websockets is not fully supported in all
browsers yet.
â websockets Some smart people created socket.io, a
library for cross browsing real-time
â flash sockets communication
â ajax long polling If websockets is available, we will use it. If
it is not, it will try fallback transports until
â ajax streaming one of them works.
â iframe
â json polling..
IvĂĄn Loire 31
freelance node.js developer
Sunday, March 25, 2012
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!!
IvĂĄn Loire 32
freelance node.js developer
Sunday, March 25, 2012
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.
IvĂĄn Loire 33
freelance node.js developer
Sunday, March 25, 2012