Using Backbone.js With Rails

7/28/2019 Using Backbone.js With Rails

1/54

Intro to Backbone.jswith Rails

by: Tim Tyrrell@timtyrrell


2/54

Agenda

Why? No really, why??? Intro to Backbone.js

Using Backbone.js with Rails Testing Other Libraries Wrap up Questions


3/54

Why should I care about Backbone.js?

Rails is awesome!


4/54


5/54

NO REALLY, WHY SHOULD I CARE?

Because you are a professional You want to be employable in the future You enjoy learning new things

...


6/54

This is something that you can useto write better software


7/54

Why not Ember.js or Spine.js?(or the dozens of other ones)


8/54

I initially decided to learn Spine.js...... and then I had a question.


9/54

Spine.js

(Pic taken in May 2012)


10/54

Backbone.js

(Pic taken in May 2012)


11/54


12/54

Why Rails instead of Node.js orSinatra?

https://speakerdeck.com/u/brennandunn/p/rails-without-views


13/54

What is Backbone.js

Backbone.js gives structure to web applicationsby providing:

models with key-value binding and customevents

collections with a rich API of enumerablefunctions

views with declarative event handling connects it all to your existing API over aRESTful JSON interface.

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


14/54

Comparing Paradigms

Backbone.js

Models Views & Routers

Templates Collections

Ruby on Rails

Models Controllers

Views


15/54

Backbone.js Model

Manages data for an application Not tied to markup, presentation, UI Validates itself

Query methods (fetch, save)


16/54

Backbone.js Collection

Manages an ordered set of models Fetches, add, removes models Gives you Underscore.js goodness

Listens for model events


17/54

Backbone.js View

Controller that responds to DOM events Displays data from a model w/template Reacts to model changes

Reacts to DOM events Handle presentation logic for a part of the UI


18/54

Backbone.js Router

Controller that responds to URL's Hash Fragments (#page) Standard URL's (/page)

Generally sets up model w/ View


19/54

Backbone.js Template

HTML to be rendered Template agnostic

Eco

Handlebars.js Mustache.js etc.


20/54

Getting started with Rails

rails new todo_list -T cd todo_list echo "gem 'backbone-on-rails'" >> Gemfile

bundle rails g scaffold task name:string complete:

boolean rake db:migrate rm -f app/views/tasks/* touch app/views/tasks/index.html.erb


21/54

rails g backbone:install


22/54

rails g backbone:scaffold task


23/54

Other Backbone Scaffolded Settings


24/54

Setup the Backbone routes


25/54

Tasks Collection


26/54

Rails Scaffolded Tasks


27/54

Where will this app appear?


28/54

Find a Spot


29/54

TasksIndex View


30/54

TasksIndex Template


31/54

TasksItem View

Item Template


32/54

Fire up the rails server


33/54

Move require_tree to the bottom


34/54

Much Better


35/54

Wire-Up the Router


36/54

Refresh the Browser


37/54

Add some records to the database


38/54

Add Tasks Template Change


39/54

Add Tasks to TasksIndex View


40/54

@collection.create

Started POST "/tasks" for 127.0.0.1 at 2012-05-20 17:16:17 -0500

Processing by TasksController#create as JSON

Parameters: {"name"=>"Walk the dog", "task"=>{"name"=>"Walk the dog"}}

(0.1ms) begin transaction

SQL (9.7ms) INSERT INTO "tasks" ("complete", "created_at", "name","updated_at") VALUES (?, ?, ?, ?) [["complete", nil], ["created_at", Sun, 20May 2012 22:16:17 UTC +00:00], ["name", "Walk the dog"], ["updated_at", Sun,20 May 2012 22:16:17 UTC +00:00]]

(1.8ms) commit transaction

Completed 201 Created in 19ms (Views: 2.7ms | ActiveRecord: 11.6ms)


41/54

Add New Task to Page


42/54

Delete a Task


43/54

TasksItem View


44/54

@model.destroy()

Started DELETE "/tasks/5" for 127.0.0.1 at 2012-05-20 20:58:43 -0500

Processing by TasksController#destroy as JSON

Parameters: {"id"=>"5"}

Task Load (0.2ms) SELECT "tasks".* FROM "tasks" WHERE "tasks"."id" = ?LIMIT 1 [["id", "5"]]

(0.1ms) begin transaction

SQL (0.2ms) DELETE FROM "tasks" WHERE "tasks"."id" = ? [["id", 5]]

(2.9ms) commit transaction

Completed 204 No Content in 5ms (ActiveRecord: 3.3ms)


45/54

Adding a Footer


46/54

TasksIndex to Create the View


47/54

Footer View and Template


48/54

Done with the Example Now


49/54

Testing


50/54

Other Libraries

ModelBinder HTML Binding Recursive Binding Calculated Fields

Backbone-relational one-to-one one-to-many

many-to-one Backbone-validation Validate model properties Notify users of erros


51/54

Wrap Up

A Javascript client-side MV* framework canhelp you write better code. It forces you separate the presentation logic away

from the business logic It helps to make you javascript more testable It allows for more responsive user experience It is a tool that you will want to add to your toolbox These same concepts apply to other JS frameworks

It is fun


52/54

Resources

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

https://github.com/meleyal/backbone-on-rails

https://github.com/bradphelan/jasminerice

https://github.com/netzpirat/guard-jasmine

https://github.com/theironcook/Backbone.ModelBinder

https://github.com/thedersen/backbone.validation

https://github.com/PaulUithol/Backbone-relational

https://speakerdeck.com/u/brennandunn/p/rails-without-views

http://blog.carbonfive.com/2011/12/19/exploring-client-side-mvc-with-backbonejs

http://addyosmani.github.com/backbone-fundamentals/

http://backbone-patterns.heroku.com/

https://speakerdeck.com/u/sarahmei/p/using-backbonejs-with-rails


53/54

Questions?


54/54

Thanks for listening!

http://speakerrate.com/talks/11021-intro-to-backbone-js-with-rails
http://speakerrate.com/talks/11021-intro-to-backbone-js-with-rails

Using Backbone.js With Rails

Documents

Transcript of Using Backbone.js With Rails