Your SlideShare is downloading. ×
0
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Node conf - building realtime webapps
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Node conf - building realtime webapps

9,344

Published on

Building Realtime Web app

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,344
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
113
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

×