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

PorFernando Geraldo Mantoan em

Backbone.js

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.

Mensagem do anunciante:

A FIAP é o centro de excelência em tecnologia mais respeitado do país.

Deixe um comentário! 28

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Comentando como Anônimo

  1. Vou seguir essa serie apesar de preferir o Ember ao Backbone (na minha humilde opiniao, deixa algumas coisas a desejar). Gosto de Backbone tbm.

    1. Nao me entenda mal, eu gosto do Backbone e tenho certeza que irei gostar dos proximos artigos, “manda que nois lê” :P
      O que eu quis dizer com o “deixa algumas coisas a desejar” é justamente o fato do Backbone ter uma arquitetura mais simples que o Ember, e com isso faltam algumas coisas (como um route manager descente e o binding “magico” do ember e algumas coisinhas), e por isso a gente tem que implementar varias vezes a mesma coisa pra ele funcionar redondinho, ja o Ember elimina BASTANTE o “boilerplate” e vc ja vai direto pra parte que interessa.. mas manda mais ai, adoro js e estou ansioso para um artigo sobre Backbone alem do hello world :)

  2. Pô Fernando, conseguisse me dar uma empurrada com o Backbone através deste artigo. De primeiríssima mesmo, valeu cara!

    Mas aproveitando aqui o comentário, queria saber de você: o que acha do Meteor?

    1. Olá Guilherme, tudo bem? Obrigado pelo comentário, infelizmente não posso te dar nenhuma opinião sobre o Meteor, nunca utilizei o mesmo.

  3. Oi Fernando, obrigado pelo artigo. Estou com as seguintes dúvidas:

    O fw roda no client-side, as regras de negócios estarão visíveis?

    Você só vai usar o backend pra REST, como fica a segurança? Vale a pena usar um fw desse com zend framework por exemplo?

    Os Models não estarão replicados (tanto em js como em php)? Por ex. se tu adicionar um atributo numa entidade.

    1. Olá Diogo, tudo bem? Com certeza, roda no Client-Side e se você definir regras de negócio, ficarão visíveis. Geralmente neste tipo de abordagem client-side, você não terá regras de negócio e sim regras visuais, o que não teria muito problema em ficar visível. Essa questão arquitetural deve ser planejada na hora de construir uma aplicação utilizando essa abordagem.

      Com relação à segurança e à utilização com um framework como o Zend, também são questões que devem ser pensadas. Não existira nenhum problema, principalmente pelo fato de que cada um está relacionado a partes distintas de uma aplicação. Você poderia usar o ZF com o Backbone, principalmente se for necessário ter uma maior organização em seu código Javascript. Já com relação à segurança existem formas de se trabalhar, como SSL, tokens de autenticação, e um trabalho mais sucinto no backend com relação aos status HTTP (403, 401, etc).

      Os models seriam replicados, ou poderiam conter somente o que for utilizado nas suas respostas JSON, já que eles são construídos de acordo com essa resposta.

    2. Quando sai o proximo artigo? vc pretende abordar alguns desses temas que o Diogo mencionou ao longo da serie? (seria melhor ainda)
      td de bom

    3. Obrigado pela rápida resposta!

      Então resumindo seria usar esse FW pra organizar o código js, talvez por usar o padrão MVC, existam helpers para criação de formulários e validação client-side (não sei).

      Você sabe se existe algum FW JS já integrado ou recomendado pra uso com o ZF? Seria muito bom, imagina criarmos os forms (com seus filtros e validadores) e models apenas 1 vez.

    4. @Thiago, acredito que o próximo artigo será publicado aqui na iMasters em até duas ou três semanas. O que está por vir é surpresa :)

      @Diogo, isso mesmo, para organizar o código, e estruturar seu front-end. Com relação ao ZF, o framework JS já integrado é o Dojo (http://framework.zend.com/manual/en/zend.dojo.html), mas no incubator você também consegue utilizar integração com jQuery UI (http://framework.zend.com/manual/en/zendx.jquery.html).

  4. Backbone é o que há. Não me vejo desenvolvendo JS sem underscore + backbone.
    Colocando um coffee aí a coisa fica melhor ainda :).

    Abraços.

    1. Olá, tudo bem Thiago? Devido a algumas questões pessoais ainda não consegui finalizar os próximos artigos da série, mas logo logo eles serão publicados. Att.

    2. Fernando manda bala! Se possível no prox. artigo já coloca ex. de estrutura de um site usando Backbone, como ficariam organizados (pastas e arquivos). Valeu!

    1. Ai Fernando, vi o cursinho la no codeschool, e apesar de preferir o Ember gostei do curso e estou fazendo. Acho muito bom ter conhecimento de mais de uma ferramenta da mesma categoria :) tudo de bom.. esperando o proximo.. valeu

    1. Pode, mas para isso não precisaria nem usar o Backbone. O exemplo é muito simples, daí não fica muito claro o porque de criar tanto código para pouca coisa. Nos demais artigos da série dá para ter uma visão mais clara sobre o uso de cada recurso. Abraço.

leia mais
Este projeto é mantido e patrocinado pelas empresas:
Hospedado por: