• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building web apps with node.js, socket.io, knockout.js and zombie.js - Codemotion 2012
 

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

on

  • 51,680 views

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

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

Statistics

Views

Total Views
51,680
Views on SlideShare
48,615
Embed Views
3,065

Actions

Likes
84
Downloads
840
Comments
2

25 Embeds 3,065

http://www.scoop.it 1494
http://blog.varunraiseth.org 843
https://twitter.com 312
http://esouillat.wordpress.com 194
http://dilberted.wordpress.com 131
http://rg443blog.wordpress.com 13
http://us-w1.rockmelt.com 11
https://si0.twimg.com 10
http://www.twylah.com 9
http://www.yatedo.fr 7
https://twimg0-a.akamaihd.net 6
http://twitter.com 6
http://affordablegigs.com 5
http://www.linkedin.com 5
http://www.verious.com 4
http://www.slashdocs.com 4
http://translate.googleusercontent.com 2
http://slidecastr.heroku.com 2
https://mail.google.com 1
http://www2.verious.com 1
http://localhost 1
http://webcache.googleusercontent.com 1
http://paper.li 1
http://nodeslide.herokuapp.com 1
http://red.postach.io 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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
    • 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
    • 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
    • • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • and also... node.js is real.. FUN!! Iván Loire 10 freelance node.js developerSunday, March 25, 2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • http://expressjs.com Iván Loire 16 freelance node.js developerSunday, March 25, 2012
    • 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
    • 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
    • Knockout.js model binding - Declarative binding Iván Loire 19 freelance node.js developerSunday, March 25, 2012
    • - Define the view-model. - Knockout automatically synchronizes UI when model changes. Iván Loire 20 freelance node.js developerSunday, March 25, 2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Last but not least... • Websockets. • Socket.io. • Real-time apps. Iván Loire 27 freelance node.js developerSunday, March 25, 2012
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Video: http://www.youtube.com/watch?v=LXbYSJfLUW8 Iván Loire 34 freelance node.js developerSunday, March 25, 2012
    • 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
    • New generation of low latency mobile web apps SenchaTouch2 + node.js + socket.io Iván Loire 36 freelance node.js developerSunday, March 25, 2012
    • Video: http://www.youtube.com/watch?v=yyHl4cGOlss Iván Loire 37 freelance node.js developerSunday, March 25, 2012
    • 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