38
[email protected] Freelance node.js developer http://iloire.com http://letsnode.com Iván Loire Building web apps with node.js, socket.io, knockout.js and zombie.js Sunday, March 25, 2012

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

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

[email protected]

Freelance node.js developer

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

Iván Loire

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

Sunday, March 25, 2012

Page 2: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

2

Why is everybody talking about Node.js?

What are we node.js developers so excited about?

hypecool

ninja rockstar dev

startup

javascriptreal-time

nodeconf

sockets

Sunday, March 25, 2012

Page 3: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

3

What is node.js?

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

.. why should you get into it?

Sunday, March 25, 2012

Page 4: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance 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.• modular. Excellent package manager: NPM

- 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.

Sunday, March 25, 2012

Page 5: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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

5

- Thanks Ryan!

Sunday, March 25, 2012

Page 6: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

6

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

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.

Sunday, March 25, 2012

Page 7: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Node.js thesis

7

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

• 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.

Sunday, March 25, 2012

Page 8: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

8

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

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

Sunday, March 25, 2012

Page 9: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

9

• 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)

Why are we so excited about node.js?

it just works, well and fast!!

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

Sunday, March 25, 2012

Page 10: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

10

and also...

node.js is real..

FUN!!Sunday, March 25, 2012

Page 11: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

11

Web development with node.js

Handling HTTP request is just I/O right?

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

Sunday, March 25, 2012

Page 12: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Web development with node.js

• 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 ?

12

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

Sunday, March 25, 2012

Page 13: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Node.js community to the rescue!

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

13

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

well, let’s see...

Sunday, March 25, 2012

Page 14: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

mmmm... YES, someone did!!!

• Connect• Express.js• Railways.js• Geddy.js• Tower.js• SocketStream (websockets)• ...

14

<- yes, I heard about this one<- this is rails style right?

Sunday, March 25, 2012

Page 15: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

express.js

15

• High performance, high class web development for node.js.• Simple, minimalist.• Sexy ..really fast.

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.

- 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.

Sunday, March 25, 2012

Page 16: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

16

http://expressjs.com

Sunday, March 25, 2012

Page 17: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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...

17

something like...

Sunday, March 25, 2012

Page 18: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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

18

Sunday, March 25, 2012

Page 19: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

19

Knockout.js model binding

- Declarative binding

Sunday, March 25, 2012

Page 20: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

20

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

Sunday, March 25, 2012

Page 21: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

21

socket.io

web server

node.js

browser

JSON{msg: ‘hi!’}

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

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

- 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)

Single Page Interface (SPI)

Sunday, March 25, 2012

Page 22: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

directorio.cachirulovalley.com

22

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

Example:

https://github.com/iloire/cachirulovalleydirectory

Sunday, March 25, 2012

Page 23: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Zombie.js

23

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

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

Why everything is “INSANELY fast”in this presentation??

hey!

Sunday, March 25, 2012

Page 24: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Zombie.js

24

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", "[email protected]").

fill("password", "eat-the-living").

pressButton("Sign Me Up!", function() {

// Form submitted, new page loaded.

assert.ok(browser.success);

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

})

});

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

Sunday, March 25, 2012

Page 25: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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

25

Sunday, March 25, 2012

Page 26: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Similar to zombie.js

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

• Selenium: (Unit testing with real browsers)

26

Sunday, March 25, 2012

Page 27: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Last but not least...

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

27

Sunday, March 25, 2012

Page 28: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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)

28

Sunday, March 25, 2012

Page 29: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

HTTP overhead (for each request)

29

TCP handshake

+

HTTP Headers(request)

HTTP Headers(response)

+

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

Sunday, March 25, 2012

Page 30: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

Websockets

30

TCP handshake(just first request)

data + 2 byte overhead

data + 2 byte overhead

Browser Server

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

Sunday, March 25, 2012

Page 31: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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

• Fallback transports:– websockets– flash sockets– ajax long polling– ajax streaming– iframe – json polling..

31

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.

Sunday, March 25, 2012

Page 32: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

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!• if (ACID) durability is not needed...

32

INSANELY FAST!!don’t tell me...

Sunday, March 25, 2012

Page 33: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

node.js / socket.io examples

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

33

- 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

Page 34: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

34

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

Video:

Sunday, March 25, 2012

Page 35: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

node.js / socket.io examples

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

35

Let’s try the demo...

Sunday, March 25, 2012

Page 36: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

New generation of low latency mobile web apps

36

SenchaTouch2 + node.js + socket.io

Sunday, March 25, 2012

Page 37: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

37

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

Video:

Sunday, March 25, 2012

Page 38: Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012

Iván Loirefreelance node.js developer

That’s all folks!

38

Eso es todo amigos!

Iván Loire @ivanloirehttp://iloire.com

Sunday, March 25, 2012