backbone.js + rails - front-end e back-end conectados

20

Click here to load reader

Upload: henrique-gogo

Post on 22-May-2015

3.422 views

Category:

Documents


3 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Backbone.js + Rails - Front-end e back-end conectados

Henrique Gogó@henriquegogo

Backbone.js + Ruby on Rails

Front-end e back-end conectados

Page 2: Backbone.js + Rails - Front-end e back-end conectados

“Henrique é um profissional comprometido e criativo, já o contratei algumas vezes para trabalhos importantes e obtive

um excelente serviço. Esse profissional eu recomendo e

garanto.” @cmilfont

Page 3: Backbone.js + Rails - Front-end e back-end conectados

“Esse cara sou eu...”

Page 4: Backbone.js + Rails - Front-end e back-end conectados

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 e

callbacks podem deixar seu código bagunçado.

Page 5: Backbone.js + Rails - Front-end e back-end conectados

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;

})

Page 6: Backbone.js + Rails - Front-end e back-end conectados

DOM Manipulation

vs

MVVM

Page 7: Backbone.js + Rails - Front-end e back-end conectados

jQuery

jQuery é uma biblioteca JavaScript rápida e concisa que simplifica manipulação de

documento HTML (...)

Page 8: Backbone.js + Rails - Front-end e back-end conectados

Backbone.js

Backbone.js dá estrutura para aplicações web, fornecendo modelos com chave-valor (...) e

conecta tudo para uma API existente através de uma interface RESTful JSON.

Page 9: Backbone.js + Rails - Front-end e back-end conectados

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);

Page 10: Backbone.js + Rails - Front-end e back-end conectados

Collections

var 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" });

Page 11: Backbone.js + Rails - Front-end e back-end conectados

Mais sobre collections

Users.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();});

Page 12: Backbone.js + Rails - Front-end e back-end conectados

Views

var View = Backbone.View.extend({ el: "#form", render: function() { var template = _.template( ("#template").html(), this.model.toJSON() ); this.$el.html( template ); }});

Page 13: Backbone.js + Rails - Front-end e back-end conectados

Views com o plugin ModelBinder

var View = Backbone.View.extend({ el: "#form", initialize: function() { this.modelBinder = new Backbone.ModelBinder(); this.modelBinder.bind(this.model, this.el); }});

Page 14: Backbone.js + Rails - Front-end e back-end conectados

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(); }});

Page 15: Backbone.js + Rails - Front-end e back-end conectados

E no Rails? Não faço nada?

$ rails generate scaffold user name age:integer description:text

Page 16: Backbone.js + Rails - Front-end e back-end conectados
Page 17: Backbone.js + Rails - Front-end e back-end conectados

http://backbonejs.org

Page 18: Backbone.js + Rails - Front-end e back-end conectados

MVVM em outros sabores

Page 19: Backbone.js + Rails - Front-end e back-end conectados
Page 20: Backbone.js + Rails - Front-end e back-end conectados

http://www.gogs.com.br