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 / batmanPUBLIC
CodeCode NetworkNetwork Pull RequestsPull Requests IssuesIssues WikiWiki GraphsGraphs1818 9595
WatchWatch UnstarUnstar 1,386 ForkFork 149
Search or type a commandThis repositoryThis 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 / batmanPUBLIC
CodeCode NetworkNetwork Pull RequestsPull Requests IssuesIssues WikiWiki GraphsGraphs1818 9595
WatchWatch UnstarUnstar 1,386 ForkFork 149
Search or type a commandThis repositoryThis repository

4. Batman.js
#1hornairs
887 commits / 312,981 ++ / 286,603 --
04/11 10/11 04/12 10/12 04/13
20
40
#2nickjs
451 commits / 71,198 ++ / 37,029 --
04/11 10/11 04/12 10/12 04/13
20
40
#3jamesmacaulay
193 commits / 13,651 ++ / 7,793 --
04/11 10/11 04/12 10/12 04/13
20
40
#4kristianpd
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 / batmanPUBLIC
CodeCode NetworkNetwork Pull RequestsPull Requests IssuesIssues WikiWiki GraphsGraphs1818 9595
CommitsCommitsContribution Type:Contribution Type:
April July October 2012 April July October 2013 April
0
20
40
60
80
WatchWatch UnstarUnstar 1,386 ForkFork 149
Search or type a commandThis repositoryThis repository
#1hornairs
887 commits / 312,981 ++ / 286,603 --
04/11 10/11 04/12 10/12 04/13
20
40
#2nickjs
451 commits / 71,198 ++ / 37,029 --
04/11 10/11 04/12 10/12 04/13
20
40
#3jamesmacaulay
193 commits / 13,651 ++ / 7,793 --
04/11 10/11 04/12 10/12 04/13
20
40
#4kristianpd
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 / batmanPUBLIC
CodeCode NetworkNetwork Pull RequestsPull Requests IssuesIssues WikiWiki GraphsGraphs1818 9595
CommitsCommitsContribution Type:Contribution Type:
April July October 2012 April July October 2013 April
0
20
40
60
80
WatchWatch UnstarUnstar 1,386 ForkFork 149
Search or type a commandThis repositoryThis 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. Underviewclass 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