Backbone.js + Rails - Front-end e back-end conectados

3,808 views

Published on

Como construir aplicações com front-end atualizável em tempo real sem precisar submeter formulário e atualizar a tela à medida que o servidor atualizar. Backbone.js com Ruby on Rails é a casadinha perfeita.

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,808
On SlideShare
0
From Embeds
0
Number of Embeds
2,252
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Backbone.js + Rails - Front-end e back-end conectados

  1. 1. Backbone.js + Ruby on RailsFront-end e back-end conectados Henrique Gogó @henriquegogo
  2. 2. “Henrique é um profissional comprometido e criativo, já o contratei algumas vezes paratrabalhos importantes e obtive um excelente serviço. Esse profissional eu recomendo e garanto.” @cmilfont
  3. 3. “Esse cara sou eu...”
  4. 4. jQuery para tudo? É um framework para trabalhar com DOM.Infelizmente, quando começamos a ter pilhas e pilhas de arquivos JS, lidar com o seletores ecallbacks podem deixar seu código bagunçado.
  5. 5. Como (provavelmente) você faz hoje $("input[name=age]").on("change", function() { if ($(this).val() >= 18) { console.log("Maior de idade, hein!"); } }); $("form").submit(function() { $.post("/users", $("form").serialize()); return false; })
  6. 6. DOM Manipulation vs MVVM
  7. 7. jQueryjQuery é uma biblioteca JavaScript rápida e concisa que simplifica manipulação de documento HTML (...)
  8. 8. Backbone.js Backbone.js dá estrutura para aplicações web, fornecendo modelos com chave-valor (...) econecta tudo para uma API existente através de uma interface RESTful JSON.
  9. 9. Modelvar User = Backbone.Model.extend({ urlRoot: "/users", defaults: { name: "Unknown user", }, validate: function(attrs) { if (attrs.age > 15) { console.log("Velhote"); } }});var henrique = new User({ id: 1, name: "Henrique" });henrique.set("age", 27);
  10. 10. Collectionsvar Users = Backbone.Collection.extend({ model: User});var employees = new Users([{ name: "Letícia" },{ name: "Mateus" }]);employees.on("add", function(user) { console.log("Welcome " + user.get("name") + "!");});employees.add({ name: "Roberto" });
  11. 11. Mais sobre collectionsUsers.each(function(user) { user.facaAlgo();});var nomes = Users.map(function(user) { return user.get("name");});var ordenado = Users.sortBy(function(user) { return user.get("name").toLowerCase();});
  12. 12. Viewsvar View = Backbone.View.extend({ el: "#form", render: function() { var template = _.template( ("#template").html(), this.model.toJSON() ); this.$el.html( template ); }});
  13. 13. Views com o plugin ModelBindervar View = Backbone.View.extend({ el: "#form", initialize: function() { this.modelBinder = new Backbone.ModelBinder(); this.modelBinder.bind(this.model, this.el); }});
  14. 14. Um pouco mais sobre viewsvar View = Backbone.View.extend({ el: "#form", initialize: function() { this.modelBinder = new Backbone.ModelBinder(); this.modelBinder.bind(this.model, this.el); }, events: { blur input: save, blur textarea: save }, save: function() { this.model.save(); }});
  15. 15. E no Rails? Não faço nada?$ rails generate scaffold user nameage:integer description:text
  16. 16. http://backbonejs.org
  17. 17. MVVM em outros sabores
  18. 18. http://www.gogs.com.br

×