Publicado em por Paulo Künzel

Conheça o Handlebars.js

[download id=”233″]

O Handlebars fornece as funcionalidades necessárias para permitir que você crie modelos semânticos de forma eficaz sem frustração. Ele é amplamente compatível com os templates Mustache e na maioria dos casos, é possível alternar entre os dois sem demais problemas.

Vou falar um pouco sobre o sistema, mas caso você queira saber mais, confira o site oficial do Handlebars no linkhttp://www.handlebarsjs.com e a demonstração ao vivo em http://tryhandlebarsjs.com/ para saber tudo o que o ele pode fazer por você.

Uso

Em geral, a sintaxe dos modelos Handlebars.js é um superset do Mustache. Depois de ter um modelo, use o método Handlebars.compile para compilar o modelo em uma função JavaScript. Esta função gerada leva um argumento de contexto que será usado para renderizar o modelo.

Segue abaixo um exemplo simples, para executa-lo

<html>
<head></head>
<body>
  <script src="handlebars.js"></script>
  <script>
    let exemplo = "<p>Olá, meu nome é {{nome}}. Eu sou de {{cidadeNatal}}. Eu tenho "
        + "{{filhos.length}} filhos:</p>"
        + "<ul> {{#filhos}}<li>{{nome}} tem {{idade}} anos</li>{{/filhos}}</ul>";
    let template = Handlebars.compile(exemplo);
    let dados = {
        "nome": "Paulo",
        "cidadeNatal": "Cidade, RS",
        "filhos": [{
        "nome": "João", "idade": "12"
        }, {
        "nome": "Maria", "idade": "4"
        }]
    };
    let resultado = template(dados); document.writeln(resultado);
  </script>
</body>
</html>

Templates pré-compilados

O handlebars permite que os templates sejam pré-compilados e incluídos como código JavaScript ao invés de templates handlebars, permitindo que as aplicações carreguem mais rápido. Para mais detalhes veja esse LINK

Principais diferenças entre o Handlebars.js e o Mustache

O Handlebars.js incrementa algumas funcionalidades adicionais para fazer o desenvolvimento de templates mais fácil e também muda alguns detalhes de como o “partials” funciona. Segue abaixo alguns itens que mudam entre os dois.

  • Caminhos aninhados
  • Helpers
  • Expressões de bloco
  • Valores literais
  • Comentários delimitados

As expressões de bloco têm a mesma sintaxe que as sessões do Mustache, mas não devem ser confundidas umas com as outras. Sessões são similares com o “each” implícito ou com “statement” dependendo dos dados inseridos e os “helpers” são pedaços de código explícitos que podem implementar qualquer comportamento que quiserem. A documentação do Mustache define o comportamento exato das sessões. No caso de haverem conflitos com os nomes, os “helpers” recebem prioridade.

Performance

Em um teste de performance bruta, o templates pré-compilados do Handlebars.js (na versão original do Handlebars.js) renderiza na metade do tempo dos templates do Mustache. Seria uma pena se fosse de qualquer outra forma, pois eles foram pré-compilados, mas a diferença na arquitetura tem diversas vantagens de performance. A nova versão do Handlebars é mais rápida que a original a ponto de que diversos testes de performance independentes registraram uma diferença de 5 a 7 vezes mais rápido que o equivalente em Mustache.

Nota

Este é um resumo traduzido diretamente do site do handlebars. Para mais detalhes, acesse o site http://handlebarsjs.com/ e tambémhttps://github.com/wycats/handlebars.js

Deixe um comentário