Backbone.js-Post-Image-1

Série Backbone.js: Parte 1 – Introdução

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.

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!

25 opiniões sobre “Série Backbone.js: Parte 1 – Introdução”

  1. Cara boa iniciativa sua, esses padrões auxiliam muito para a organização dos códigos javascript de um projeto.
    Acompanharei os artigos!

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

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *


9 + 7 =

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>