Embed Size (px)
DESCRIPTION
Slides da minha apresentação no Encontro do GuruSC - Florianópolis - 01/10/2011
Citation preview
Aplicações dinâmicas em
Rails
Sunday, October 2, 2011
Rafael Felix
http://www.crafters.com.br
http://blog.rollingwithcode.com
http://twitter.com/rs_felix
Sunday, October 2, 2011
Sunday, October 2, 2011
Sunday, October 2, 2011
Backbone é uma estrutura para aplicações que fazem uso pesado de JavaScript
Sunday, October 2, 2011
Sunday, October 2, 2011
Backbone.Model
Sunday, October 2, 2011
Backbone.Model
class BackboneTodos.Models.List extends Backbone.Model paramRoot: 'list'
defaults:{}
Sunday, October 2, 2011
Backbone.Model
class BackboneTodos.Models.List extends Backbone.Model paramRoot: 'list'
defaults:{}
Sunday, October 2, 2011
Backbone.Model
class BackboneTodos.Models.List extends Backbone.Model paramRoot: 'list'
defaults:{}
Sunday, October 2, 2011
Backbone.Model
class BackboneTodos.Models.List extends Backbone.Model paramRoot: 'list'
defaults:{}
routes.rb
resources :lists
Sunday, October 2, 2011
Backbone.Model
class BackboneTodos.Models.List extends Backbone.Model paramRoot: 'list'
defaults:{}
routes.rb
resources :lists
GETPOST PUT
DELETE
Sunday, October 2, 2011
Backbone.Model
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection model: BackboneTodos.Models.List url: '/lists'
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection model: BackboneTodos.Models.List url: '/lists'
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection model: BackboneTodos.Models.List url: '/lists'
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
meusite.com/#!/felix
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
class BackboneTodos.Routers.Application extends Backbone.Router routes: { '' : 'root' '!/sign_in' : 'signIn' '!/:username' : 'showUser' } root: ->
#RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION
showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.Router
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
class BackboneTodos.Views.AppView extends Backbone.View template: JST["backbone/templates/home"], events: { "keypress #new-list" : "createOnEnter" }, initialize: -> _.bindAll(@, 'addOne', 'addAll', 'render')
@lists = new BackboneTodos.Collections.ListsCollection ... @lists.fetch() ...
render: -> $(@el).html(@template()) $("#todo-list").html("") @input = @$("#new-list") @ createOnEnter: (e) -> return if e.keyCode != 13 @lists.create({ name: @input.attr("value") }) @input.attr("value", "")
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
class BackboneTodos.Views.AppView extends Backbone.View template: JST["backbone/templates/home"], events: { "keypress #new-list" : "createOnEnter" }, initialize: -> _.bindAll(@, 'addOne', 'addAll', 'render')
@lists = new BackboneTodos.Collections.ListsCollection ... @lists.fetch() ...
render: -> $(@el).html(@template()) $("#todo-list").html("") @input = @$("#new-list") @ createOnEnter: (e) -> return if e.keyCode != 13 @lists.create({ name: @input.attr("value") }) @input.attr("value", "")
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
class BackboneTodos.Views.AppView extends Backbone.View template: JST["backbone/templates/home"], events: { "keypress #new-list" : "createOnEnter" }, initialize: -> _.bindAll(@, 'addOne', 'addAll', 'render')
@lists = new BackboneTodos.Collections.ListsCollection ... @lists.fetch() ...
render: -> $(@el).html(@template()) $("#todo-list").html("") @input = @$("#new-list") @ createOnEnter: (e) -> return if e.keyCode != 13 @lists.create({ name: @input.attr("value") }) @input.attr("value", "")
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
class BackboneTodos.Views.AppView extends Backbone.View template: JST["backbone/templates/home"], events: { "keypress #new-list" : "createOnEnter" }, initialize: -> _.bindAll(@, 'addOne', 'addAll', 'render')
@lists = new BackboneTodos.Collections.ListsCollection ... @lists.fetch() ...
render: -> $(@el).html(@template()) $("#todo-list").html("") @input = @$("#new-list") @ createOnEnter: (e) -> return if e.keyCode != 13 @lists.create({ name: @input.attr("value") }) @input.attr("value", "")
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
class BackboneTodos.Views.AppView extends Backbone.View template: JST["backbone/templates/home"], events: { "keypress #new-list" : "createOnEnter" }, initialize: -> _.bindAll(@, 'addOne', 'addAll', 'render')
@lists = new BackboneTodos.Collections.ListsCollection ... @lists.fetch() ...
render: -> $(@el).html(@template()) $("#todo-list").html("") @input = @$("#new-list") @ createOnEnter: (e) -> return if e.keyCode != 13 @lists.create({ name: @input.attr("value") }) @input.attr("value", "")
Sunday, October 2, 2011
Backbone.Model
Backbone.Collection
Backbone.RouterBackbone.View
class BackboneTodos.Views.AppView extends Backbone.View template: JST["backbone/templates/home"], events: { "keypress #new-list" : "createOnEnter" }, initialize: -> _.bindAll(@, 'addOne', 'addAll', 'render')
@lists = new BackboneTodos.Collections.ListsCollection ... @lists.fetch() ...
render: -> $(@el).html(@template()) $("#todo-list").html("") @input = @$("#new-list") @ createOnEnter: (e) -> return if e.keyCode != 13 @lists.create({ name: @input.attr("value") }) @input.attr("value", "")
Sunday, October 2, 2011
http://backbone-todos.heroku.com/
https://github.com/fellix/backbone-todos
Sunday, October 2, 2011
Exemplos
Sunday, October 2, 2011
Sunday, October 2, 2011
class Sample1.Models.Category extends Backbone.Model paramRoot: 'category'
class Sample1.Collections.CategoriesCollections extends Backbone.Collection
model: Sample1.Models.Category url: '/categories'
app/assets/javascripts/backbone/models/category.js.coffee
Sunday, October 2, 2011
class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs" initialize: ->
_.bindAll(@, "render", "addOne", "addAll")@collection.bind("add", @addOne)@collection.bind("refresh", @addAll)@collection.bind("all", @addAll)
@collection.fetch()
app/assets/javascripts/backbone/views/categories/categories.js.coffee
Sunday, October 2, 2011
class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs" initialize: ->
_.bindAll(@, "render", "addOne", "addAll")@collection.bind("add", @addOne)@collection.bind("refresh", @addAll)@collection.bind("all", @addAll)
@collection.fetch()
app/assets/javascripts/backbone/views/categories/categories.js.coffee
render: -> @
Sunday, October 2, 2011
class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs" initialize: ->
_.bindAll(@, "render", "addOne", "addAll")@collection.bind("add", @addOne)@collection.bind("refresh", @addAll)@collection.bind("all", @addAll)
@collection.fetch()
app/assets/javascripts/backbone/views/categories/categories.js.coffee
addOne: (category) -> view = new Sample1.Views.CategoryItem({model: category}).render().el $(view).appendTo(@el)
Sunday, October 2, 2011
class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs" initialize: ->
_.bindAll(@, "render", "addOne", "addAll")@collection.bind("add", @addOne)@collection.bind("refresh", @addAll)@collection.bind("all", @addAll)
@collection.fetch()
app/assets/javascripts/backbone/views/categories/categories.js.coffee
addAll: -> $(@el).html("") @collection.each(@addOne)
Sunday, October 2, 2011
class Sample1.Views.CategoryItem extends Backbone.View tagName: "li" initialize: ->
_.bindAll(@, "render")@model.bind("change", @render)
render: ->$(@el).html("<a href='#'>#{@model.get("name")}</a>")@
app/assets/javascripts/backbone/views/categories/categories.js.coffee
Sunday, October 2, 2011
class Sample1.Routers.ApplicationsRouter extends Backbone.Router routers: { "" : "index" } index: ->
@categories = new Sample1.Collections.CategoriesCollectioncategoryList = new Sample1.Views.Categories({collection: @categories}).render().el$(categoryList)appendTo("#content-row")
app/assets/javascripts/backbone/views/routers/application_router.js.coffee
Sunday, October 2, 2011
class CategoriesController < ApplicationController respond_to :json def index
@categories = Category.allrespond_with @categories
endend
app/controllers/categories_controller.rb
Sunday, October 2, 2011
class CategoriesController < ApplicationController respond_to :json def index
@categories = Category.allrespond_with @categories
endend
app/controllers/categories_controller.rb
app/views/categories/index.rabl
collection @categoriesattributes :id, :name
Sunday, October 2, 2011
Sunday, October 2, 2011
%form#new_category.form-stacked%fieldset
.clearfix%label{for: "category"}Name.input
%input{type: "text", name: "name"}.actions
%input{type: "submit", name: "commit", value: "Save", class: "btn primary"}
app/assets/javascripts/backbone/templates/categories/form.jst.hamljs
Sunday, October 2, 2011
class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: {
"submit form" : "create" } initialize: ->
_.bindAll(@, "render")
app/assets/javascripts/backbone/views/categories/category_form.js.coffee
Sunday, October 2, 2011
class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: {
"submit form" : "create" } initialize: ->
_.bindAll(@, "render")
app/assets/javascripts/backbone/views/categories/category_form.js.coffee
render: -> $(@el).html(@template()) @input = @$("input[name=name]") @
Sunday, October 2, 2011
class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: {
"submit form" : "create" } initialize: ->
_.bindAll(@, "render")
app/assets/javascripts/backbone/views/categories/category_form.js.coffee
Sunday, October 2, 2011
class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: {
"submit form" : "create" } initialize: ->
_.bindAll(@, "render")
app/assets/javascripts/backbone/views/categories/category_form.js.coffee
create: (e) -> e.preventDefault() input = @input
@collection.create({input = @input.val()}, {error: (model, response) ->
alert "OOPS!"success: ->
input.val("")})
Sunday, October 2, 2011
class Sample1.Routers.ApplicationsRouter extends Backbone.Router routers: { "" : "index" } index: ->
@categories = new Sample1.Collections.CategoriesCollectioncategoryList = new Sample1.Views.Categories({collection: @categories}).render().el$(categoryList)appendTo("#content-row")
app/assets/javascripts/backbone/views/routers/application_router.js.coffee
Sunday, October 2, 2011
index: ->@categories = new Sample1.Collections.CategoriesCollectioncategoryList = new Sample1.Views.Categories({collection:
@categories}).render().el$(categoryList)appendTo("#content-row")
app/assets/javascripts/backbone/views/routers/application_router.js.coffee
Sunday, October 2, 2011
index: ->@categories = new Sample1.Collections.CategoriesCollectioncategoryList = new Sample1.Views.Categories({collection:
@categories}).render().el$(categoryList)appendTo("#content-row")form = new Sample1.Views.CategoryForm({collection:
@categories}).render().el$(form)appendTo("#content-row")
app/assets/javascripts/backbone/views/routers/application_router.js.coffee
Sunday, October 2, 2011
index: ->@categories = new Sample1.Collections.CategoriesCollectioncategoryList = new Sample1.Views.Categories({collection:
@categories}).render().el$(categoryList)appendTo("#content-row")form = new Sample1.Views.CategoryForm({collection:
@categories}).render().el$(form)appendTo("#content-row")
app/assets/javascripts/backbone/views/routers/application_router.js.coffee
Sunday, October 2, 2011
class CategoriesController < ApplicationController respond_to :json def index
@categories = Category.allrespond_with @categories
endend
app/controllers/categories_controller.rb
Sunday, October 2, 2011
class CategoriesController < ApplicationController respond_to :json ... def create
@category = Category.new params[:category]if @category.save
respond_with @categoryelse
render json: {errors: @category.errros.full_messages}, status: :unprocessable_entity
end endend
app/controllers/categories_controller.rb
Sunday, October 2, 2011
Sunday, October 2, 2011
Sunday, October 2, 2011
Click
Sunday, October 2, 2011
Click
@collection.create
Sunday, October 2, 2011
Click
@collection.create
url: '/categories'
Sunday, October 2, 2011
Click
@collection.create
url: '/categories'
post '/categories'
Sunday, October 2, 2011
Click
@collection.create
url: '/categories'
post '/categories'
CategoriesController#create
Sunday, October 2, 2011
Sunday, October 2, 2011
@collection.bind('add', @addOne)
Sunday, October 2, 2011
http://twitter.com/rs_felix
Linkshttp://documentcloud.github.com/backbone/
https://github.com/creationix/haml-js
https://github.com/codebrew/backbone-rails
http://seesparkbox.com/foundry/better_rails_apis_with_rabl
http://github.com/fellix
Sunday, October 2, 2011
