Node conf - building realtime webapps

  • View
    9.135

  • Download
    0

Embed Size (px)

DESCRIPTION

Building Realtime Web app

Text of Node conf - building realtime webapps

  • 1.Building RealtimeSinglepage Apps@HenrikJoreteg(hurray for Twitter)Friday, May 6, 2011

2. The web is in DIRECTcompetition with native appsFriday, May 6, 2011 3. Stop supportingcrappy browsers.Just STOP!Friday, May 6, 2011 4. focus on providing compelling experiences (with the latest technologies)Friday, May 6, 2011 5. Adoption is directlyrelated to how easy it is to tinker with.Friday, May 6, 2011 6. Socket.io is to realtimewhat jQuery is to AJAXFriday, May 6, 2011 7. Quick look at Socket.ioFriday, May 6, 2011 8. Servervar http = require(http), io = require(socket.io);server = http.createServer(function(req, res){// your normal server coderes.writeHead(200, {Content-Type: text/html});res.end(Hello world);});server.listen(80);// socket.iovar 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. ClientFriday, May 6, 2011 10. Its all about stateFriday, May 6, 2011 11. Quick Look at Backbone.jsFriday, May 6, 2011 12. Backbone gives you Observable Models & Collectionsvar 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: trueFriday, May 6, 2011 13. Views just listen to model changesvar 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 modelvar appView = new AppView({ model: app, el:document.body }); // init our viewappView.render();app.set({myProperty: true}); // will re-render the whole appFriday, May 6, 2011 14. Quick look atCapsuleFriday, 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-sidesocket.on(connection, function (client) {var app, sessionId;// this is split out so we have a reference to itfunction 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 clientapp.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 cookiesocket.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 stateapp.mport(msg.app);// init and render our root viewview = 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 whats 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