Node conf - building realtime webapps

Building Realtime Singlepage Apps @HenrikJoreteg (hurray for Twitter)Friday, May 6, 2011

The web is in DIRECT competition with native appsFriday, May 6, 2011

Stop supporting crappy browsers. Just STOP!Friday, May 6, 2011

focus on providing compelling experiences (with the latest technologies)Friday, May 6, 2011

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); 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

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

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({ 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

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

Quick look at CapsuleFriday, May 6, 2011

Backbone.js + model nesting + serialization + event bubblingFriday, May 6, 2011

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

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

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

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

Friday, May 6, 2011

Challenges • Partially shared state Hint, sync everything, have your view render what’s relevant • Scaling • Providing external APIsFriday, May 6, 2011

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

http://joreteg.com	622
http://www.nodejser.com	51
http://lanyrd.com	41
http://localhost	26
http://coderwall.com	18
http://feeds.feedburner.com	5
http://mzhou.me	4
http://hpf1908.gotoip1.com	2
http://www.slideshare.net	1
https://lanyrd.com	1
http://twitter.com	1

Node conf - building realtime webapps

by Henrik Joreteg on May 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 772

Statistics

Node conf - building realtime webapps — Presentation Transcript