{"id":1455,"date":"2011-09-19T18:01:59","date_gmt":"2011-09-20T01:01:59","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/?p=1455"},"modified":"2011-09-19T18:01:59","modified_gmt":"2011-09-20T01:01:59","slug":"engine-de-template-em-javascript-com-estrategia-de-html-sprites","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2011\/09\/19\/engine-de-template-em-javascript-com-estrategia-de-html-sprites\/","title":{"rendered":"Engine de template em Javascript com estrat\u00e9gia de HTML Sprites"},"content":{"rendered":"<p><script type=\"text\/javascript\"> function get_style1455 () { return \"none\"; } function end1455_ () { document.getElementById('wqd1455').style.display = get_style1455(); } <\/script>Apresentei no <a href=\"http:\/\/www.milfont.org\/tech\/2011\/09\/16\/qcon-sao-paulo-2011\/\">QCON S\u00e3o Paulo 2011<\/a> um <a href=\"http:\/\/qconsp.com\/schedule\/sabado\">Lightning Talk<\/a>: &#8220;Engine de template em Javascript com HTML Sprites&#8221;. A estrat\u00e9gia consiste em montar um template com suas Partials no mesmo arquivo html para facilitar o trabalho de renderiza\u00e7\u00e3o usando DIVs como &#8220;sprites&#8221;, assim como fazemos com CSS.<\/p>\n<p>Para a estrat\u00e9gia eu constru\u00ed uma <a href=\"http:\/\/en.wikipedia.org\/wiki\/Template_engine_(web)\">Engine de Templates<\/a> minimalista quase Logic-less baseada na <a href=\"http:\/\/en.wikipedia.org\/wiki\/Expression_Language\">EL do JSP<\/a>. Quase Logic-less porque a \u00fanica l\u00f3gica permitida s\u00e3o senten\u00e7as como IF Tern\u00e1rio, compara\u00e7\u00f5es e o conceito de Helpers (como no Rails), que n\u00e3o passam de fun\u00e7\u00f5es javascript simples que retornam alguma formata\u00e7\u00e3o para a VIEW.<\/p>\n<p>No meu curso <a href=\"http:\/\/www.milfont.org\/javascriptfundamental.html\">Javascript Fundamental<\/a>, <a href=\"https:\/\/gist.github.com\/1224299\">um dos exerc\u00edcios<\/a> \u00e9 construir essa engine que chamei de <a href=\"https:\/\/github.com\/milfont\/eljs\">ELJS<\/a>.<\/p>\n<p>A grande diferen\u00e7a entre o <a href=\"https:\/\/github.com\/milfont\/eljs\">ELJS<\/a> e o <a href=\"http:\/\/mustache.github.com\/\">Mustache<\/a> (Engine Logic-less famosa) s\u00e3o os Helpers e o conceito de compila\u00e7\u00e3o separado da pr\u00f3pria renderiza\u00e7\u00e3o. A grande vantagem da compila\u00e7\u00e3o \u00e9 fazer um parser das marca\u00e7\u00f5es e deixar o template preparado para interpola\u00e7\u00e3o sem precisar tratar senten\u00e7as a cada chamada de &#8220;render&#8221;.<\/p>\n<p>Assim como o Mustache, o tratamento dos Partials \u00e9 feito fora da Engine, no meu caso eu tratei no plugin para jQuery (TODO: terminar plugins para outras bibliotecas\/frameworks).<\/p>\n<p>Atualizei o <a href=\"https:\/\/github.com\/milfont\/eljs\/blob\/master\/src\/jquery.el.js\">plugin para jQuery<\/a> apresentado no evento com a \u00faltima vers\u00e3o que usamos nos nossos projetos e tornamos <a href=\"https:\/\/github.com\/milfont\/eljs\">Open Source<\/a>. Criei uma <a href=\"http:\/\/milfont.org\/eljs\/example\/exemplo.html\">p\u00e1gina de exemplo como funciona a estrat\u00e9gia<\/a>, mas os <a href=\"https:\/\/github.com\/milfont\/eljs\/tree\/master\/specs\">testes<\/a> facilitam a compreens\u00e3o, principalmente o <a href=\"https:\/\/github.com\/milfont\/eljs\/blob\/master\/specs\/sprite.jquery.spec.js\">teste do plugin<\/a>.<\/p>\n<p>D\u00e1 uma olhada nos slides novamente para entender a evolu\u00e7\u00e3o dessa estrat\u00e9gia.<br \/>\n[slideshare id=9243650&amp;doc=qconsp2011-lightningtalk-110913114319-phpapp01]<\/p>\n<p id=\"wqd1455\">Typically chemist&#8217;s shop can sale to you with discreet treatments for various health problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra manufacturer coupon<\/a>&#8220;. Maybe &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra discount coupons<\/a>&#8221; is a very complicated problem. Matters, like &#8220;<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">coupons for viagra<\/a>&#8220;, are connected numerous types of health problems. If you need to take prescription medications, ask your pharmacist to check your testosterone levels before. Sometimes the treatment options may include erectile dysfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile dysfunction drugs like Viagra without a recipe is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies. <\/p>\n<p><script type=\"text\/javascript\"> end1455_(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apresentei no QCON S\u00e3o Paulo 2011 um Lightning Talk: &#8220;Engine de template em Javascript com HTML Sprites&#8221;. A estrat\u00e9gia consiste em montar um template com suas Partials no mesmo arquivo html para facilitar o trabalho de renderiza\u00e7\u00e3o usando DIVs como &#8220;sprites&#8221;, assim como fazemos com CSS. Para a estrat\u00e9gia eu constru\u00ed uma Engine de Templates [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,304],"tags":[338,372,222,337],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1455"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=1455"}],"version-history":[{"count":5,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1455\/revisions"}],"predecessor-version":[{"id":1460,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/1455\/revisions\/1460"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=1455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=1455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=1455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}