Keeping Your Clients ‘NSync - Node.js and Derby: The New Kids on the Block

My presentation for Pivotal Labs NY 4/3/2012 on Derby, the new multi-client synchronization framework made by Nate Smith and Brian Noguchi.
Code from demo at: http://github.com/ledwards/skyhopper

Transcript

1. chat.derbyjs.com/pivotal Tuesday, April 3, 12
2. Tuesday, April 3, 12
3. Keeping Your Clients ‘NSync Node.js and Derby: The New Kids on the Block Lee Edwards April 3, 2012 Tuesday, April 3, 12
4. 1995 Tuesday, April 3, 12
5. 1996 • Warcraft II • Diablo • Ultima Online Tuesday, April 3, 12
6. Tuesday, April 3, 12
7. Sockets in Python import socket s = socket.socket() s.connect((address, port)) s.send("Request Data") print s.recv(4096) s.close() Tuesday, April 3, 12
8. Complications Tuesday, April 3, 12
9. Enter the Web Browser Tuesday, April 3, 12
10. HTTP Sucks at Games Tuesday, April 3, 12
11. Polling Tuesday, April 3, 12
12. Polling on Rails <div id="inbox_status">Unknown</div> <%= periodically_call_remote :url => { :action => 'get_inbox_status', :user_id => @user.id}, :update => 'inbox_status', :frequency => 60, :condition => "$('inbox_status').innerHTML == 'Unknown'", :before => "Element.show('progress_indicator')", :complete => "Element.hide('progress_indicator')" }%> Tuesday, April 3, 12
13. Comet Subvert HTTP 1.1 using: • Forever iframe • XHR/multipart • XHR Long Polling Tuesday, April 3, 12
14. Alternatives Tuesday, April 3, 12
15. Promises, Promises Tuesday, April 3, 12
16. One Good Answer • Leave the HTTP 1.1 standard alone • Leave the browser idiosyncrasies alone • Build high-level abstraction on top of them • Client API (Javascript) • Server API (Ruby, or something less cool) Tuesday, April 3, 12
17. Wait, Two Languages? Tuesday, April 3, 12
18. • Server-side Javascript • Built on V8 Engine • Event-driven • Non-blocking I/O Tuesday, April 3, 12
19. • Demo Tuesday, April 3, 12
20. • Node-based MVC framework • Heavily Rails inspired • Includes a router! • Supports sessions! • Has a few templating engine choices! Tuesday, April 3, 12
21. • Hey, look at this code Tuesday, April 3, 12
22. • Compatible with every browser (IE > 5.5) • ...Including mobile browsers! • Cross-domain connections • Heartbeats, timeouts, disconnect events Tuesday, April 3, 12
23. Tuesday, April 3, 12
24. Tuesday, April 3, 12
25. Derby • HTML templating with view bindings • Model syncing • Conflict resolution • Persistence • Performance oriented • Built on Racer - no glue code Tuesday, April 3, 12
26. Demo http://github.com/ledwards/skyhopper Tuesday, April 3, 12
27. File Structure Tuesday, April 3, 12
28. Creating Players get('/play/:gameId?', function(page, model, params) { var gameId = params.gameId; model.subscribe({ _game: 'game.' + params.gameId }, function() { var nextPlayerCount = (model.get('_game.players.length') || 0) + 1; model.push('_game.players', { name: "Player " + nextPlayerCount }); model.set('_game.playerCount', nextPlayerCount); model.ref('_player', '_game.players.' + (nextPlayerCount - 1)); page.render({ gameId: gameId, }); }); }); Tuesday, April 3, 12
29. Creating Cards model.push('_player.cards', { "thumbnail-url": "http://.." + randomInt + ".gif", domId: model.get('_player.name') + model.get('_player.nextCardIndex'), ownerIndex: model.get('_game.players').indexOf(model.get('_player')), cardIndex: model.get('_player.nextCardIndex'), position: { top: "0px", left: "0px" } }); Tuesday, April 3, 12
30. Views <Title:> Skyhopper: Game #{{_game.id}} <Scripts:> <script src="https://ajax.googleapis.com...jquery.min.js"></script> <script src="https://ajax.googleapis.com...jquery-ui.min.js"></ script> <script src="/javascripts/skyhopper.js"></script> <Body:> ... Tuesday, April 3, 12
31. <Body:> <h1>Welcome ((_player.name))</h1> <p><label>Your name: <input value="((_player.name))"></label> <p>There are ((_game.playerCount)) players in the game:</p> <div id="players"> <ul> ((#_game.players)) <li>((.name))</li> ((/)) </ul> </div> <div id="table"> ((#_game.players)) ((.cards > card)) ((/)) </div> <card:> ... Tuesday, April 3, 12
32. Partials <card:> <div class="card" id="{{.domId}}" style="top: {{.position.top}}; left: {{.position.left}};" x-bind="mouseup:dragEnd"> <img src="{{.thumbnail-url}}"/> </div> Tuesday, April 3, 12
33. Events exports.dragEnd = function(e) { var element = $(e.target); var top = element.position().top + "px"; var left = element.position().left + "px"; var card = model.at(element); for (playerIndex in model.get('_game.players')) { card.set('position', { top: top, left: left }); }; } Tuesday, April 3, 12
34. Callbacks model.on('set', '_game.players.*.cards.*.position', function(playerIndex, cardIndex, position) { var domId = model.get('_game.players.' + playerIndex + '.cards.' + cardIndex + '.domId'); var element = jQuery("#" + domId); element.css('left', position.left); element.css('top', position.top); } ); Tuesday, April 3, 12
35. Derbyjs.com Tuesday, April 3, 12