Node conf - building realtime webapps
Upcoming SlideShare
Loading in...5
×
 

Node conf - building realtime webapps

on

  • 8,050 views

Building Realtime Web app

Building Realtime Web app

Statistics

Views

Total Views
8,050
Views on SlideShare
6,336
Embed Views
1,714

Actions

Likes
9
Downloads
112
Comments
0

16 Embeds 1,714

http://joreteg.com 1457
http://www.nodejser.com 69
http://lanyrd.com 67
http://localhost 45
http://feeds.feedburner.com 23
http://coderwall.com 19
http://abtasty.com 18
http://mzhou.me 4
http://henrikjoreteg.tumblr.com 3
http://hpf1908.gotoip1.com 2
http://webcache.googleusercontent.com 2
http://192.168.25.11 1
https://lanyrd.com 1
http://twitter.com 1
http://www.slideshare.net 1
https://twitter.com 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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Node conf - building realtime webapps Node conf - building realtime webapps Presentation Transcript

  • Building Realtime Singlepage Apps @HenrikJoreteg (hurray for Twitter)Friday, May 6, 2011
  • The web is in DIRECT competition with native appsFriday, May 6, 2011
  • Stop supporting crappy browsers. Just STOP!Friday, May 6, 2011
  • focus on providing compelling experiences (with the latest technologies)Friday, May 6, 2011
  • Adoption is directly related to how easy it is to tinker with.Friday, May 6, 2011
  • Socket.io is to realtime what jQuery is to AJAXFriday, May 6, 2011
  • Quick look at Socket.ioFriday, May 6, 2011
  • Server var http = require(http),       io = require(socket.io); server = http.createServer(function(req, res){  // your normal server code  res.writeHead(200, {Content-Type: text/html});  res.end(<h1>Hello world</h1>); }); server.listen(80);   // socket.io var socket = io.listen(server); socket.on(connection, function(client){   // new client is here!   client.on(message, function(){ … })   client.on(disconnect, function(){ … }) });Friday, May 6, 2011
  • Client <script src="http://{node_server_url}/socket.io/socket.io.js"></script> <script>   var socket = new io.Socket({node_server_url});   socket.connect();   socket.on(connect, function(){ … })   socket.on(message, function(){ … })   socket.on(disconnect, function(){ … }) </script>Friday, May 6, 2011
  • It’s all about stateFriday, May 6, 2011
  • Quick Look at Backbone.jsFriday, May 6, 2011
  • Backbone gives you Observable Models & Collections var App = Backbone.Model.extend({ initialize: function () { this.bind(‘change:myProperty’, _(this.writeIt).bind(this)); }, writeIt: function () { console.log(“my prop is: “ + this.get(‘myProperty’)); } }); app = new App(); app.set({myProperty: true}); // outputs: “my prop is: true”Friday, May 6, 2011
  • Views just listen to model changes var AppView = Backbone.Model.extend({ initialize: function () { this.model.bind(‘change’, _(this.render).bind(this)); }, render: function () { this.el.html(ich.app(this.model.toJSON())); return this; } }); var app = new App(); // init our model var appView = new AppView({ model: app, el: document.body }); // init our view appView.render(); app.set({myProperty: true}); // will re-render the whole appFriday, May 6, 2011
  • Quick look at CapsuleFriday, May 6, 2011
  • Backbone.js + model nesting + serialization + event bubblingFriday, May 6, 2011
  • Models shared by Server + Client (function () { ... detect and set up environment for CommonJS or browser here // Main app model exports.AppModel = Capsule.Model.extend({ type: app, initialize: function (spec) { this.register(); this.addChildCollection(members, exports.Members); this.addChildModel(activityLog, exports.ActivityLogPage); } }); // other models exports.Members = ... })();Friday, May 6, 2011
  • Server-side socket.on(connection, function (client) { var app, sessionId; // this is split out so we have a reference to it function sendClientChanges(changes) { client.send(changes); } client.on(message, function(message){ var model, collection; switch (message.event) { case session: ... // Here youd fetch your user from DB based on sessionid // youd also get the corresponding app state that they should have access to. // `require` your shared models file and inflate or instantiate your root app model // Then grab whatever else you need and send the intial state to the client. client.send({ event: initial, app: app.xport() }); // bind to the root `publish` events to send any changes to this client app.bind(publish, sendClientChanges); ...Friday, May 6, 2011
  • Clientside $(function () { var app = window.app = new AppModel(); window.socket = new io.Socket(); // get and send our session cookie socket.on(connect, function() { socket.send({ event: session, cookie: $.cookie(&!) }); }); socket.on(‘message’, ... });Friday, May 6, 2011
  • Clientside cont... socket.on(message, function (msg) { switch (msg.event) { case initial: //import app state app.mport(msg.app); // init and render our root view view = window.view = new AppView({ el: $(body), model: app }).render(); break; case change: app.modelGetter(msg.id).set(msg.data); break; ... other cases for `add`, `remove` etc. } });Friday, May 6, 2011
  • Friday, May 6, 2011
  • Friday, May 6, 2011
  • Friday, May 6, 2011
  • Challenges • Partially shared state Hint, sync everything, have your view render what’s relevant • Scaling • Providing external APIsFriday, May 6, 2011
  • Thank you! Helpful Resources: me on twitter: @HenrikJoreteg (hit me up for early invite to &!) Backbone.js: http://documentcloud.github.com/backbone/ Capsule.js: https://github.com/andyet/capsule App Testing: http://funcunit.com, http://mwbrooks.github.com/dominator.js/Friday, May 6, 2011