Performance em Aplicações ASP.NET (Parte 2): Minimizando arquivos Javascript e CSS com YUI Compressor

parte 1: http://fpimentel88.wordpress.com/2009/01/20/analisando-e-melhorando-a-performance-em-aplicaes-aspnet-parte-1/

1. Introdução

Cada espaço em branco, cada caractere, cada quebra de linha de um arquivo Javascript e CSS ocupam espaços. Ou seja, quanto mais caracteres deste tipo seus arquivos tiverem, maiores serão seus tamanhos. Ou seja, a seguinte função…

   1: function yuiCompressor(){

   2:

   3:

   4:

   5:     var el = document.getElementById("idPessoa");

   6:

   7:

   8:

   9:     alert(el.id);

  10:

  11:

  12:

  13: }

…Ocupa mais espaço que esta outra:

   1: function yuiCompressor(){var el = document.getElementById("idPessoa");alert(el.id);}

Mais vocês concordam comigo que é inviável programar da segunda maneira, certo? Pois é, por isso que existe o YUI Compressor e tantos outros compressores de arquivos Javascript e CSS. Eles existem justamente para minimizar esses tipos de arquivos, tirando todo tipo de caractere desnecessário.

Então a idéia é bem simples. Trabalhamos normalmente com os arquivos, “sem” se preocupar com espaços e quebras de linhas. E antes de publicar o site, utilizarmos o YUI Compressor para minimizar os devidos arquivos.

2. Minimizando os Arquivos

Existem duas maneiras de utilizar o YUI Compressor:

1. Através do próprio site (http://www.refresh-sf.com/yui/)onde você informará a entrada e o sistema dará a saída. Tudo isso on-line.
2. A segunda maneira é através da linha de comando (É necessário ter JAVA instalado na máquina).

No nosso caso vamos minimizar os arquivos via linha de comando, pois em futuro um post irei mostrar como integrar o YUI Compressor com o Cruiser Control.

Para minimizar o nosso arquivo, vamos seguir os seguintes passos:

1. Baixe o YUI Compressor no seguinte link: http://www.julienlecomte.net/yuicompressor/
2. Crie um arquivo javascript (.js) e um css (.css) e salve em qualquer local na sua máquina (no meu caso:  “C:\Files\JS1.js e C:\Files\CSS1.css”).Os arquivos devem conter qualquer conteúdo. É apenas um teste.
3. Abra o prompt command e vá para o diretório onde se encontra a pasta build dentro de YUI Compressor.
4. Agora execute o seguinte comando para gerar uma saída de acordo com o arquivo de entrada.“java -jar yuicompressor-x.y.z.jar C:\Files\JS1.js -o C:\Files\JS1-min.js”

   

5. Pronto!!! Agora já temos nosso arquivo .js minimizado. Simples né? Agora, é só repetir a operação para os arquivos .css e .js que você tiver.

Abraço a todos!

Utilizando Css para alterar layout de páginas impressas

Você já precisou disponibilizar para o usuário a opção de imprimir alguma página? Mas queria que ele visse à página de um modo no browser e quando imprimisse, saisse de outro? Por exemplo, ele visse a tela toda enfeitada, toda colorida, etc. Mas quando fosse imprimir saisse tudo preto e branco.

Pois é, tive essa necessidade esses dias. E foi bastante simples de resolver.

A primeira coisa que tive que pesquisar foi como imprimir uma página em javascript. Isso foi o mais simples. Você pode fazer isto com o seguinte trecho de código:

window.print();

Só falta saber como mudar o estilo da página de acordo com o modo. Com CSS você consegue fazer isto de modo fácil e prático.

A tag HTML ‘<link>’, possui um atributo “media” que informa básicamente quando um arquivo CSS vai ser importados para aquela página dependendo do modo da página (default, impressão, etc). Por exemplo, você pode atribuir o valor “print” à propriedade  “media”, e isto quer dizer que na hora da impressão o css utilizado vai ser aquele arquivo ‘x’.

No meu caso precisei utilizar o seguinte trecho de código para resolver o meu problema:

<link media=”screen” href=”../../App_Themes/Impressao/Screen.css” rel=”stylesheet”
type=”text/css” />
<link media=”print” href=”../../App_Themes/Impressao/Impressao.css” rel=”stylesheet”
type=”text/css” />

Esse código informa básicamente que quando o usuário estiver visualizando a página no browser, ele irá utilizar o CSS “Screen.css”.  Mas quando a página for impressa, o css utilizado é “Impressao.css”.

Bem, este post foi bem curto, até porque estou em horário de almoço.

Abraços.

Analisando e melhorando a performance em aplicações ASP.NET (Parte 1)

1. Nova série de artigos

Estou atualmente envolvido em um projeto em um cliente da i9 (empresa em que trabalho – www.inoveinformatica.net), e o caso lá ERA bem crítico:  prazos apertados, falta de metodologia de desenvolvimento, falta de padrão de codificação, entre outras coisas. Então, atualmente estamos focando em dois grandes problemas:

1. Melhorar a performance do sistemas;
2. Melhoria nos processos de desenvolvimento;

Andei pensando, e decidi escrever uma nova série de artigos. Para ser sincero duas novas séries, uma para cada foco nosso nesse cliente. Ou seja, teremos uma série sobre a implementação de uma metodologia ágil e uma outra sobre a melhoria da performance em aplicações ASP.NET.

A semelhança dessas duas séries é que ambas vão ser passadas para vocês, caros leitores, baseadas em fatos reais, ou seja, irei postar de acordo com o que for acontecendo diariamente no ambiente de trabalho.

Então, quem sabe, depois de ler estes posts você não tome mais cuidado ao codificar ou ao tentar implementar uma metodologia, até para não cometer os mesmos erros que cometemos.

Hoje dou início oficialmente à série de artigos sobre performance em asp.net, onde iremos falar sobre muita coisa: desde ferramentas, à possíveis gargalos, soluções…

Como eu já postei um artigo hoje ( http://fpimentel88.wordpress.com/2009/01/20/aprendendo-c-parte-2-modelo-desconectado-de-acesso-ao-banco-de-dados/ ), irei ser breve nessa primeira parte. O foco nesse primeiro post será falar um pouco dos problemas que estamos passando no projeto, para só então nos posts posteriores falar sobre cada método que utilizamos.

2. Como tudo começou…

Antes eramos apenas 3 desenvolvedores trabalhando em um mesmo projeto. Tinhamos total controle sobre o sistema, tinhamos um padrão de codificação já que a equipe era pequena.

Mas o cliente começou à gostar dos nossos serviços e começou a perceber o que poderiam fazer com a tecnologia,  o quanto o software poderia ajudar na automação e/ou informatização nos processos internos da empresa.

Então a equipe começou a crescer. Mas como não havia um padrão formal de codificação, cada um codificava de seu modo, e fazia o que achava melhor.

O sistema cresceu bastante, mas com sérios problemas de desempenho, tendo páginas que demoram 17 segundos para serem carregadas ( \o/ ). Então, um de nossos focos é este: arrumar um modo de melhorar a performance em aplicações asp.net.

3.  Possíveis pontos críticos  em aplicações asp.net

- Todos os Scripts e CSSs adicionados na Master Page;

- Código mal codificado;

- Stored Procedures pouco performáticas;

- Chamadas desnecessárias ao banco;

- Utilização errada de Javascript;

- Utilização do UpdatePanel de maneira errada;

- ViewState muito pesado;

4. Finalizando

Em futuros posts iremos atacar, isoladamente, cada ponto destes. Então podem aguardar que muita novidade está por vir.

Criar Controles Dinamicamente Em CheckBoxList

Hoje dou inicio a uma seria de posts, onde irei mostrar soluções encontradas por mim ou colegas  em relação à problemas enfratados no corrido dia-a-dia.

Deixando desse “bla bla bla” e falando da parte boa da coisa…. Hoje precisei criar dinamicamente controles dentro de um checkboxlist de acordo com a opção selecionada pelo usuário. Sabe quando você tem uma lista enorme de opções e entre elas você tem aquele campo “outros”? Pois pronto, essa era a minha situação, havia uma lista enorme de itens que eram retornados do banco, e o mesmo trazia a opção outros no meio dos itens, e o requisito era que quando o usuário selecionasse outros, fosse mostrado do lado do checkbox uma textbox para o usuário digitar algo. Bem, se o “outros” fosse o ultimo da lista, não teria problema, pois provavelmente eu resolveria da maneira mais rapida, mas talvez não tao agradavel, que seria adicionar um textbox no final do checkboxlist e pronto. Era so ficar setando a visibilidade do mesmo. Mas este não era o caso… E agora?

Bem, a solução encontrada por mim foi desenvolvida em asp.net com jquery. Vamos lá:

 

1. A página .ASPX

<asp:CheckBoxList ID=”chkTimes” runat=”server”>
<asp:ListItem>Outros</asp:ListItem>
<asp:ListItem>Sport</asp:ListItem>
<asp:ListItem>Santa Cruz</asp:ListItem>
<asp:ListItem>Naútico</asp:ListItem>
</asp:CheckBoxList>

Obs: Na página .aspx tenho apenas a minha checkboxlist, com seus respectivos itens, e toda a lógica vai ser no código .js

 

2. Código JavaScript

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

//como o checkboxlist é reenderizado como uma tabela, preciso saber quando o evento de click dos seus //inputs internos forem desparados

$(”#<%= chkTimes.ClientID %> input”).click(function() {

if ($(this).is(”:checked”)) {

//o controle proximo ao input é a label com a descrição do checkbox selecionado

var label = $(this).next();

if (label.text().toLowerCase() == “outros”) {

label.after(”<input type=’text’ id=’txtOutros’ />”);

}

} else {

//procura na celula da tabela pelo textbox adicionado

$(this).parent().find(”#txtOutros”).remove();

}

});

});

Obs: Vale ressaltar que o checkboxlist é reenderizado como uma tabela por default. Por isso que sabemos que dentro de uma celula encontramos um input que é o checkbox e uma label que é a descrição do mesmo.

 

3. Finalizando…

Bem, deste modo o nosso controle já esta quase pronto. Ele já esta adicionando o textbox quando o usuário seleciona o mesmo, e removendo o mesmo quando a opção é desmarcada. Mas a pergunta é: Como pegar o que foi digitado em C#?  A resposta é até simples, apesar de ser dificil de ser imaginada. No meu caso eu utilizei um hiddenfield. Onde sempre que é digitado algum caraceter no textbox, é armazenado o valor do textbox no campo escondido. E no C# eu pego o valor que se encontra no hiddenfield. Então, fazendo algumas alterações no nosso código, ele ficara desta maneira:

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

//como o checkboxlist é reenderizado como uma tabela, preciso saber quando o evento de click dos seus inputs internos forem desparados

$(”#<%= chkTimes.ClientID %> input”).click(function() {

if ($(this).is(”:checked”)) {

//o controle proximo ao input é a label com a descrição do checkbox selecionado

var label = $(this).next();

if (label.text().toLowerCase() == “outros”) {

label.after(”<input type=’text’ id=’txtOutros’ />”);

$(”#txtOutros”).keyup(function() {

$(”#<%= hfOutros.ClientID %>”).attr(”value”, $(this).attr(”value”));

});

}

} else {

//procura na celula da tabela pelo textbox adicionado

$(this).parent().find(”#txtOutros”).remove();

$(”#<%= hfOutros.ClientID %>”).attr(”value”, “”);

}

});

});

</script>

<asp:HiddenField ID=”hfOutros” runat=”server” />

<asp:CheckBoxList ID=”chkTimes” runat=”server”>

<asp:ListItem>Outros</asp:ListItem>

<asp:ListItem>Sport</asp:ListItem>

<asp:ListItem>Santa Cruz</asp:ListItem>

<asp:ListItem>Naútico</asp:ListItem>

</asp:CheckBoxList>

 

Por hoje é só. Ficamos por aqui. E Espero que esse post tenha sido útil. Até a próxima e abraço à todos!!!