![\"javascript-logo\"](\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2014\/04\/javascript-logo.png\"){kind=logo}
Este post inicia uma s\u00e9rie na qual vou expor t\u00e9cnicas que visam aumentar a manutenibilidade de c\u00f3digo Javascript. Convenhamos: \u00e9 uma linguagem de programa\u00e7\u00e3o legal, por\u00e9m muitas vezes o hype que a envolve nos impede de ver seus aspectos negativos. Neste post tratarei de uma das cicatrizes da linguagem que \u00e9 a dificuldade que enfrentamos na modulariza\u00e7\u00e3o do c\u00f3digo.<\/p>\n
Se voc\u00ea tem a sorte de trabalhar com Grails tem \u00e0 sua disposi\u00e7\u00e3o uma solu\u00e7\u00e3o maravilhosa que \u00e9 o plugin resources<\/a>\u00a0que nos permite definir “m\u00f3dulos Javascript”. Infelizmente do lado Spring da cerca n\u00e3o temos algo t\u00e3o popular. O que \u00e9 um m\u00f3dulo Javascript?<\/p>\n Uma unidade de c\u00f3digo que funciona em conjunto.<\/p><\/blockquote>\n Muitas vezes esta unidade n\u00e3o \u00e9 apenas um arquivo, mas v\u00e1rios, e \u00e9 neste ponto que o problema come\u00e7a a se manifestar. Imagine um m\u00f3dulo composto por dois arquivos:\u00a0biblioteca.js<\/em> e\u00a0biblioteca2.js<\/em>. Sua equipe pode ter achado interessante dividi-lo em dois arquivos para paralelizar o esfor\u00e7o e com isto evitar todos aqueles inc\u00f4modos relacionados ao merge de arquivos. Nesta situa\u00e7\u00e3o, toda vez que voc\u00ea precisa usar este m\u00f3dulo, ir\u00e1 inserir em suas p\u00e1ginas c\u00f3digo similar ao exposto a seguir:<\/p>\n Ou ent\u00e3o voc\u00ea poderia ter algum script que unisse os dois arquivos. O problema \u00e9 que seria necess\u00e1rio modificar o seu processo de build e tamb\u00e9m fornecer garantias de que o arquivo gerado fosse sempre o mais atualizado poss\u00edvel (n\u00e3o \u00e9 uma solu\u00e7\u00e3o t\u00e3\u00e3o bacana assim).<\/p>\n Agora, voltemos ao nosso exemplo. Imagine que este nosso m\u00f3dulo dependa do jQuery. Neste caso ter\u00edamos sempre de escrever o seguinte c\u00f3digo em nossas p\u00e1ginas:<\/p>\n Ainda pior: imagine que a ordem de carregamento dos arquivos\u00a0biblioteca.js<\/em> e\u00a0biblioteca2.js<\/em> seja importante. Agora sua equipe precisa ser informada a respeito. Se for uma aplica\u00e7\u00e3o de uma \u00fanica p\u00e1gina, n\u00e3o ser\u00e1 l\u00e1 um grande problema, mas imagine uma aplica\u00e7\u00e3o maior, com mais de um template, etc. A coisa come\u00e7a a se complicar.<\/p>\n A imagem a seguir exp\u00f5e bem a situa\u00e7\u00e3o do nosso projeto. Temos uma biblioteca composta por dois arquivos que depende de uma terceira:<\/p>\n N\u00e3o seria bacana se houvesse uma ferramenta que nos permitisse resolver os problemas a seguir de uma forma simples?<\/p>\n Jawr<\/a> \u00e9 uma ferramenta que tem como objetivo resolver os tr\u00eas problemas que expus acima e mais alguns. Neste post irei tratar de uma parte bem pequena deste projeto: aquela que lida com Javascript. A grosso modo Jawr \u00e9 um servlet que iremos inserir em nosso projeto fict\u00edcio. Este servlet organizar\u00e1 nossos m\u00f3dulos Javascript em bundles<\/strong>.<\/p>\n O que \u00e9 um bundle<\/strong>? \u00c9 um m\u00f3dulo, tal como expus acima. Mais do que isto, um bundle alguns atributos fundamentais do nosso m\u00f3dulo:<\/p>\n Voltando ao nosso projeto percebe-se que h\u00e1 dois bundles: biblioteca e jQuery, que podemos representar gr\u00e1ficamente tal como na imagem a seguir:<\/p>\n Poder\u00edamos pensar em um bundle \u00fanico composto pelos nossos arquivos da biblioteca e o do jQuery. O problema \u00e9 que sabemos que jQuery ser\u00e1 usado por diversos outros pontos da nossa aplica\u00e7\u00e3o: sendo assim \u00e9 interessante que modularizemos esta parte a fim de que seja reaproveitada em outras partes do projeto.<\/p>\n Nosso projeto \u00e9 baseado em Maven. Sendo assim, para incluirmos o Jawr basta adicionar a depend\u00eancia no arquivo pom.xml<\/strong> tal como no exemplo a seguir:<\/p>\n Como disse logo acima, Jawr \u00e9 essencialmente um servlet. Sendo assim temos tamb\u00e9m de alterar o arquivo web.xml<\/strong> para que fique similar ao exposto a seguir:<\/p>\n Preste muita aten\u00e7\u00e3o no mapeamento de URL.<\/strong> Na documenta\u00e7\u00e3o oficial do Jawr este \u00e9 configurado para que lide com todos os recursos que terminem com a extens\u00e3o .js. O problema com esta abordagem \u00e9 que muitas vezes n\u00e3o queremos que todos os nossos arquivos Javascript sejam carregados como bundles. Talvez voc\u00ea queira ir adotando aos poucos a ferramenta em seu projeto (esta \u00e9 a principal raz\u00e3o que vejo). Em nosso caso, Jawr s\u00f3 ir\u00e1 lidar com aqueles recursos Javascript que se encontrem na url \/bundle\/js\/*. Nota importante: repare no parametro de inicializa\u00e7\u00e3o mapping<\/strong>. Se for usar uma configura\u00e7\u00e3o como esta, este obrigat\u00f3riamente deve estar definido.<\/p>\n No mapeamento do servlet foi inclu\u00eddo um par\u00e2metro chamado configLocation<\/strong>. Em nosso projeto baseado em Maven este arquivo se encontra em \/src\/main\/resources\/jawrJavascript.properties. \u00c9 neste arquivo que iremos definir todos os nossos bundles. Abaixo est\u00e1 um exemplo deste arquivo:<\/p>\n # Altere aqui caso esteja no seu ambiente de desenvolvimento # Devemos enviar os bundles compactados? # De quantos em quantos segundos o servlet deve verificar se as configuracoes foram # Primeiro bundle de exemplo: jQuery # Incluindo uma dependencia Um bundle Javascript \u00e9 definido no arquivo com o prefixo jawr.js.bundle.[identificador do bundle]. A primeira linha, que termina com .id<\/strong> define como ser\u00e1 a URL que define o nosso bundle. O bundle jQuery, por exemplo, sempre ser\u00e1 carregado quando a URL \/bundle\/js\/jQuery.js for acionada, enquanto o bundle biblioteca, pela URL \/bundle\/js\/biblioteca.js.<\/p>\n Voltemos nossa aten\u00e7\u00e3o para o bundle biblioteca<\/strong>. A segunda linha da sua defini\u00e7\u00e3o (mappings), define quais os arquivos que o comp\u00f5e e a ordem na qual devem ser carregados. A terceira linha define quais as suas depend\u00eancias. Neste caso, apenas uma: o bundle jquery.<\/p>\n Tendo feito isto temos todos os bundles em nosso projeto prontos para serem usados. O pr\u00f3ximo passo \u00e9 trabalhar no arquivo JSP.<\/p>\n O projeto Jawr vem com uma biblioteca de tags bastante \u00fatil. Abaixo podemos ver um exemplo de sua aplica\u00e7\u00e3o:<\/p>\n <%– A declara\u00e7\u00e3o da biblioteca de tags –%> <%– Carregando o bundle biblioteca –%> E o que ocorre quando carrego a p\u00e1gina? Obtenho o resultado a seguir:<\/p>\n Primeiro ser\u00e1 inserida a depend\u00eancia do bundle biblioteca e, em seguida, o c\u00f3digo fonte do bundle biblioteca. Repare nas URLs: o Jawr ir\u00e1 autom\u00e1ticamente cachear os recursos Javascript. E sabem o que \u00e9 mais legal? Ele tamb\u00e9m envia o Javascript comprimido (se o modo de depura\u00e7\u00e3o estiver desativado (veja as notas no arquivo que expus acima)). E n\u00e3o \u00e9 s\u00f3 o conte\u00fado Javascript comprimido. Os dois arquivos que comp\u00f5em o m\u00f3dulo biblioteca tamb\u00e9m s\u00e3o mesclados em um s\u00f3, diminuindo assim o n\u00famero de requisi\u00e7\u00f5es necess\u00e1rias. Simples assim. :)<\/p>\n Nese post apresentei uma pequena parte do projeto Jawr. H\u00e1 mais neste servlet, que tamb\u00e9m pode ser usado para gerenciar recursos CSS e imagens. \u00c9 importante salienar que a documenta\u00e7\u00e3o do projeto \u00e9 excelente<\/strong>: bem escrita e f\u00e1cil de ser consultada. <\/p>\n Claro que a quest\u00e3o da modulariza\u00e7\u00e3o n\u00e3o termina aqui. Esta \u00e9 apenas uma das solu\u00e7\u00f5es poss\u00edveis. Recentemente topei com um ebook online (e gratuito) chamado Writing Modular JavaScript with AMD, CommonJS & ES Harmony<\/a> que trata da quest\u00e3o de uma forma muito mais profunda. Entra a\u00ed tamb\u00e9m o modo como escrevemos JavaScript (que n\u00e3o tratei neste post) e alguns outros pontos sobre os quais pretendo escrever mais a respeito em um futuro pr\u00f3ximo.<\/p>\n\r\n\r\n<script type="text\/javascript" src="\/resources\/js\/biblioteca.js"><\/script>\r\n<script type="text\/javascript" src="\/resources\/js\/biblioteca2.js"><\/script>\r\n\r\n<\/pre>\n
\r\n\r\n<!-- jQuery sempre ir\u00e1 ser carregado primeiro -->\r\n<script type="text\/javascript" src="\/resources\/js\/jQuery.js"><\/script>\r\n<script type="text\/javascript" src="\/resources\/js\/biblioteca.js"><\/script>\r\n<\/span><script type="text\/javascript" src="\/resources\/js\/biblioteca2.js"><\/script>\r\n\r\n<\/pre>\n
![\"jawr_dependencias\"](\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2014\/04\/jawr_dependencias-263x300.png\")
<\/p>\n\n
Jawr entra em cena<\/h2>\n
![\"logoJawr\"](\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2014\/04\/logoJawr-300x52.png\")
<\/a><\/p>\n\n
![\"Nossos](\"https:\/\/devkico.itexto.com.br\/wp-content\/uploads\/2014\/04\/bundles_projeto-300x114.png\")
Incluindo Jawr em nosso projeto<\/h3>\n
\r\n<dependency>\r\n <groupId>net.jawr<\/groupId>\r\n <artifactId>jawr<\/artifactId>\r\n <version>3.3.3<\/version>\r\n<\/dependency>\r\n<\/pre>\n
\r\n<!-- Servlet para lidar com Javascript -->\r\n<servlet>\r\n <servlet-name>JavascriptServlet<\/servlet-name>\r\n <servlet-class>net.jawr.web.servlet.JawrServlet<\/servlet-class>\r\n\r\n\t\t<!-- Aonde se encontra o arquivo de configuracao -->\r\n <init-param>\r\n <param-name>configLocation<\/param-name>\r\n <param-value>\/jawrJavascript.properties<\/param-value>\r\n <\/init-param>\r\n <init-param>\r\n <param-name>mapping<\/param-name>\r\n <param-value>\/bundle\/js\/<\/param-value>\r\n <\/init-param>\r\n <load-on-startup>1<\/load-on-startup>\r\n<\/servlet>\r\n<!-- O mapeamento de URL -->\t\r\n<servlet-mapping>\r\n <servlet-name>JavascriptServlet<\/servlet-name>\r\n <url-pattern>\/bundle\/js\/*<\/url-pattern>\r\n<\/servlet-mapping>\r\n<\/pre>\n
Configurando os bundles<\/h3>\n
\njawr.debug.on=false<\/p>\n
\njawr.gzip.on=true<\/p>\n
\n# alteradas. Extreammente util em tempo de desenvolvimento!
\njawr.config.reload.interval=30<\/p>\n
\n# O identificador do bundle sempre \u00e9 o que aparece antes do ‘.id’
\n# neste caso, \u00e9 jquery
\njawr.js.bundle.jquery.id=\/bundle\/js\/jQuery.js
\njawr.js.bundle.jquery.mappings=\/resources\/js\/jquery-2.1.0.min.js<\/p>\n
\njawr.js.bundle.biblioteca.id=\/bundle\/js\/biblioteca.js
\njawr.js.bundle.biblioteca.mappings=\/resources\/js\/biblioteca.js, \/resources\/js\/biblioteca2.js
\njawr.js.bundle.biblioteca.dependencies=jquery<\/p>\nAlterando o arquivo JSP<\/h3>\n
\n<%@ taglib uri="http:\/\/jawr.net\/tags" prefix="jwr" %><\/p>\n
\n<jwr:script src="\/bundle\/js\/biblioteca.js"\/><\/p>\n\r\n<script type="text\/javascript" src="\/itexto\/bundle\/js\/gzip_N1063700552\/bundle\/js\/jQuery.js" ><\/script>\r\n<script type="text\/javascript" src="\/itexto\/bundle\/js\/gzip_N745101183\/bundle\/js\/biblioteca.js" ><\/script>\r\n<\/pre>\n
Concluindo<\/h2>\n