Backbone.js: Desenvolvendo com Web API e o padrão MVP

No decorrer dos anos, a necessidade de aprender novas formas de trabalhar com o desenvolvimento de nossas aplicações web aumentou, principalmente devido aos requisitos de termos aplicações mais ágeis e interativas, além de podermos apresentar gráficos mais interessantes e termos uma interação multimídia sem a utilização de plug-ins para este fim, por exemplo.

Essas mudanças são as que nos motivam, como desenvolvedores, a criarmos aplicações mais ricas e simples para o usuário final. Além desses fatores, estamos em um período onde o desenvolvimento de aplicações de páginas únicas vem sendo uma tendência constante no mercado.

Estas aplicações web são conhecidas como SPA’s (Single Page Applications), que incluem uma página HTML que atua como um escudo para proteger toda a aplicação.

Esse escudo, no entanto, é alterado via JavaScript de acordo com as iterações realizadas pelo usuário, geradores de templates cliente-servidor e mecanismos de roteamento.

Isso significa que podemos criar RIA’s (Rich Internet Applications) fazendo uso basicamente de recursos HTML, CSS e JavaScript, como é o caso de aplicações responsivas e statefull.

Para criarmos uma SPA, há uma maneira bastante recomendada que é a utilização de bibliotecas ou mesmo frameworks que já têm implementadas as características de roteamento, geradores de templates e formas de realizar a comunicação com o servidor. Hoje em dia, os frameworks mais influentes no mercado para a criação de SPA’s são o Ember.js e o AngularJS.

Quanto a bibliotecas que podem nos ajudar com esta tarefa, a mais influente atualmente é a Backbone.js, que será o foco de nosso aprendizado no decorrer deste artigo. Veremos aqui algumas de suas características mais importantes e aprenderemos a utilizar algumas de suas funcionalidades de forma simples, a partir de exemplos práticos de uso.

Com a utilização do Backbone.js, podemos representar nossos dados como models, que podem ser criados, validados, salvos, dentre outras possibilidades em um servidor.

Toda vez que uma ação da UI (User Interface) causar a mudança de um atributo no model, este dispara um evento chamado "change"; onde todas as views que mostram o estado do model podem ser notificadas com relação à mudança ocorrida, de modo que eles sejam capazes de responder de acordo a essas mudanças e possam ser renderizados com as novas informações.

Com a utilização do Backbone, não precisamos ter um código que busca por alterações no DOM para encontrar um elemento com um id específico, e em seguida realizar a atualização do HTML, isso será feito automaticamente.

Em uma pesquisa rápida pela internet, podemos ver que em muitos sites temos a informação errônea de que o Backbone.js é um framework, mas ele é de fato uma biblioteca do tipo Model-View-* (MVP ou MVVM), que foi desenvolvida por Jeremy Ashkenas, o também criador do CoffeeScript e do Underscore.js.

O Backbone.js é uma biblioteca JavaScript leve que impõe aos desenvolvedores uma forma para organização de seus códigos de uma maneira limpa e eficiente, o que facilita ainda mais o desenvolvimento da SPA. Em seu núcleo, o Backbone.js inclui cinco objetos principais, os quais podem ser utilizados pelo desenvolvedor, com base em suas funcionalidades.

· Models: Responsáveis pelas estruturas de dados;

· Views: Onde estão localizados os códigos por trás de uma view HTML;

· Collections: Estes são conjuntos de modelos;

· Routers: São responsáveis por expor o mecanismo de roteamento do lado do cliente;

· Events: Permitem a extensão de qualquer objeto com o auxílio de manipuladores de eventos.

Cada um dos itens citados já vem com suas próprias API’s, as quais permitem que muitas das tarefas comuns de desenvolvimento tornem-se mais rápidas. Para mais informações referentes ao Backbone, é aconselhado consultar o site oficial indicado na seção Links.

O Backbone.js é uma biblioteca leve para a estruturação de código presente no lado do cliente, devido a isso, temos a facilidade para promover o desacoplamento entre os componentes da aplicação.

A vantagem de utilizarmos o Backbone é que ele nos fornece mecanismos de estruturação de dados usando o model, as collections e os helpers utilizados para gerar as views. Esse recurso é muito importante para a criação de aplicações dinâmicas usando o JavaScript.

Model

Os models são o centro das atenções de uma aplicação que contém os dados de forma interativa, assim como uma grande parte da lógica que o contempla, como é o caso das conversões, validações, propriedades computadorizadas e controle de acesso.

Podemos estender o Backbone.Model com seus métodos específicos de domínio. O model nos oferece um conjunto básico de funcionalidades para a realização das mudanças. Dentre as funcionalidades pertencentes ao model, podemos destacar o extend, o set, o changed e o save.

Para que os models possam ser utilizados de forma a podermos conter os dados para a aplicação e para a lógica em torno desses dados, podemos defini-los a partir da extensão do Backbone.Model, como apresentado a seguir:

Para a utilização da funcionalidade extend do Backbone.js, precisamos invocá-la como a seguir:

Backbone.Model.extend(properties, [classProperties])

Dessa forma, podemos estender as funcionalidades básicas do Backbone.Model e com isso fornecer propriedades, como é o caso do classProperties, que pode ser conectado diretamente à função do construtor. Já com relação à funcionalidade set, esta pode ser definida da seguinte forma:" [...] continue lendo...