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 type="text/javascript">
      $(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.

Por favor, não copie este artigo na íntegra, se gostaria de referenciar escreva com suas próprias palavras e referencie o link original. Obrigado!