Apresentei no QCON S√£o Paulo 2011 um Lightning Talk: “Engine de template em Javascript com HTML Sprites”. A estrat√©gia consiste em montar um template com suas Partials no mesmo arquivo html para facilitar o trabalho de renderiza√ß√£o usando DIVs como “sprites”, assim como fazemos com CSS.

Para a estrat√©gia eu constru√≠ uma Engine de Templates minimalista quase Logic-less baseada na EL do JSP. Quase Logic-less porque a √ļnica l√≥gica permitida s√£o senten√ßas como IF Tern√°rio, compara√ß√Ķes e o conceito de Helpers (como no Rails), que n√£o passam de fun√ß√Ķes javascript simples que retornam alguma formata√ß√£o para a VIEW.

No meu curso Javascript Fundamental, um dos exercícios é construir essa engine que chamei de ELJS.

A grande diferen√ßa entre o ELJS e o Mustache (Engine Logic-less famosa) s√£o os Helpers e o conceito de compila√ß√£o separado da pr√≥pria renderiza√ß√£o. A grande vantagem da compila√ß√£o √© fazer um parser das marca√ß√Ķes e deixar o template preparado para interpola√ß√£o sem precisar tratar senten√ßas a cada chamada de “render”.

Assim como o Mustache, o tratamento dos Partials é feito fora da Engine, no meu caso eu tratei no plugin para jQuery (TODO: terminar plugins para outras bibliotecas/frameworks).

Atualizei o plugin para jQuery apresentado no evento com a √ļltima vers√£o que usamos nos nossos projetos e tornamos Open Source. Criei uma p√°gina de exemplo como funciona a estrat√©gia, mas os testes facilitam a compreens√£o, principalmente o teste do plugin.

Dá uma olhada nos slides novamente para entender a evolução dessa estratégia.

Categories: JavaScript, Jquery ~ ~ Trackback


Assine os coment√°rios deste artigo.


One Response to “Engine de template em Javascript com estrat√©gia de HTML Sprites”

  1. 1
    Rafael

    Nao esta funcionando o exemplo, nem quando baixei para testar aqui, abraçosss

Leave a Reply