Building Realtime Web app

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

2. The web is in
DIRECT
competition with native
apps
Friday, 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 AJAX
Friday, May 6, 2011

7. Quick look at
Socket.io
Friday, 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 state
Friday, May 6, 2011

11. Quick Look at
Backbone.js
Friday, 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 app
Friday, May 6, 2011

14. Quick look at
Capsule
Friday, May 6, 2011

15. Backbone.js
+
model nesting
+
serialization
+
event bubbling
Friday, 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 you'd fetch your user from DB based on sessionid
// you'd 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 APIs
Friday, 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