Engine de template em Javascript com estratégia de HTML Sprites

{ September 19th, 2011 }

Autor: cmilfont

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.

Posted in JavaScript, Jquery ~ 1 Comment

Problema de Entity Body incluso em HTTP DELETE Request

{ April 4th, 2011 }

Autor: cmilfont

Problema que detectei em algumas applicações que estamos desenvolvendo com Extjs+Jquery: Na máquina de entrega o request do tipo DELETE funcionava tranquilamente, na máquina de produção hospedada no Rackspace quebrava. Como a máquina de entrega estava dentro da nossa rede, suspeitei logo da conexão, firewall e essas coisas.

O @rponte me deu a dica desse post que ele encontrou com o mesmo tipo de problema. Nunca tinha percebido que a spec HTTP nem proibe e nem recomenda corpo em DELETE. Não faz muito sentido enviar corpo realmente em DELETE, mas até aí tudo bem.

Para completar, o Extjs já previa esse problema e o JsonWriter possui uma propriedade chamada “encodeDelete” para você explicitamente definir que não quer corpo em DELETE, por default já vem assim.

No console do firebug eu utilizava o $.ajax e o Ext.Ajax diretamente com a mesma url para enviar DELETE e funcionava, mas na aplicação não funcionava. Conversando com o pessoal da rede eles me disseram que trocaram o firewall recentemente e observando o log a chamada sequer passava por lá, ou seja, provavelmente ele já rejeita qualquer conexão DELETE com body.

Fui analizar o código do Extjs e ele enviava um body, a diferença é que era vazio, mas ia. Fiz um hack para destruir qualquer parametro quando a conexão fosse para o DELETE e consertou, como pode ver no código abaixo:

Link caso não consiga ver no seu reader.

Posted in Ajax, Ext, JavaScript, Jquery, REST, Web Development, XMLHttpRequest ~ No Comments

JQuery e conflitos

{ June 28th, 2010 }

Autor: cmilfont

Creio que todo mundo já conheça a função noConflict do JQuery para evitar conflitos com outros frameworks que utilizam a variável dóllar ($). JQuery é sem dúvidas o melhor framework javascript para manipulação DOM e não há motivos e nem desculpas para não o usar, principalmente com essa resolução de conflitos.

Tenho refatorado alguns códigos javascript e o pessoal tem resolvido o conflito de forma confusa e misturando código de dois framework, inclusive código DOM nativo. A documentação recomenda, como uma opção, atribuir o resultado da função noConflict a uma variável e ela será o seu objeto JQuery.

Imagina que você tem Prototype e Jquery na mesma aplicação como no codigo abaixo:

$J = jQuery.noConflict();

//codigo prototype
$("id_de_algum_elemento").hide();
//codigo jquery em seguida
$J("#id_do_elemento").load("caminho.html");

A legibilidade vai ser horrível para manutenção desse código porque você vai ficar com códigos misturados com sintaxes e estilos diferentes, a medida que isso vai crescendo a manutenção vai ficando impossível.

Minha sugestão é utilizarem Closure e Currying para resolver o conflito, isolar o código e deixar bem mais claro. Se ler a documentação lá do noConflict tem exemplo como o código abaixo.

/* essa chamada evita o conflito com outros
   frameworks que usam dollar ($) */
jQuery.noConflict();

(function($) {
   // Seu código jquery vai aqui
  $("#id_do_elemento").load("caminho.html");
})(jQuery);

//codigo prototype
$("id_de_algum_elemento").hide();
//...

Se você preferir deixar claro a diferença entre os frameworks pode continuar a usar outra variável no lugar do $, mas a idéia é isolar o código de cada framework.

Posted in Frameworks, JavaScript, Jquery, Melhores práticas, Web Development ~ No Comments