0
Building web apps with node.js,      socket.io, knockout.js and zombie.js      Iván Loire      ivan@iloire.com      Freela...
real-time                         javascript    ninja rockstar dev                         Why is everybody talking about ...
What is node.js?                              .. why should you get into it?                     an extra framework to lea...
• high performance javascript library for intensive I/O        operations. (like HTTP)                                    ...
Why node.js?      • Ryan Dahl (creator of node.js):         – “I am not happy with the way web           servers and apps ...
Traditional server                                           - New thread per request                                     ...
Node.js thesis                                                                  •   I/O is expensive.. (see left)         ...
Node.js                                       - Event loop in a single thread                                       - Oper...
Why are we so excited about node.js?                                                       - A new programming language is...
and also...                  node.js is real..                             FUN!!                                          ...
Web development with node.js                              Handling HTTP request is                                    just...
Web development with node.js      Ok, I already made the 5 lines web server example      with node.js. Now... how do I cre...
Node.js community to the rescue!      • Hundreds of modules submitted by programmers like you or        me (hopefully bett...
mmmm... YES, someone did!!!      •    Connect      •    Express.js <- yes, I heard about this one      •    Railways.js <-...
express.js      • High performance, high class web development for node.js.      • Simple, minimalist.              - Expr...
http://expressjs.com                                                 Iván Loire   16                               freelan...
In the browser ..      • Express.js serves HTML pages or render JSON data        as response (faster, lighter)      • We n...
knockout.js      • Rich, responsive display with a clean underlying data        model.        – declarative bindinds <span...
Knockout.js model binding                                           - Declarative binding                                 ...
- Define the view-model.                          - Knockout automatically                          synchronizes UI when m...
Single Page Interface (SPI)                                                                                           node...
Example:     directorio.cachirulovalley.com                                                                - express.js   ...
Zombie.js     from the website (http://zombie.labnotes.org/):     Insanely fast, headless full-stack testing using     Nod...
Zombie.js      var Browser = require("zombie");      var assert = require("assert");                                      ...
Zombie.js      • Tests are meant to be fast (or you won’t run them)            – Zombie.js run your tests on parallel.    ...
Similar to zombie.js      • Phantom.js: (PhantomJS is a headless WebKit        with JavaScript AP)      • Selenium: (Unit ...
Last but not least...      • Websockets.      • Socket.io.      • Real-time apps.                                         ...
Websockets      • Bi-directional, full duplex over a single tcp socket.      • Connection remains open = no tcp handshake ...
HTTP overhead (for each request)                             “hello, my name is Chrome, encoding UTF-8...                 ...
Websockets                  - HTTP handshake negotiated only                                                          once...
socket.io      • Websockets for the rest of us (even IE!!)      • Fallback transports:                   Websockets is not...
Don’t forget a really fast database      • open source, high performance, in-memory, key-value        data store      • su...
node.js / socket.io examples      • Math-Race            – code: https://github.com/iloire/math-race            – demo: ht...
Video:                         http://www.youtube.com/watch?v=LXbYSJfLUW8                                                 ...
node.js / socket.io examples      • Socket-piano            – Play the piano in remote browsers.            – code: https:...
New generation of low latency mobile                     web apps              SenchaTouch2 + node.js + socket.io         ...
Video:                         http://www.youtube.com/watch?v=yyHl4cGOlss                                                 ...
That’s all folks!                         Eso es todo amigos!                           Iván Loire @ivanloire             ...
Upcoming SlideShare
Loading in...5
×

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

56,393

Published on

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

Published in: Technology
2 Comments
87 Likes
Statistics
Notes
No Downloads
Views
Total Views
56,393
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
879
Comments
2
Likes
87
Embeds 0
No embeds

No notes for slide

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

  1. 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.comSunday, March 25, 2012
  2. 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 developerSunday, March 25, 2012
  3. 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 developerSunday, March 25, 2012
  4. 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 developerSunday, March 25, 2012
  5. 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 developerSunday, March 25, 2012
  6. 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 developerSunday, March 25, 2012
  7. 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 developerSunday, March 25, 2012
  8. 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 developerSunday, March 25, 2012
  9. 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 developerSunday, March 25, 2012
  10. 10. and also... node.js is real.. FUN!! Iván Loire 10 freelance node.js developerSunday, March 25, 2012
  11. 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 developerSunday, March 25, 2012
  12. 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 developerSunday, March 25, 2012
  13. 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 developerSunday, March 25, 2012
  14. 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 developerSunday, March 25, 2012
  15. 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 developerSunday, March 25, 2012
  16. 16. http://expressjs.com Iván Loire 16 freelance node.js developerSunday, March 25, 2012
  17. 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 developerSunday, March 25, 2012
  18. 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 developerSunday, March 25, 2012
  19. 19. Knockout.js model binding - Declarative binding Iván Loire 19 freelance node.js developerSunday, March 25, 2012
  20. 20. - Define the view-model. - Knockout automatically synchronizes UI when model changes. Iván Loire 20 freelance node.js developerSunday, March 25, 2012
  21. 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 developerSunday, March 25, 2012
  22. 22. Example: directorio.cachirulovalley.com - express.js - knockout.js - redis (db) https://github.com/iloire/cachirulovalleydirectory Iván Loire 22 freelance node.js developerSunday, March 25, 2012
  23. 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 developerSunday, March 25, 2012
  24. 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 developerSunday, March 25, 2012
  25. 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 developerSunday, March 25, 2012
  26. 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 developerSunday, March 25, 2012
  27. 27. Last but not least... • Websockets. • Socket.io. • Real-time apps. Iván Loire 27 freelance node.js developerSunday, March 25, 2012
  28. 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 developerSunday, March 25, 2012
  29. 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 developerSunday, March 25, 2012
  30. 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 developerSunday, March 25, 2012
  31. 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 developerSunday, March 25, 2012
  32. 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 developerSunday, March 25, 2012
  33. 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 developerSunday, March 25, 2012
  34. 34. Video: http://www.youtube.com/watch?v=LXbYSJfLUW8 Iván Loire 34 freelance node.js developerSunday, March 25, 2012
  35. 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... Iván Loire 35 freelance node.js developerSunday, March 25, 2012
  36. 36. New generation of low latency mobile web apps SenchaTouch2 + node.js + socket.io Iván Loire 36 freelance node.js developerSunday, March 25, 2012
  37. 37. Video: http://www.youtube.com/watch?v=yyHl4cGOlss Iván Loire 37 freelance node.js developerSunday, March 25, 2012
  38. 38. That’s all folks! Eso es todo amigos! Iván Loire @ivanloire http://iloire.com Iván Loire 38 freelance node.js developerSunday, March 25, 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×