This presentation was given on the Arrrrug meeting as a first introduction to backbone.js in combination with rails after playing a couple of weeks with backbone.js. Note: It is really on introduction level, in the meantime, my level of backbone.js and coffeescript have increased.

1. Dummies
ne.js for
Backb o backbon e wi t h
uction to use
I ntrod s 3.1.x
Rail

2. Everybody
needs an intro
course, Right?

3. 3 Reasons to Use a
Front End Framework?

4. 1. It Makes Your Front-
End Code Testable

5. 2. It Makes Your Front-
End Code Testable

6. 3. It Makes Your Front-
End Code Testable

7. Jasmine.js

8. Other Benefits
• Responsive UI with Event-Driven Communication
• Maintainable Client Side Code by Convention
• Easy Client-Server Syncing (RESTful)
• Easy to integrate Web-Socket Technology
• Works very well together with the Rails Asset
Pipeline

9. The Rails Way
• Have you ever felt limited by Rail’s way to
structure your App around resources and
the RESTful actions. Do you design your
Rails app in such a way (scaffoldish) that its
easy and cheap to develop?
• Would you like to do what-ever you want
on the front-end, but still use a restful, well
structured, testable back-end?

10. Example App

11. Demo:
Have a look at the App

12. http://documentcloud.github.com/backbone/

13. Learning Backbone.js
This presentation is not a course, there are many
catches, do some good training, it will help you.
• Sources:
• Peepcode.com has 3 very good screencasts.
http://peepcode.com/products/backbone-js
• Thoughtbot has a very good book:
https://workshops.thoughtbot.com/
backbone-js-on-rails

14. Cookbook
• Rails 3.1.3
• Backbone.js
• JQuery
• Pusher
• EJS Templates
• Backbone Forms

15. Backbone.js
• Model,View, Router
• Lightweight (< 700 lines)
• No UI Widgets - Write your own html,
erb, haml, css, scss, sass
• Template Agnostic, bring your own

16. Use

17. www.coffeescript.org

18. Use a Push Technology
• Faye - http://faye.jcoglan.com/
• Event Machine - http://
rubyeventmachine.com/
• Pusher

19. www.pusher.com

20. Pusher
• It’s a complete abstraction of Push Technology in a SAAS
approach
• How does it work?
• Backend App send posts to Pusher server (Pusher
GEM)
• Front-End uses Javascript to receive the events
• Channel based
• Uses web-sockets and falls back to Flash

21. jquery / zepto and
Backbone.js
• JQuery / Zepty: mark-up oriented
• Backbone.js:
• Data Oriented
Manipulate data and views are updated
automatically.
• Single Page Application. Router ensures that
the correct data is shown.
• You need Both!

22. Templates
• .jst Templates (ejs) - http://embeddedjs.com
• The templates are rendered and then
enriched with data by JQuery or Zepto
• Backbone-Forms - https://github.com/
powmedia/backbone-forms

23. Example App: Shopping
List App

24. Application Structure
• Details are free to chose - here a proposal
is given - some people organise differently
• All Front End Code goes into
• app/assets/javascripts
• lib/assets/javascripts
• vendor/assets/javascripts

25. Application Structure
Collections
Models
Routers
App
Views

26. RSpec - Jasmine
Structure

27. App
Not part of Backbone as such...
Used to have a namespace in JavaScript and
to avoid the information hiding problems of
JavaScript

28. App Specs

29. App Implementation

30. Models
Basic data structure used to capture behavior
of single instances. Instance methods,
abstraction sever interaction: save, destroy.

31. Model Spec

32. Models

33. Usage of Models

34. Collections
Data stucture to manage sets of instances.
Methods for filtering, sorting, abstraction of
server interaction: fetch.

35. Fixtures

36. Collection Specs

37. Collection

38. Views
• Used to view and interact with data
• More comparable with a Rails controller
than a Rails view.
• Binds to Models and Collections to re-
render itself when required.

39. Views, subviews
ShoppingItemItem
ShoppingItemsIndex

40. Templates

41. Templates

42. Combined Approach

43. View Specs

44. View

45. https://github.com/powmedia/backbone-forms
Backbone Forms
One of the many form options.
Specify a schema in the model and generate a
shema from that model.
Use “commit” to save the form changes in your
model.
Save the model to the server.

47. Backbone Forms

48. Router
• Used to structure the various pages of
your application.
• Translates URLs into the rendering of the
correct views.
• Updates the browser URL and history.
• Option to use “#” or “/” as URL delimiter.

49. Router

50. Test

51. Kind of Tests?
• Rails • Backbone.js
• Acceptance Tests: • App Specs
Capybara, Rspec
Request, Cucumber
with Selenium & Co.
• Helper Specs
• Models &
• Model Tests (rspec, Collections Specs
test Unit, ...)
• Router & Views
Specs

52. Sync Adaptations
• csrf:
You need a
BackboneRailsAuthTokenAdapter.
I use the one of Thoughtbot.
• Pusher
You need to adapt the sync method to respond on
incomming web-socket connections.
I use the BackPusher, but there some bugs in it
that you need to repair (due to newer backbone
version) to pass the web-socket-id as a parameter.

53. Putting in Place Pusher
• Push State via Controler Adaptations
• Use BackPusher

54. Pusher - Rails Initializers

55. Pusher - Rails Controller

56. Pusher In App

57. Thank You