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.
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?
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
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
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
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.
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.
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.
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