Aplicacoes dinamicas gurusc
Upcoming SlideShare
Loading in...5
×
 

Aplicacoes dinamicas gurusc

on

  • 1,486 views

Slides da minha apresentação no Encontro do GuruSC - Florianópolis - 01/10/2011

Slides da minha apresentação no Encontro do GuruSC - Florianópolis - 01/10/2011

Statistics

Views

Total Views
1,486
Views on SlideShare
1,108
Embed Views
378

Actions

Likes
1
Downloads
8
Comments
0

11 Embeds 378

http://gabrielsobrinho.com 197
http://gabrielsobrinho.tumblr.com 68
http://assets.txmblr.com 60
http://localhost:4567 19
http://localhost 13
http://coderwall.com 11
http://sobrinho.herokuapp.com 3
http://www.gabrielsobrinho.com 2
http://www.hanrss.com 2
http://sobrinho.ghost.io 2
http://example.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Aplicacoes dinamicas gurusc Aplicacoes dinamicas gurusc Presentation Transcript

  • Aplicações dinâmicas em RailsSunday, October 2, 2011
  • Rafael Felix http://www.crafters.com.br http://twitter.com/rs_felix http://blog.rollingwithcode.comSunday, October 2, 2011
  • Sunday, October 2, 2011
  • Sunday, October 2, 2011
  • Backbone é uma estrutura para aplicações que fazem uso pesado de JavaScriptSunday, October 2, 2011
  • Sunday, October 2, 2011
  • Backbone.ModelSunday, 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 routes.rb    paramRoot: list resources :lists    defaults:{}Sunday, October 2, 2011
  • Backbone.Model POST PUT GET DELETE class BackboneTodos.Models.List extends Backbone.Model routes.rb    paramRoot: list resources :lists    defaults:{}Sunday, October 2, 2011
  • Backbone.ModelSunday, October 2, 2011
  • Backbone.Model Backbone.CollectionSunday, October 2, 2011
  • Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  • Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  • Backbone.Model Backbone.Collection class BackboneTodos.Collections.ListsCollection extends Backbone.Collection    model: BackboneTodos.Models.List    url: /listsSunday, October 2, 2011
  • Backbone.Model Backbone.CollectionSunday, October 2, 2011
  • Backbone.Model Backbone.Collection Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/sign_in : signIn } !/:username : showUser meusite.com/#!/felix root: -> #RENDERS A VIEW, CREATES A MODEL AND/OR COLLECTION showUser: (username) -> #FIND THE USER, AND CALL THE SHOW VIEW Backbone.RouterSunday, October 2, 2011
  • Backbone.Model class BackboneTodos.Routers.Application extends Backbone.Router    routes: { : root Backbone.Collection !/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 Backbone.RouterSunday, October 2, 2011
  • Backbone.Model Backbone.Collection Backbone.RouterSunday, October 2, 2011
  • Backbone.Model Backbone.Collection Backbone.View Backbone.RouterSunday, October 2, 2011
  • Backbone.Model 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     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  • Backbone.Model 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     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  • Backbone.Model 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     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  • Backbone.Model 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     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  • Backbone.Model 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     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     return if e.keyCode != 13     @lists.create({       name: @input.attr("value")     })     @input.attr("value", "")Sunday, October 2, 2011
  • Backbone.Model 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     ... Backbone.Collection     @lists.fetch()    ...   render: ->     $(@el).html(@template())     $("#todo-list").html("")     @input = @$("#new-list")     @ Backbone.View      createOnEnter: (e) -> Backbone.Router     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-todosSunday, October 2, 2011
  • ExemplosSunday, October 2, 2011
  • Sunday, October 2, 2011
  • app/assets/javascripts/backbone/models/category.js.coffee class Sample1.Models.Category extends Backbone.Model paramRoot: category class Sample1.Collections.CategoriesCollections extends Backbone.Collection model: Sample1.Models.Category url: /categoriesSunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/categories.js.coffee 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()Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/categories.js.coffee class Sample1.Views.Categories extends Backbone.View tagName: "ul" className: "tabs"render: -> @ initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/categories.js.coffee addOne: (category) -> class Sample1.Views.Categories extends Backbone.View tagName: "ul"Sample1.Views.CategoryItem({model: view = new category}).render().el className: "tabs" $(view).appendTo(@el) initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/categories.js.coffee class Sample1.Views.Categories extends Backbone.View addAll: -> tagName: "ul" $(@el).html("") className: "tabs" @collection.each(@addOne) initialize: -> _.bindAll(@, "render", "addOne", "addAll") @collection.bind("add", @addOne) @collection.bind("refresh", @addAll) @collection.bind("all", @addAll) @collection.fetch()Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/categories.js.coffee 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>") @Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/routers/application_router.js.coffee class Sample1.Routers.ApplicationsRouter extends Backbone.Router routers: { "" : "index" } index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row")Sunday, October 2, 2011
  • app/controllers/categories_controller.rb class CategoriesController < ApplicationController respond_to :json def index @categories = Category.all respond_with @categories end endSunday, October 2, 2011
  • app/controllers/categories_controller.rb app/views/categories/index.rabl class CategoriesController < ApplicationController collection @categories respond_to :json attributes :id, :name def index @categories = Category.all respond_with @categories end endSunday, October 2, 2011
  • Sunday, October 2, 2011
  • app/assets/javascripts/backbone/templates/categories/form.jst.hamljs %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"}Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/category_form.js.coffee class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: { "submit form" : "create" } initialize: -> _.bindAll(@, "render")Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/category_form.js.coffee class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] render: -> events: { $(@el).html(@template()) "submit form" : "create" @input = @$("input[name=name]") } @ initialize: -> _.bindAll(@, "render")Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/category_form.js.coffee class Sample1.Views.CategoryForm extends Backbone.View template: JST["backbone/templates/categories/form"] events: { "submit form" : "create" } initialize: -> _.bindAll(@, "render")Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/categories/category_form.js.coffee create: (e) -> class Sample1.Views.CategoryForm extends Backbone.View e.preventDefault() template: JST["backbone/templates/categories/form"] input = @input events: { @collection.create({ "submit form" : "create" input = @input.val() } }, { error: (model, response) -> initialize: -> alert "OOPS!" _.bindAll(@, "render") success: -> input.val("") })Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/routers/application_router.js.coffee class Sample1.Routers.ApplicationsRouter extends Backbone.Router routers: { "" : "index" } index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row")Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/routers/application_router.js.coffee index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = new Sample1.Views.Categories({collection: @categories}).render().el $(categoryList)appendTo("#content-row")Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/routers/application_router.js.coffee index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = 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")Sunday, October 2, 2011
  • app/assets/javascripts/backbone/views/routers/application_router.js.coffee index: -> @categories = new Sample1.Collections.CategoriesCollection categoryList = 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")Sunday, October 2, 2011
  • app/controllers/categories_controller.rb class CategoriesController < ApplicationController respond_to :json def index @categories = Category.all respond_with @categories end endSunday, October 2, 2011
  • app/controllers/categories_controller.rb class CategoriesController < ApplicationController respond_to :json ... def create @category = Category.new params[:category] if @category.save respond_with @category else render json: {errors: @category.errros.full_messages}, status: :unprocessable_entity end end endSunday, October 2, 2011
  • Sunday, October 2, 2011
  • Sunday, October 2, 2011
  • ClickSunday, October 2, 2011
  • Click @collection.createSunday, October 2, 2011
  • Click @collection.create url: /categoriesSunday, October 2, 2011
  • Click @collection.create post /categories url: /categoriesSunday, October 2, 2011
  • Click @collection.create post /categories url: /categories CategoriesController#createSunday, October 2, 2011
  • Sunday, October 2, 2011
  • @collection.bind(add, @addOne)Sunday, October 2, 2011
  • Obrigado felix.rafael@gmail.com http://twitter.com/rs_felix http://github.com/fellix Links http://documentcloud.github.com/backbone/ https://github.com/creationix/haml-js https://github.com/codebrew/backbone-rails http://seesparkbox.com/foundry/better_rails_apis_with_rablSunday, October 2, 2011