O Backbone.js é um framework Javascript que fornece componentes para melhorar a estrutura de aplicações web. Entre estes componentes encontram-se Models, Collections e Views, além de meios nativos de interagir com backends RESTful e JSON. Nesta série de 6 artigos sobre Backbone.js serão abordados seus principais componentes e, ao final, será construída uma aplicação simples de contatos contemplando cada um dos componentes apresentados e com um “bônus” sobre o Slim framework.
Introdução
Ao se construir aplicações web, existe uma grande tendência de se codificar a UI acoplada à estrutura DOM existente, usando extensivamente seletores jQuery e callbacks, além de não se definir um padrão bem definido de mapeamento dos dados do servidor e muito menos a estrutura do código Javascript. Não se pode generalizar, mas boa parte das aplicações web sofrem com esse problema.
Com o Backbone.js é possível representar dados do servidor como Models no código Javascript, garantindo suporte à validação, exclusão, e gravação no servidor. O Model será apresentado para o usuário através de uma View, que irá manipular o Model em questão e poderá definir callbacks para eventos do Model, podendo ser eventos de mudanças nos atributos do Model, remoção, dentre outros, e através destes callbacks a View poderá manter o estado de sua apresentação sempre atualizado, refletindo as mudanças correspondentes no Model.
O principal resultado desta abordagem é um código que não inspeciona e nem depende de todo o DOM da aplicação, muito menos dos diversos seletores jQuery ou dos IDs dos elementos, para atualizar manualmente o HTML, pois com essa abordagem as Views sempre se manterão atualizadas conforme as mudanças aos Models. Além disso, é possível ter uma boa separação de cada parte do Javascript, tornando muito mais fácil a manutenibilidade do código. Isso não quer dizer que o código não dependerá de nenhum DOM, porém será minímo, conforme apresentado nos artigos que se sucedem.
Dependências
A principal dependência do Backbone.js é o framework Underscore.js que fornece diversos recursos para aplicações Javascript, como suporte a templates, e suporte a recursos de programação funcional.
Para utilização de RESTful, manipulação de DOM básico e de suporte a ações com histórico (explicado na parte 5 desta série) será necessário incluir as bibliotecas json2.js e jQuery ou Zepto.
Hello World
Implementar um Hello World com o Backbone é bem simples, basta implementar uma View e renderizá-la à página. Primeiramente é necessário baixar as bibliotecas jQuery, Backbone.js e Underscore.js, e colocá-las em alguma pasta da aplicação web, para este exemplo será utilizada a pasta lib.
A próxima etapa é criar a classe View para a aplicação Hello World. O código abaixo demonstra as etapas necessárias:
var HelloView = Backbone.View.extend({
el: $('body'),
initialize: function() {
this.render();
},
render: function() {
$(this.el).append("<h1>Hello World</h1>");
}
});
Este código define um novo componente View, que irá renderizar seu conteúdo no elemento <body>, e define dois métodos: initialize e render. O método initialize é chamado quando uma instância da View é feita, funcionando de maneira similar a um construtor. O método render é responsável por gerar o HTML da View em questão, nesse caso somente um título contendo “Hello World”. Vale notar que para adicionar o conteúdo à View é utilizado o atributo this.el como seletor jQuery, que está configurado como o body do HTML.
O próximo passo é instanciar a View, e o método initialize será automaticamente invocado, adicionando o H1 ao body da página.
var view = new HelloView();
O exemplo completo é apresentado abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="../lib/jquery-min.js"></script>
<script src="../lib/underscore-min.js"></script>
<script src="../lib/backbone-min.js"></script>
<script>
$(document).ready(function() {
var HelloView = Backbone.View.extend({
el: $('body'),
initialize: function() {
this.render();
},
render: function() {
$(this.el).append("<h1>Hello World</h1>");
}
});
var helloView = new HelloView();
});
</script>
</head>
<body></body>
</html>
Código-Fonte
Todo o código-fonte criado e apresentado nesta série de artigos encontra-se no repositório backbone-tutorial-series em meu GitHub.
Referências
O Backbone.js conta com uma boa documentação, que apresenta seus componentes, exemplos de uso e, também, apresenta uma lista com tutoriais e uma aplicação de exemplo.
No próximo artigo será apresentado o componente View, responsável por gerenciar a apresentação dos Models de uma aplicação web.
Mto legal esse post Fernando, aguardando as próximas postagens
abçs
Valeu Maran, abraço.
Cara boa iniciativa sua, esses padrões auxiliam muito para a organização dos códigos javascript de um projeto.
Acompanharei os artigos!
Isso mesmo Heverson, esse é o objetivo do Backbone.js assim como o desta série de artigos. Obrigado, abraço.
Muito bom!
Estou ancioso para os proximos posts!
Obrigado.
Obrigado, abraço.
Muito bom mesmo! Bem explicado! Parabéns!
Obrigado André, abraço.
Pingback: Série Backbone.js: Parte 2 - View | Fernando MantoanFernando Mantoan
Pingback: Série Backbone.js: Parte 3 - Model | Fernando MantoanFernando Mantoan
Muito bacana mesmo… tava lendo algumas coisas sobre MVC e MVVM e to achando isso muito bacana! Agora to aprendendo o backbone, que parece bem promissor! Abs,
Realmente, o Backbone é muito promissor, e tem ganhado muita popularidade entre os desenvolvedores. Obrigado pelo comentário, abraço.
Cara gostei da série irei add no RSS aqui……. também sou blogueiro e criei uma série de posts bacana que acho que você vai curtir também…..
Node.js para leigos
http://www.udgwebdev.com/nodejs-para-leigos/
Obrigado pelo comentário Caio, que bom que gostou. Gostei dos seus artigos sobre Node, parabéns, abraço.
Pingback: Série Backbone.js: Parte 4 – Collection | Fernando Mantoan
Pingback: Getting your head around Backbone.js « PHP Libraries, API's and Frameworks
Muito bom! Ótima iniciativa.
Obrigado Almir, abraço.
Cara bacana o tutorial.
Só um ponto, a propriedade “el” da view, não precisa ser envelopada com jquery, isso porque ao definir ela com o id do container da view, o Backbone automaticamente define uma prop chamada “$el” que é o elemento envelopado com jquery.
[]s
Exatamente, nesse primeiro artigo não apresentei o $el para apresentá-lo no segundo artigo, que é específico sobre a parte de View do Backbone, já deu uma olhada?