Into the Batmobile: Realtime Batman.js with Robin.js and Rails.

My talk at the Atlanta Ruby User's Group (ATLRUG) on June 12th, 2013. Live code demo for ground up design of a frontend resourceful application with integrated realtime and a handful of UI goodies. All backed by Rails.

Find the recording of the talk over at https://vimeo.com/68354627

Batman.js:
https://github.com/Shopify/batman

Robin.js (realtime):
https://github.com/nybblr/robin

Starter app (completed app in a separate branch):
https://github.com/nybblr/awesome-starter

Dashing: a Batman powered dashboard for idle screens:
https://github.com/Shopify/dashing

Zach Hubert has a lot of great articles on Batman stuff:
http://www.zhubert.com/

Transcript

1. Into the, => @Bat.mobile Jonathan Martin twitter.com/nybblr github.com/nybblr
2. Batman.js
3. Batman.js Use ← and → to navigate 0 10 20 30 06/09 06/30 07/21 08/11 09/01 09/22 10/13 11/03 11/24 12/15 01/05 01/26 02/16 03/09 03/30 04/20 05/11 06/01 0 2 4 6 8 10 12 Sunday Monday Tuesday Wednesday Thursday Friday Saturday 0 3 3 12 5 0 0 Shopify / batman PUBLIC Code Code Network Network Pull Requests Pull Requests Issues Issues Wiki Wiki Graphs Graphs 18 18 95 95 Watch Watch Unstar Unstar 1,386 Fork Fork 149 Search or type a command This repository This repository Use ← and → to navigate 0 10 20 30 06/09 06/30 07/21 08/11 09/01 09/22 10/13 11/03 11/24 12/15 01/05 01/26 02/16 03/09 03/30 04/20 05/11 06/01 0 2 4 6 8 10 12 Sunday Monday Tuesday Wednesday Thursday Friday Saturday 0 3 3 12 5 0 0 Shopify / batman PUBLIC Code Code Network Network Pull Requests Pull Requests Issues Issues Wiki Wiki Graphs Graphs 18 18 95 95 Watch Watch Unstar Unstar 1,386 Fork Fork 149 Search or type a command This repository This repository
4. Batman.js #1 hornairs 887 commits / 312,981 ++ / 286,603 -- 04/11 10/11 04/12 10/12 04/13 20 40 #2 nickjs 451 commits / 71,198 ++ / 37,029 -- 04/11 10/11 04/12 10/12 04/13 20 40 #3 jamesmacaulay 193 commits / 13,651 ++ / 7,793 -- 04/11 10/11 04/12 10/12 04/13 20 40 #4 kristianpd 77 commits / 4,525 ++ / 1,748 -- 04/11 10/11 04/12 10/12 04/13 20 40 January 8th 2011 ‐ June 1st 2013 Commits to master, excluding merge commits Shopify / batman PUBLIC Code Code Network Network Pull Requests Pull Requests Issues Issues Wiki Wiki Graphs Graphs 18 18 95 95 Commits Commits Contribution Type: Contribution Type: April July October 2012 April July October 2013 April 0 20 40 60 80 Watch Watch Unstar Unstar 1,386 Fork Fork 149 Search or type a command This repository This repository #1 hornairs 887 commits / 312,981 ++ / 286,603 -- 04/11 10/11 04/12 10/12 04/13 20 40 #2 nickjs 451 commits / 71,198 ++ / 37,029 -- 04/11 10/11 04/12 10/12 04/13 20 40 #3 jamesmacaulay 193 commits / 13,651 ++ / 7,793 -- 04/11 10/11 04/12 10/12 04/13 20 40 #4 kristianpd 77 commits / 4,525 ++ / 1,748 -- 04/11 10/11 04/12 10/12 04/13 20 40 January 8th 2011 ‐ June 1st 2013 Commits to master, excluding merge commits Shopify / batman PUBLIC Code Code Network Network Pull Requests Pull Requests Issues Issues Wiki Wiki Graphs Graphs 18 18 95 95 Commits Commits Contribution Type: Contribution Type: April July October 2012 April July October 2013 April 0 20 40 60 80 Watch Watch Unstar Unstar 1,386 Fork Fork 149 Search or type a command This repository This repository
5. Batman.js
6. Batman.js
7. Batman.js • 0.5.0 released August 2011 • Created by Nick Small • ...and some other Shoppers =) • The name? • Something about an Arduino • Elevator pitch • Rails values • Rails looks • Rails rock
8. Underview • Keypaths • Observables • Properties • Bindings
9. Underview class Awesome.Object extends Batman.Object # Default accessors @accessor 'myFirstName', 'myLastName' # Computed properties @accessor 'fullName', => @get('myFirstName') + @get('myLastName') # Callbacks when changes happen @observe 'fullName', (newValue, oldValue) => value = Person.find(oldValue).set 'name', newValue @fire 'hashedName', value # Catch fired events @on 'hashedName', (value) => alert "Hello there! My hashed name is #{value}"
10. Underview • Keypaths • Observables • Properties • Bindings • Data sources • Models • Adapters • IOU objects
11. Underview class Awesome.Post extends Batman.Model # Persist with extension of RESTStorage @persist Batman.RailsStorage # Define attributes @encode 'title', 'body', 'tags', 'published' @encode 'publishedOn', Batman.Encoders.railsDate class Awesome.PostsController extends Batman.Controller # Save from minification pain routingKey: 'posts' index: (params) -> # Set in controller context with => iou = Awesome.Post.load (err, results) => # Returns a Batman.Set @set 'posts', results
12. Underview • Keypaths • Observables • Properties • Bindings • Data sources • Models • Adapters • IOU objects • Templates, Views, Controllers
13. Batman.js on Rails 4 Demo
14. Overview • Rails JSON backend • With observers • Serving assets • Batman.js MVC frontend • With adapter • View bindings • Realtime • Over WebSockets • With Robin.js
15. CanShame • CoffeeScript • Idiomatic • Two-way bindings • Gorgeous architecture • As Low Level As Possible • Keep It Consistent, Stupid • Don’t Make Me Repeat Myself • Low boilerplate *
16. Snagsnsuch • Too much boilerplate * • Context subtleties • Rails integration • Camelization • JSON structure • Template reuse • Handlebars • Extra div elements • Realtime gotchas
17. To the, => @Bat.Poles Make something awesome...
18. To the, => @Bat.Poles ...and follow me on twitter: @nybblr