Building Realtime              Singlepage Apps                      @HenrikJoreteg                      (hurray for Twitte...
The web is in                             DIRECT                      competition with native                             ...
Stop supporting                      crappy browsers.                        Just STOP!Friday, May 6, 2011
focus on providing                         compelling                         experiences               (with the latest t...
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);                 ...
Client                      <script src="http://{node_server_url}/socket.io/socket.io.js"></script>                      <...
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({            ini...
Views just listen to model changes                var AppView = Backbone.Model.extend({                  initialize: funct...
Quick look at                        CapsuleFriday, May 6, 2011
Backbone.js                             +                      model nesting                             +                ...
Models shared by Server + Client           (function () {               ... detect and set up environment for CommonJS or ...
Server-side      socket.on(connection, function (client) {        var app, sessionId;          // this is split out so we ...
Clientside                      $(function () {                        var app = window.app = new AppModel();             ...
Clientside cont...                      socket.on(message, function (msg) {                        switch (msg.event) {   ...
Friday, May 6, 2011
Friday, May 6, 2011
Friday, May 6, 2011
Challenges                      • Partially shared state                         Hint, sync everything, have your         ...
Thank you!                         Helpful Resources:           me on twitter: @HenrikJoreteg (hit me up for early invite ...
Upcoming SlideShare
Loading in …5
×

Node conf - building realtime webapps

10,013 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
10,013
On SlideShare
0
From Embeds
0
Number of Embeds
2,510
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

×