SlideShare uma empresa Scribd logo
Backbone.js + Ruby on Rails




Front-end e back-end conectados
           Henrique Gogó
           @henriquegogo
“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
“Esse cara sou eu...”
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.
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;
 })
DOM Manipulation
       vs

     MVVM
jQuery

jQuery é uma biblioteca JavaScript rápida e
  concisa que simplifica manipulação de
          documento HTML (...)
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.
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);
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" });
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();
});
Views


var View = Backbone.View.extend({
  el: "#form",
  render: function() {
          var template =
              _.template( ("#template").html(),
                           this.model.toJSON() );
          this.$el.html( template );
      }
});
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);
    }
});
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();
    }
});
E no Rails? Não faço nada?

$ rails generate scaffold user name
age:integer description:text
Backbone.js + Rails - Front-end e back-end conectados
http://backbonejs.org
MVVM em outros sabores
Backbone.js + Rails - Front-end e back-end conectados
http://www.gogs.com.br

Mais conteúdo relacionado

Mais procurados

Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
Cristiano Pires Martins
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
Alisson Agiani
 
Nova web - DNAD 2012
Nova web - DNAD 2012Nova web - DNAD 2012
Nova web - DNAD 2012
Giovanni Bassi
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
Julian Cesar
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Rodrigo Branas
 
Curso PHP: Básico JavaScript
Curso PHP: Básico JavaScriptCurso PHP: Básico JavaScript
Curso PHP: Básico JavaScript
Wellington Oliveira
 
Angular js
Angular jsAngular js
Angular js
Bruno Catão
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
Ricardo Cavalcanti
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
Centro Paula Souza
 
jQuery
jQueryjQuery
jQuery
Bruno Cunha
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
Centro Paula Souza
 
Ajax
AjaxAjax
Criando componentes interativos em páginas AMP com amp-bind
Criando componentes interativos em páginas AMP com amp-bindCriando componentes interativos em páginas AMP com amp-bind
Criando componentes interativos em páginas AMP com amp-bind
Murilo Siqueira Ferreira
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
Janderson Fernandes Cardoso
 
Javascript - Biblioteca Jquery
Javascript - Biblioteca JqueryJavascript - Biblioteca Jquery
Javascript - Biblioteca Jquery
Multside Digital
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
Rodrigo Branas
 
IBM - Apresentando jQuery
IBM - Apresentando jQueryIBM - Apresentando jQuery
IBM - Apresentando jQuery
Alberto Leal
 
KnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realKnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida real
Comunidade NetPonto
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
Rodrigo Branas
 
Vue.js
Vue.jsVue.js

Mais procurados (20)

Java script aula 07 - eventos
Java script   aula 07 - eventosJava script   aula 07 - eventos
Java script aula 07 - eventos
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
Nova web - DNAD 2012
Nova web - DNAD 2012Nova web - DNAD 2012
Nova web - DNAD 2012
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo BranasNode.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
Node.js - #7 - Core Modules - http - Parte 1 - Rodrigo Branas
 
Curso PHP: Básico JavaScript
Curso PHP: Básico JavaScriptCurso PHP: Básico JavaScript
Curso PHP: Básico JavaScript
 
Angular js
Angular jsAngular js
Angular js
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 
13 Java Script - Validação de formulário
13 Java Script  - Validação de formulário13 Java Script  - Validação de formulário
13 Java Script - Validação de formulário
 
jQuery
jQueryjQuery
jQuery
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
Ajax
AjaxAjax
Ajax
 
Criando componentes interativos em páginas AMP com amp-bind
Criando componentes interativos em páginas AMP com amp-bindCriando componentes interativos em páginas AMP com amp-bind
Criando componentes interativos em páginas AMP com amp-bind
 
AngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivasAngularJS - 10 passos para aprender a criar suas directivas
AngularJS - 10 passos para aprender a criar suas directivas
 
Javascript - Biblioteca Jquery
Javascript - Biblioteca JqueryJavascript - Biblioteca Jquery
Javascript - Biblioteca Jquery
 
Criando serviços com AngularJS
Criando serviços com AngularJSCriando serviços com AngularJS
Criando serviços com AngularJS
 
IBM - Apresentando jQuery
IBM - Apresentando jQueryIBM - Apresentando jQuery
IBM - Apresentando jQuery
 
KnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realKnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida real
 
Construindo Diretivas com AngularJS
Construindo Diretivas com AngularJSConstruindo Diretivas com AngularJS
Construindo Diretivas com AngularJS
 
Vue.js
Vue.jsVue.js
Vue.js
 

Destaque

WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
Leandro Alves
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05
Leandro Alves
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Anna Cruz
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
Gustavo Gobbi
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
Leandro Alves
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
Ana Paula Batista
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
Leandro Alves
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
Leandro Alves
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaser
leandroide
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
Leandro Alves
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
Juliano Toazza
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
Talita Pagani
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
Mário Barros
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
Marconi Pacheco
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo Ágil
Diogo Riker
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
Gustavo Gobbi
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint Workshop
Ana Paula Batista
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
Cloves Moreira Junior
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
Anderson Luís Furlan
 

Destaque (20)

WPI Aula 01
WPI Aula 01WPI Aula 01
WPI Aula 01
 
WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05WPI – Pós Design de Interação IEC PUC Minas aula05
WPI – Pós Design de Interação IEC PUC Minas aula05
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
Front end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrioFront end, back end, full stack.  onde vivem  o que comem   hoje na uni_granrio
Front end, back end, full stack. onde vivem o que comem hoje na uni_granrio
 
User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)User Interface (UI) x User Experience (UX)
User Interface (UI) x User Experience (UX)
 
WPI Aula 05
WPI Aula 05WPI Aula 05
WPI Aula 05
 
Hack2B Startups - UX?
Hack2B Startups - UX?Hack2B Startups - UX?
Hack2B Startups - UX?
 
WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06WPI – Pós Design de Interação IEC PUC Minas aula06
WPI – Pós Design de Interação IEC PUC Minas aula06
 
WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04WPI – Pós Design de Interação IEC PUC Minas aula04
WPI – Pós Design de Interação IEC PUC Minas aula04
 
Desenvolvimento de Games com Phaser
Desenvolvimento de Games com PhaserDesenvolvimento de Games com Phaser
Desenvolvimento de Games com Phaser
 
WPI Aula 04
WPI Aula 04WPI Aula 04
WPI Aula 04
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Interface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-endInterface é código: aprimorando a experiência do usuário no front e no back-end
Interface é código: aprimorando a experiência do usuário no front e no back-end
 
Processo de design digital
Processo de design digitalProcesso de design digital
Processo de design digital
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Agile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo ÁgilAgile UX: Projetando a User Experience no Mundo Ágil
Agile UX: Projetando a User Experience no Mundo Ágil
 
UI e UX no Material Design
UI e UX no Material DesignUI e UX no Material Design
UI e UX no Material Design
 
Hack2B - Design Sprint Workshop
Hack2B - Design Sprint WorkshopHack2B - Design Sprint Workshop
Hack2B - Design Sprint Workshop
 
Introdução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular jsIntrodução ao desenvolvimento front end usando bootstrap e angular js
Introdução ao desenvolvimento front end usando bootstrap e angular js
 
Introdução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento WebIntrodução ao Front-end no Desenvolvimento Web
Introdução ao Front-end no Desenvolvimento Web
 

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

Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
Henrique Gogó
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
Michel Ribeiro
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
Luiz Duarte
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EEJavaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Loiane Groner
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JS
Matheus Donizete
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
MoisesInacio
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
Harlley Oliveira
 
Evolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptEvolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScript
Jean Carlo Emer
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
Caio Ribeiro Pereira
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
Lambda 3
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
Diemesleno Souza Carvalho
 
Dinamizando Sites Estáticos
Dinamizando Sites EstáticosDinamizando Sites Estáticos
Dinamizando Sites Estáticos
Tiago Albineli Motta
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
Luciano Borges
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
Michel Ribeiro
 
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia
 
Sigle Page Application - A nova Web
Sigle Page Application - A nova WebSigle Page Application - A nova Web
Sigle Page Application - A nova Web
Victor Cavalcante
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
Marcio Romu
 
Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0
Saulo Vallory
 
Interfaces ricas com Rails e React.JS @ Rubyconf 2015
Interfaces ricas com Rails e React.JS @ Rubyconf 2015Interfaces ricas com Rails e React.JS @ Rubyconf 2015
Interfaces ricas com Rails e React.JS @ Rubyconf 2015
Rodrigo Urubatan
 

Semelhante a Backbone.js + Rails - Front-end e back-end conectados (20)

Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
Workshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + MongooseWorkshop Node.js + MongoDB + Mongoose
Workshop Node.js + MongoDB + Mongoose
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EEJavaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
 
Tornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JSTornando as coisas mais simples com Azure Functions e Node.JS
Tornando as coisas mais simples com Azure Functions e Node.JS
 
Artigoajax
ArtigoajaxArtigoajax
Artigoajax
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Evolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScriptEvolução e futuro do uso de paradigmas no JavaScript
Evolução e futuro do uso de paradigmas no JavaScript
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Backbone.js nas trincheiras
Backbone.js nas trincheirasBackbone.js nas trincheiras
Backbone.js nas trincheiras
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Dinamizando Sites Estáticos
Dinamizando Sites EstáticosDinamizando Sites Estáticos
Dinamizando Sites Estáticos
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Rafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em açãoRafael Garcia - Yii Framework, principais características e em ação
Rafael Garcia - Yii Framework, principais características e em ação
 
Sigle Page Application - A nova Web
Sigle Page Application - A nova WebSigle Page Application - A nova Web
Sigle Page Application - A nova Web
 
Prototype Framework Javascript
Prototype Framework JavascriptPrototype Framework Javascript
Prototype Framework Javascript
 
Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0Meu projeto final - Neobase 2.0
Meu projeto final - Neobase 2.0
 
Interfaces ricas com Rails e React.JS @ Rubyconf 2015
Interfaces ricas com Rails e React.JS @ Rubyconf 2015Interfaces ricas com Rails e React.JS @ Rubyconf 2015
Interfaces ricas com Rails e React.JS @ Rubyconf 2015
 

Mais de Henrique Gogó

Be React. Do Tests!
Be React. Do Tests!Be React. Do Tests!
Be React. Do Tests!
Henrique Gogó
 
Introdução React.js
Introdução React.jsIntrodução React.js
Introdução React.js
Henrique Gogó
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha Camarada
Henrique Gogó
 
NoSQL + Node.js
NoSQL + Node.jsNoSQL + Node.js
NoSQL + Node.js
Henrique Gogó
 
Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011
Henrique Gogó
 
Criando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsCriando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.js
Henrique Gogó
 
Conhecendo o CouchDB
Conhecendo o CouchDBConhecendo o CouchDB
Conhecendo o CouchDB
Henrique Gogó
 
Urls amigáveis em JavaScript com Sammy JS
Urls amigáveis em JavaScript com Sammy JSUrls amigáveis em JavaScript com Sammy JS
Urls amigáveis em JavaScript com Sammy JS
Henrique Gogó
 

Mais de Henrique Gogó (8)

Be React. Do Tests!
Be React. Do Tests!Be React. Do Tests!
Be React. Do Tests!
 
Introdução React.js
Introdução React.jsIntrodução React.js
Introdução React.js
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha Camarada
 
NoSQL + Node.js
NoSQL + Node.jsNoSQL + Node.js
NoSQL + Node.js
 
Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011Conhecendo o CouchDB - TDC2011
Conhecendo o CouchDB - TDC2011
 
Criando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.jsCriando aplicações JavaScript com CouchApp + Sammy.js
Criando aplicações JavaScript com CouchApp + Sammy.js
 
Conhecendo o CouchDB
Conhecendo o CouchDBConhecendo o CouchDB
Conhecendo o CouchDB
 
Urls amigáveis em JavaScript com Sammy JS
Urls amigáveis em JavaScript com Sammy JSUrls amigáveis em JavaScript com Sammy JS
Urls amigáveis em JavaScript com Sammy JS
 

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

  • 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; })
  • 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
  • 18. MVVM em outros sabores