Se você já está usando o Dojo ou começou com seus testes, já deve ter percebido o quão pesado um simples formulário pode ser. Se você utilizar uns três ou quatro tipos diferentes de campos no form, o dojo facilmente realizará uns 20 request de arquivos em javascript.
Isso passa a ser um problema, pois a cada vez que você carregar a mesma tela, a biblioteca irá requisitar os mesmos arquivos novamente. Para resolver isso o dojo conta com uma funcionalidade chamada “Layer”, com ela, você pode empacotar alguns módulos em apenas um arquivo javascript, depois disso é só incluir esse script na sua página e pronto ^^ . O dojo, por ser extremamente modularizado, continuará requisitando os arquivos que não estão nesse pacote, mas daí o número de request caí para uns 5. Em uns testes meus, eu consegui sair de 64 request para apenas 18 (e desses 18, três eram de dados json).
Como Utilizar
Vamos precisar de apenas 3 passos.
- Baixar os fontes do Dojo toolkit. Lembre-se de pegar os pacotes que terminar com “-src”
- Configurar um arquivo de profile e utilizá-lo para o buildscript empacotar seus dados
- Adicionar a chamada da layer no seu layout do Zend Framework
Passo 1:
Espero que já tenha sido resolvido nas linhas acima
Passo 2:
Após descompactar os fontes do Dojo Toolkit, entre no diretório:
dojo-release-1.2.1-src\util\buildscripts\profiles
e crie um arquivo chamado exemplo.profile.js com o seguinte conteúdo:
dependencies ={
layers: [
{
name: "../dojo/exemplo.js",
layerDependencies: [
],
dependencies: [
"dojo.i18n",
"dijit.form.FilteringSelect",
"dijit.form.ValidationTextbox",
"dojo.data.ItemFileReadStore",
"dijit.form.NumberSpinner",
"dijit.form.CurrencyTextbox",
"dijit.form.Textarea",
"dijit.form.Button",
"dijit.form.Form",
"dojo.data.ItemFileReadStore",
]
}
],
prefixes: [
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ]
]
};
A var “name” indica aonde o arquivo empacotado será criado. Em “dependencies” você irá definir todos os módulos que gostaria de empacotar. Com esse que listei, cheguei no resultado que comentei no começo do post. Em “prefixes“, você define o caminho dos diretórios das API que irá utilizar (esse caminho é o padrão que vem dentro do zip).
Depois de pronto, é só executar o script que irá gerar seu pacote. Detalhe, o buildscript utiliza java para esse fim, então certifique-se que o tenha instalado.
build.bat profile=exemplo action=release loader=”default” optimize=”shrinksafe” layerOptimize=”shrinksafe” copyTestes=”false” version=”1.2.1″
Após executar esse comando (demora um bocado, vai depender da sua máquina), será criada uma pasta chamada “Dojo” dentro do caminho: dojo-release-1.2.1-src\release
entre nela e copie o arquivo: dojo-release-1.2.1-src\release\dojo\dojo\exemplo.js para dentro da pasta dojo de sua aplicação. Você deve ter percebido que o script gerou toda a estrutura do dojo/dijit/dojox, você não precisa necessariamente utilizar essas pastas, pode utilizar a que já existe (se for o caso), sempre atento as versões.
Passo 3
Com o arquivo exemplo.js no local correto, está na hora de integrar ele no seu Zend Framework. Para isso, adicione a seguinte linha no seu load do dojo.
->addLayer('/js/dojo/exemplo.js')
seu código final deve ficar alguma coisa parecedida com isso:
$this->dojo()->setLocalPath('/js/dojo/dojo.js')
->addLayer('/js/dojo/exemplo.js')
->setDjConfig(array(
'parseOnLoad' => true,
'extraLocale' => array('pt-br', 'en-us')
))
->addStyleSheetModule('dijit.themes.tundra');
Simples não? três pequenos passo (que me deram uma certa dor de cabeça) e que pode melhorar e muito a sua aplicação. Sem problemas com requests, deixa mais ágil a substituição dos componentes e fica mais elegante também.
Qualquer problema/dica/sugestão, por favor, não deixem de comentar ^^
