Durante anos, os desenvolvedores têm aproveitado os frameworks PHP, como o CakePHP, o CodeIgniter e até mesmo frameworks Ruby baseados no padrão MVC. Mas se você pensar sobre isso, não tem havido muitos frameworks JavaScript para nos ajudar da mesma maneira.
Talvez seja porque o JavaScript é muitas vezes desprezado pelos programadores "reais", mas os frameworks JavaScript sempre ficaram para trás um pouco. Espinha dorsal mudou isso e, como você verá nesta introdução, ele usa o padrão MVC para separar o código JavaScript e nos ajuda a criar aplicativos estruturados. Na verdade, ele fornece o padrão MVC para o desenvolvimento de front-end.
O Backbone é uma biblioteca JavaScript leve do mesmo criador CoffeeScript. Mas não deixe que o fato de ser uma biblioteca faça você confundi-la com o jQuery, o Backbone está a uma distância do jQuery quando se trata de funcionalidade. O Backbone não manipula elementos DOM, e é por isso que muitos desenvolvedores o usam de mãos dadas com o jQuery; Estrutura de organização de backbone e jQuery manipulando o DOM.
O que o Backbone faz muito bem é fornecer estrutura para seus aplicativos JavaScript e, como funciona com o JSON, é simples inserir em praticamente qualquer sistema de modelo front-end.
MVC significa Modelos, Views e Coleções; e no Backbone, com também os roteadores.
No Backbone, um modelo representa e entidade, portanto, por exemplo, se estamos lidando com usuários, cada usuário seria um Model; é como uma linha em um banco de dados.
Para criar um modelo simples usando o Backbone, nós digitaríamos:
var user = Backbone.Model.extend({});Esse código é tecnicamente correto, mas esse Modelo não teria nenhuma funcionalidade, então precisamos adicionar algo para este Modelo fazer quando for instanciado e, para isso, usaríamos um código um pouco mais complexo:
User = Backbone.Model.extend({initialize: function(){alert('Welcome to {$lang_domain} ');}, padrões: {name:' John Doe ', idade: 30,}}); var user = new Usuário; No código acima, a função initialize será acionada toda vez que criarmos uma nova instância deste modelo, depois de inicializar tudo o que fizemos é adicionar alguns padrões no caso de nenhum dado ser passado para o Model. Com isso feito, para criar uma instância do Model, usaríamos código como:
var dave = new User({name:'Dave Smith', age:25});Para recuperar um atributo de uma determinada instância, usaríamos:
var name = dave.get('name');E para alterar um atributo que usaríamos:
dave.set({age:31});Este é o básico de como os modelos funcionam no Backbone, há muito mais que eles podem alcançar, mas esperamos que você já possa ver o potencial para estruturar código.
Lembra que eu disse que um modelo era como um usuário? Bem, seguindo essa analogia, uma coleção é todos os usuários que temos. As coleções são essencialmente conjuntos de modelos e, como já temos nosso modelo de usuário, criaremos uma coleção a partir de lá:
var Users = Backbone.Collection.extend({model: User});Atualmente, esta coleção está vazia, mas é simples criar alguns usuários e adicioná-los à coleção:
var barney = new User({ name: 'Barney Stinson', age: 30});var ted = new User({ name: 'Ted Mosby', age:32});var lily = new User({ name: 'Lily Aldrin', age: 29});var himym = new Users([barney, ted, lily]);Agora, se nós consolar.log himym.models nós obteremos os valores de barney, ted e lily.
As visualizações estão associadas a uma parte do DOM, elas são projetadas para serem vinculadas aos Modelos que são essencialmente os dados do aplicativo e servem para apresentar esses dados ao usuário final.
Criar uma visão é simples:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){}});Essa é a estrutura básica de uma visão. O tagName é o elemento que será usado para quebrar a view, a classe é definida usando o className e por último adicionamos uma função render, embora neste último caso a função esteja vazia. É a função de renderização que usamos para adicionar ao palco, assim:
UserView = Backbone.View.extend({tagName: 'div',className: 'user',render: function(){this.el.innerHTML = this.model.get('age');}});O elemento el na função render refere-se ao wrapper que criamos e usando a função innerHTML colocamos a idade do usuário dentro do div.
Este exemplo não usou nenhum sistema de templates, mas se você quiser, pode aproveitar o Underscore.js que acompanha o Backbone.
Também podemos ouvir eventos anexando um ouvinte de evento à nossa visualização e, neste exemplo, criaremos um ouvinte de clique simples para nossa div (esse código ocorre imediatamente após a nossa função de renderização):
events:{'click.user': 'divClicked'},divClicked: function(event){alert('You clicked the div');}Roteadores de backbone são usados para rotear as URLs no aplicativo ao usar hashtags (#). Para definir um roteador, você deve sempre adicionar pelo menos uma rota e pelo menos uma função que será executada quando o URL desejado for atingido, da seguinte forma:
var appRouter = Backbone.Router.extend({routes:{'user': 'userRoute'},userRoute: function() {// the code to run when http://example.com/#user}});Backbone.history.start();Este é um roteador extremamente simples que executará uma ação quando o hash do usuário / # for atingido. A chamada do método Backbone.history.start () pede ao Backbone para monitorar as hashtags para que os vários estados do site sejam marcados e possam ser navegados com o navegador.
Este artigo aborda apenas os conceitos básicos do Backbone, que podem ser usados para criar aplicativos estruturados em JavaScript. Eu aconselho você a verificar o sistema de templates para uso em conjunto com o Backbone para ver todo o potencial desta biblioteca. Espero que essas breves introduções tenham mostrado como o MVC pode ser útil no front-end.
Você criou aplicativos com o Backbone? Que tipo de aplicativo você gostaria de criar? Deixe-nos saber nos comentários.
Imagem em destaque / miniatura, imagem de andaimes via Shutterstock.