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 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 helloView = 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 dos Artigos
Todo o código-fonte criado e apresentado nos diversos artigos desta série poderá ser encontrado 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.
Na segunda parte desta série de artigos será apresentado mais detalhadamente o componente View, responsável por gerenciar a apresentação dos Models de uma aplicação web.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?