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
   

   View Slide

2. Batman.js
   

   View Slide

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
   

   View Slide

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
   

   View Slide

5. Batman.js
   

   View Slide

6. Batman.js
   

   View Slide

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
   

   View Slide

8. Underview
   • Keypaths
   • Observables
   • Properties
   • Bindings
   

   View Slide

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}"
   

   View Slide

10. Underview
    • Keypaths
    • Observables
    • Properties
    • Bindings
    • Data sources
    • Models
    • Adapters
    • IOU objects
    

    View Slide

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
    

    View Slide

12. Underview
    • Keypaths
    • Observables
    • Properties
    • Bindings
    • Data sources
    • Models
    • Adapters
    • IOU objects
    • Templates, Views, Controllers
    

    View Slide

13. Batman.js on Rails 4
    Demo
    

    View Slide

14. Overview
    • Rails JSON backend
    • With observers
    • Serving assets
    • Batman.js MVC frontend
    • With adapter
    • View bindings
    • Realtime
    • Over WebSockets
    • With Robin.js
    

    View Slide

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 *
    

    View Slide

16. Snagsnsuch
    • Too much boilerplate *
    • Context subtleties
    • Rails integration
    • Camelization
    • JSON structure
    • Template reuse
    • Handlebars
    • Extra div elements
    • Realtime gotchas
    

    View Slide

17. To the, => @Bat.Poles
    Make something awesome...
    

    View Slide

18. To the, => @Bat.Poles
    ...and follow me on twitter: @nybblr
    

    View Slide