Backbone.js é um framework JavaScript que fornece estrutura para aplicações web, conectando modelos com chave-valor, coleções e views a uma API RESTful. Isso permite manipular o DOM de forma mais organizada do que apenas com jQuery, separando a lógica da apresentação. Rails pode ser usado no back-end para gerar uma API RESTful para os modelos do Backbone.js.

1. Backbone.js + Ruby on Rails
Front-end e back-end conectados
Henrique Gogó
@henriquegogo

2. “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

3. “Esse cara sou eu...”

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 e
callbacks podem deixar seu código bagunçado.

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. DOM Manipulation
vs
MVVM

7. jQuery
jQuery é uma biblioteca JavaScript rápida e
concisa que simplifica manipulação de
documento HTML (...)

8. 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.

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

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

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

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

14. Um pouco mais sobre views
var 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. E no Rails? Não faço nada?
$ rails generate scaffold user name
age:integer description:text

17. http://backbonejs.org

18. MVVM em outros sabores

20. http://www.gogs.com.br