Visões do Backbone e o DOM

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image — What You'll Be Creating

Visão Geral

Visões do Backbone provêm convenção e abstração úteis para interfaces de usuário. Contudo, para incluir funcionalidades de UI em aplicações que o Backbone, por conta própria, não foi criado pra suportar, é preciso considerar como integrar efetivamente funcionalidade customizada ou de terceiros nela. Como resultado, desenvolvedores devem navegar pelos desafios e evitar conflitos complicado entre bibliotecas externas e o Backbone.

Introdução ao Backbone.js

Backbone é uma forma fantástica de organizar código no lado do cliente. Com abstrações como modelos, visões e coleções, o Backbone ajuda desenvolvedores sérios a escrever aplicações bem organizadas e escaláveis.

Embora haja várias alterantivas ao Backbone, incluindo Angular e Ember, o Backbone dá liberdade aos desenvolvedores a escreverem e organizarem seus códigos de forma natural e confortável sem ser muito opinativa sobre como o Modelo de Objeto do Documento (DOM) se parece.

A Pele das Visões do Backbone

Visões são um dos componentes mais poderosos e flexíveis do Backbone. De acordo com os autores dele:

Visões do Backbone são mais convenção que código — não determinam padrões de HTML ou CSS por você e podem ser usadas com qualquer biblioteca de modelagem em JavaScript.

Ela são usadas para manipular o que os usuários veem no navegador e facilitam a comunicação entre os modelos. Como resultado, no paradigam Modelo-Visão-Controlador, imagine as Visões do Backbone como ambos visão e controlador.

Isso implica seriamente ao desenvolver aplicações com interações significarivas de usuários. Na verdade, há várias situações onde pode-se querer usar outra biblioteca para manipular o DOM. Visualização de dados e jogos de navegador são dois exemplos onde se pode preferir ter outra biblioteca para manipular parte da renderização da visão dos usuários. Assim, pode-se escolher jQuery, d3.js, crossfilter ou three.js para algumas das manipulações do DOM.

Felizmente, há formas de fazer o Backbone trabalhar bem com esses outros manipuladores de DOM.

Manipulando o Modelo de Objeto do Documento no Backbone

Antes de continuarmos, revisemos a manipulação do DOM com Backbone. Comecemos com um objeto de visão básico.

var SomeView = Backbone.View.extend({ 
    // Some definition stuff here 
}); 

var aView = new SomeView();

Ótimo. Agora, digamos à visão para renderizar-se, definindo o método .render() .

var SomeView = Backbone.View.extend({ 
    // define how to render something 
    render: function() { 
        // get some HTML 
        var htmlContent = "<p>This some HTML that will be inserted into the DOM</p>"; 
        
        // insert the html
        this.$el.html(htmlContent); 
        
        // return an instance of the object for chaining
        return this; 
    } 
});

Temos várias coisas acontecendo aqui. Vejamos passo-a-passo.

Definindo um Método `.render()` .

Primeiro, definimos um método .render() que encapsula a lógica necessária para renderizar o HTML. Note que o Backbone vem com um método .render() por padrão. Contudo, não significa muita coisa. Ele foi projetado para ser sobrescrito!

Obtendo Conteúdo HTML

O exemplo acima assume que obtemos o HTML de algum lugar. Podemos usar underscores _.template(). Anternativamente, podemos usar outras bibliotecas de modelagem, como a Handlebars (minha favorita). O que importa é que, de alguma forma, obtenhamos o conteúdo HTML.

O Que Seria Esse `el`?

Precisamos de um lugar para guardar o HTML. E é para isso que o el serve. Como o .render(), el é um atributo que vem por padrão com as Visões do Backbone. Ele referencia o elemento HTML (e todos seus filhos) presente na visão. No exemplo acima, não o especificamos. Por padrão, el é uma div. Contudo, poderíamos ter um elemento pai assim:

var SomeView = Backbone.View.extend({ 
    el: "article", ... 
}); 

var aView = new SomeView();

console.log(aView.el); // an empty "article" HTML element

Também existe o $el, que apenas é o el envolvido pelo jQuery Depois veremos que $el tem um papel importante ao dominar as Visões do Backbone.

Retornando `this`...

Finalmente, retornarmos a referência do objeto em si, permitindo encadeamento. Embora não necessário, retornar this é convenção. Sem return this, precisaríamos acessar o conteúdo do HTML de alguma forma. O código abaixo ilustra uma solução alternativa.

/** 
 * If render() returns nothing, we are really 
 * accessing the `el` property of undefined, which does not 
 * exist!
 */
aView.render().el; // Should throw an error 
 
// Try accessing the HTML 
console.log(aView.el); // Should be empty (but defined!) 

// add HTML to the DOM of 'aView' 
aView.render(); 

// Try accessing the HTML again 
console.log(aView.el) // Should contain the HTML

Ihh, Nada Aparece na Tela!

Bom ponto. Embora tenhamos chamado .render(), ainda não vemos algo na tela—que coisa?!

Isso se dá por não termos interagiado com o DOM ainda. Tudo que fizemos foi gerar HTML e representá-lo em um objeto JavaScript chamado aView. Como não temos acesso ao HTML gerado, o que precisamos fazer é inserir o HTML no DOM do nosso aplicativo web.

Para continuar, criaremos um pequenos app que fará a visão aparecer assim que a página carregar. Abaixo temos o HTML e o JavaScript necessários:

Preparação do HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>My Awesome Backbone App</title> 
        <!-- Include your CSS Here -->
        <link rel="stylesheet" type="text/css" href="/css/styles.css" />
        
        <!-- Include JS dependencies --> 
        <!-- Backbone depends on underscore and, in this example, 
             depends on jQuery. Please note the order of the 
             dependencies --> 
        <script src="/js/lib/jquery.js"></script>
        <script src="/js/lib/underscore.js"></script>
        <script src="/js/lib/backbone.js"></script>    
    </head>
    <body>
        <div class="app"></div> 
        <!-- Include your custom Backbone code in the below script -->
        <script src="/js/app.js"></script>            
    </body>
</html>

Eis O Que Temos no App.js

// Create a view 
var SomeView = Backbone.View.extend({ 
    initialize: function() {}, 
    render: function() { 
        var someHTML = "<p>This is some HTML</p>"; 
        this.$el.html(someHTML); 
        return this; 
    } 
}); 

// Create a router
var Router = Backbone.Router.extend({ 
    // define your routes 
    routes: { "": "home" }, 
    home: function() { 
        var aView = new SomeView(); 
        $('.app').html(aView.render().el); 
    } 
}); 

// Instantiate your router 
new Router(); 

// Start tracking history 
Backbone.history.start();

Abramos um servidor local/navegador, carreguemos a página e a aplicação deverá rodar!

Usando Backbone e jQuery Simultaneamente

A flexibilidade do Backbone permite-nos usar bibliotecas de terceiro para manipular o DOM. Um cenário é quando queremos usar jQuery e Backbone simultaneamente para manipular as visões. Abaixo temos o exemplo atualizado:

var SomeView = Backbone.View.extend({ 
    
    // Manipulate DOM indirectly by creating HTML content in a 
    // Backbone View 
    render: function() { 
        var someHTML = "<p>Some HTML</p><p class='empty'><p>"; 
        this.$el.html(someHTML); 
        return this;
    }, 
    
    // Manipulate DOM directly from within the Backbone View
    renderWithJQuery: function() { 
        var otherHTML = "<p>Other HTML</p>"; 
        $('.app').append(otherHTML); 
        
        // may not make sense to return 'this' 
    }, 
    
    // another render method, to keep things interesting 
    specialRender: function() { 
        this.$('.empty').append("<span>No longer empty!</span>"); 
        return this; 
    } 
}); 

// Later in your app... 

// create the view 
var aView = new SomeView(); 

// change the DOM to reflect the newly created view 
$('.app').html(aView.render().el); 

// append more content directly to the DOM using jQuery within 
// a Backbone view object 
aView.renderWithJQuery();

O código resultará em dois parágrafos na página. O primeiro parágrafo conteém "Some HTML". O segundo contém "Other HTML".

Para testar o conhecimento, invertamos as chamadas, assim:

// SomeView is already defined 

var aView = new SomeView(); 

aView.renderWithJQuery(); 

$('.app').html(aView.render().el);

O cüodigo acima resultará em um parágrafo: "Algum HTML". Em ambos os casos, há um elemento <p> com nada nele. Discutiremos isso em já-já.

Manipulando o DOM Eficientemente com Visões do Backbone

Entender a mágica da manipulação (travessia) eficiente do DOM requer entendimento de this.$el e this.$(). Ao usar this.$el, avaliamos a manipulação do DOM do conteúdo dentro da visão. Já com this.$(), avaliamos a travessia do DOM à arvore DOM dentro da visão.

Assim, no Backbone, usar $() (ao invés de this.$()) podem ser ineficiente. Por exemplo, digamos que queremos atravessar o DOM para encontrar um elemento. Podemoss usar quaisquer dos métodos de travessia do DOM, incluindo .find(), .children(), .closest(), .first(), e por aí vai.

Se soubermos, a priori, que o elemento procurado está no DOM da visão, devemos usar this.$(), evitando uma busca desnecessária num DOM maior. Se o elemento estiver fora do DOM da visão, temos de usar $().

Por exemplo, o método .specialRender() usa travessia localizada do DOM para garantir que buscamos elementos com a classe empty no contexto da visão. Se encontrada, faz o HTML desses elementos incluir um span e o texto "No longer empty".

Conclusão

Nese artigo, revisamos as Visões do Backbone, discutimos como renderizá-las no DOM e exploramos como fazer o Backbone trabalhar junto de outras biblotecas que queiramos usar para manipular o DOM. Também aprendermos sobre travessia localizada do DOM e identificamos métodos eficiente e ineficientes para atravessá-lo.

Na próxima parte, aprofundaremo-nos em exemplos mais complicados emcomo fazer múltiplas bibliotecas trabalharem juntas para manipular o DOM.