Node conf - building realtime webapps

  • 8,675 views
Uploaded on

Building Realtime Web app

Building Realtime Web app

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
8,675
On Slideshare
0
From Embeds
0
Number of Embeds
9

Actions

Shares
Downloads
112
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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