Sistemas de layouts em Javascript
Se você pensava que os layouts eram algo ligado ao back-endisso significa que você ainda tem bastante o que explorar quanto ao desenvolvimento do lado do cliente. Neste artigo pretendemos explicar o que são os layouts Javascript, de modo que possamos entender sua utilidade e a que ponto podem ser essenciais para uma programação front-end simples e sustentável.
Creio que o melhor para entender a necessidade de usar layouts em Javascript é ver-se no quebra-cabeças com que nos deparamos quando queremos gerar dinamicamente elementos no DOM da página web. Assim, começaremos explicando suas vantagens com um exemplo com o qual podemos ter-nos deparado.
Por que layouts em Javascript
Se você usa jQuery, você sabe que pode inserir código HTML na página com os métodos append(), appendTo(), prepend(), etc. Inserir algo simples como um link ou uma imagem não dará muito trabalho, mas quando se trata de estruturas complexas de código HTML, você terá percebido que não é tão prático. Se você passou por isso, deve ter sofrido milhares de chamadas a esses métodos, invocadas em cadeia, que resultam difíceis de programar e ainda mais complexas de entender à primeira vista e de manter com o tempo.
Não seria melhor manter essas estruturas em HTML plano e simplesmente chamar uma função que nos carregue os dados enviados dentro do código HTML? Pois isso é basicamente o que conseguimos com os layouts.
Não há muito segredo. Nosso layout teria um aspecto como este código HTML:
<div>
<h1>{{titulo}}</h1>
<div>
{{corpo}}
</div>
</div>
Como você vê, há blocos de conteúdo que podem ser preenchidos com dados variáveis, são os {{titulo}} e {{body}}. Nada mais teríamos que invocar a esse layout enviando os dados que queremos carregar no HTML e nos devolverá o código HTML resultante, já com os dados dentro das etiquetas, em uma cadeia que poderíamos inserir no DOM de uma maneira simplíssima com nossa biblioteca Javascript preferida, seja jQuery ou qualquer outra.
É claro, se amanhã quisermos modificar o layout, adicionando etiquetas, mudando a estrutura ou hierarquia, só teríamos que modificar o layout, como se fosse um HTML normal e o Javascript permaneceria intacto. Bom, uma maravilha!
Falta ver como seria o sistema para executar o layout, mas realmente essa implementação depende do sistema de layouts que você esteja utilizando, embora geralmente seja algo tão simples quanto executar um método ou uma função.
.addClass(“estrutura”)
.append(“<h1>” + titulo + “</h1>”)
.append($(“<div></div>”)
.html(corpo)
.addClass(“corpo”))
.appendTo(“body”);
Como se pode ver, construir estruturas DOM a partir de jQuery nã é muito prático, e embora possa ser feito sem problemas, acaba não sendo cômodo.
Como funcionam os sistemas de layouts
O paradigma de desenvolvimento do lado do cliente está mudando e estas bibliotecas são uma mostra disso. Cada vez mais no front-end consumimos mais o que se chama “rest-api”, que oferecem dados que veem do back-end em formato de texto, geralmente em notação JSON. Pois estas bibliotecas de layouts o que oferecem é passar rapidamente desses JSON para pedaços de código HTML que você pode inserir comodamente no DOM da página.
Em geral, todos os sistemas funcionam da mesma maneira. Em sua aplicação você terá um HTML pequeno e por meio de chamadas a AJAX você invoca o back-end, traz um objeto em JSON, o “des-serializa” e o transforma em um objeto Javascript, o manipula no cliente e por último o converte em HTML por meio de um layout.
Os sistemas de layouts são , além do mais, companheiros inseparáveis de algumas bibliotecas avançadas Javascript que nos trazem paradigmas de desenvolvimento diferentes, como os MVVM, que seria algo parecido ao MVC mas para desenvolvimento no cliente. Nos últimos meses se falou muito de AngularJS, que já vem com seu próprio sistema de layouts. Porém outras, como por exemplo Backbone não implementam seu próprio sistema de templating, de modo que quaisquer das seguintes bibliotecas Javascript será ideal.
Relação dos principais sistemas de layouts em Javascript
Existem diversos sistemas de layouts em Javascript que você pode usar à vontade. A continuação temos uma lista das principais bibliotecas Javascript que teremos à nossa disposição se quisermos implementar a ferramenta de layouts e começar a usufruir das utilidades que nos facilitam.
Handlebars: Um sistema de layouts para Javascript que implementa a sintaxe Mustache Templates e que fornece funcionalidades adicionais para sua compilação e processamento.
handlebarsjs.com
Underscore.js: uma biblioteca Javascript que fornece um grande leque de funcionalidades destinadas a gerar e usar layouts Javascript.
underscorejs.org
Pure: Sistema de layouts ultra-rápido para gerar HTML a partir de objetos JSON.
beebole.com/pure
jsrender: A geração seguinte de layouts jQuery, otimizados para um alto rendimento.
github.com/BorisMoore/jsrender
No geral, poderíamos nomear algumas outras bibliotecas, mas estas são as que atualmente têm melhor aparência. Na atualidade tudo depende de suas preferências, já que em Javascript existem dezenas de bibliotecas para resolver as mesmas coisas. Tudo dependerá de ver aquela que no fim acaba tendo maior penetração.
No próximo artigo explicaremos um destes sistemas de layouts Javascript, Handlebars, dando exemplos sobre suas capacidades e a maneira de implementá-los.
Fonte: http://www.criarweb.com/artigos/sistemas-layouts-javascript.html