Node conf - building realtime webapps

9,863 views
9,779 views

Published on

Building Realtime Web app

Published in: Technology, Business
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,863
On SlideShare
0
From Embeds
0
Number of Embeds
2,505
Actions
Shares
0
Downloads
114
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Node conf - building realtime webapps

  1. 1. Building Realtime Singlepage Apps @HenrikJoreteg (hurray for Twitter)Friday, May 6, 2011
  2. 2. The web is in DIRECT competition with native appsFriday, May 6, 2011
  3. 3. Stop supporting crappy browsers. Just STOP!Friday, May 6, 2011
  4. 4. focus on providing compelling experiences (with the latest technologies)Friday, May 6, 2011
  5. 5. Adoption is directly related to how easy it is to tinker with.Friday, May 6, 2011
  6. 6. Socket.io is to realtime what jQuery is to AJAXFriday, May 6, 2011
  7. 7. Quick look at Socket.ioFriday, May 6, 2011
  8. 8. 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
  9. 9. 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
  10. 10. It’s all about stateFriday, May 6, 2011
  11. 11. Quick Look at Backbone.jsFriday, May 6, 2011
  12. 12. 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
  13. 13. 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
  14. 14. Quick look at CapsuleFriday, May 6, 2011
  15. 15. Backbone.js + model nesting + serialization + event bubblingFriday, May 6, 2011
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. Friday, May 6, 2011
  21. 21. Friday, May 6, 2011
  22. 22. Friday, May 6, 2011
  23. 23. Challenges • Partially shared state Hint, sync everything, have your view render what’s relevant • Scaling • Providing external APIsFriday, May 6, 2011
  24. 24. 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

×