Upload
abidvf
View
241
Download
0
Embed Size (px)
Citation preview
7/28/2019 Using Backbone.js With Rails
1/54
Intro to Backbone.jswith Rails
by: Tim Tyrrell@timtyrrell
7/28/2019 Using Backbone.js With Rails
2/54
Agenda
Why? No really, why??? Intro to Backbone.js
Using Backbone.js with Rails Testing Other Libraries Wrap up Questions
7/28/2019 Using Backbone.js With Rails
3/54
Why should I care about Backbone.js?
Rails is awesome!
7/28/2019 Using Backbone.js With Rails
4/54
7/28/2019 Using Backbone.js With Rails
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
...
7/28/2019 Using Backbone.js With Rails
6/54
This is something that you can useto write better software
7/28/2019 Using Backbone.js With Rails
7/54
Why not Ember.js or Spine.js?(or the dozens of other ones)
7/28/2019 Using Backbone.js With Rails
8/54
I initially decided to learn Spine.js...... and then I had a question.
7/28/2019 Using Backbone.js With Rails
9/54
Spine.js
(Pic taken in May 2012)
7/28/2019 Using Backbone.js With Rails
10/54
Backbone.js
(Pic taken in May 2012)
7/28/2019 Using Backbone.js With Rails
11/54
7/28/2019 Using Backbone.js With Rails
12/54
Why Rails instead of Node.js orSinatra?
https://speakerdeck.com/u/brennandunn/p/rails-without-views
7/28/2019 Using Backbone.js With Rails
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/
7/28/2019 Using Backbone.js With Rails
14/54
Comparing Paradigms
Backbone.js
Models Views & Routers
Templates Collections
Ruby on Rails
Models Controllers
Views
7/28/2019 Using Backbone.js With Rails
15/54
Backbone.js Model
Manages data for an application Not tied to markup, presentation, UI Validates itself
Query methods (fetch, save)
7/28/2019 Using Backbone.js With Rails
16/54
Backbone.js Collection
Manages an ordered set of models Fetches, add, removes models Gives you Underscore.js goodness
Listens for model events
7/28/2019 Using Backbone.js With Rails
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
7/28/2019 Using Backbone.js With Rails
18/54
Backbone.js Router
Controller that responds to URL's Hash Fragments (#page) Standard URL's (/page)
Generally sets up model w/ View
7/28/2019 Using Backbone.js With Rails
19/54
Backbone.js Template
HTML to be rendered Template agnostic
Eco
Handlebars.js Mustache.js etc.
7/28/2019 Using Backbone.js With Rails
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
7/28/2019 Using Backbone.js With Rails
21/54
rails g backbone:install
7/28/2019 Using Backbone.js With Rails
22/54
rails g backbone:scaffold task
7/28/2019 Using Backbone.js With Rails
23/54
Other Backbone Scaffolded Settings
7/28/2019 Using Backbone.js With Rails
24/54
Setup the Backbone routes
7/28/2019 Using Backbone.js With Rails
25/54
Tasks Collection
7/28/2019 Using Backbone.js With Rails
26/54
Rails Scaffolded Tasks
7/28/2019 Using Backbone.js With Rails
27/54
Where will this app appear?
7/28/2019 Using Backbone.js With Rails
28/54
Find a Spot
7/28/2019 Using Backbone.js With Rails
29/54
TasksIndex View
7/28/2019 Using Backbone.js With Rails
30/54
TasksIndex Template
7/28/2019 Using Backbone.js With Rails
31/54
TasksItem View
Item Template
7/28/2019 Using Backbone.js With Rails
32/54
Fire up the rails server
7/28/2019 Using Backbone.js With Rails
33/54
Move require_tree to the bottom
7/28/2019 Using Backbone.js With Rails
34/54
Much Better
7/28/2019 Using Backbone.js With Rails
35/54
Wire-Up the Router
7/28/2019 Using Backbone.js With Rails
36/54
Refresh the Browser
7/28/2019 Using Backbone.js With Rails
37/54
Add some records to the database
7/28/2019 Using Backbone.js With Rails
38/54
Add Tasks Template Change
7/28/2019 Using Backbone.js With Rails
39/54
Add Tasks to TasksIndex View
7/28/2019 Using Backbone.js With Rails
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)
7/28/2019 Using Backbone.js With Rails
41/54
Add New Task to Page
7/28/2019 Using Backbone.js With Rails
42/54
Delete a Task
7/28/2019 Using Backbone.js With Rails
43/54
TasksItem View
7/28/2019 Using Backbone.js With Rails
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)
7/28/2019 Using Backbone.js With Rails
45/54
Adding a Footer
7/28/2019 Using Backbone.js With Rails
46/54
TasksIndex to Create the View
7/28/2019 Using Backbone.js With Rails
47/54
Footer View and Template
7/28/2019 Using Backbone.js With Rails
48/54
Done with the Example Now
7/28/2019 Using Backbone.js With Rails
49/54
Testing
7/28/2019 Using Backbone.js With Rails
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
7/28/2019 Using Backbone.js With Rails
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
7/28/2019 Using Backbone.js With Rails
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
7/28/2019 Using Backbone.js With Rails
53/54
Questions?
7/28/2019 Using Backbone.js With Rails
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