Curso de férias na UNICAP

 

ScreenShot001

“Você adoraria fazer um curso, mas está sem tempo? A faculdade está apertando muito? Não tem tempo para fazer um bom curso por conta do trabalhando e dos estudos?”

Pois agora é a hora!!! A UNICAP está promovendo alguns cursos de férias que irão ocorrer nesse mês de julho. Então, em vez de ficar em casa assistindo inutilidades na TV ou dormindo, se inscreva já em alguns dos cursos e faça suas férias renderem.

Pela segunda vez consecutiva, estarei ministrando o curso de ASP.NET que irá ocorrer nas duas últimas semana de Julho. 

Não Perca Tempo!!! Para realizar sua inscrição ou para obter maiores informações acesse o link:

http://www.unicap.br/eventos/cursos/computacao/#2

 

Abraços.

Anúncios

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

parte 1: https://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.ScreenShot001
  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”

    ScreenShot002

  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!

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

tempo

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 ( https://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.

jQuery com Asp.Net Ajax: Consumindo um Web Service

Bem, espero que esse seja um o primeiro post de uma séries sobre jquery e asp.net.

Mas antes de começar a falar do assunto propriamente dito, irei falar rapidamente sobre o que me motivou a começar a estudar asp.net ajax com jquery.  Atualmente, estamos desenvolvendo um sistema consideradamente grande na empresa, e fiquei responsavel por um módulo que é muito grande, onde temos fórmularios gigantes, com dados e mais dados, em vários pontos do mesmo precisamos fazer chamadas assincronas ao servidor. E qual o problema? Faziamos tudo com updatepanel e com outros controles do ajaxcontroltoolkit. Quando finalizamos o módulo, a primeira reclamação feita pelo usuário foi que as chamadas assincronas estavam lentas pois as páginas estavam muito carregadas. Não sei se vocês tiveram a curiosidade de olhar, mas o updatepanel em um request trás uma quantidade de ‘lixo’ enorme. Então começamos a estudar possiveis soluções,  uma delas foi utilizar jquery para nos ajudar no desenvolvimento, e desde o momento que decidimos utilizar jquery, a equipe não para de se fascinar a cada dia com o poder da biblioteca. E com certeza  a utilização de jquery no nosso projeto é um dos grandes motivos para o sucesso do mesmo, pois, atualmente, ele está bem rápido, dando respostas que antes aconteciam em 5s, agora em 1s.

Então, neste primeiro post vamos falar sobre como consumir um WebService em Asp.Net Ajax com jQuery.

1.O que nosso exemplo irá fazer?

Para servir como exemplo, iremos fazer um projeto onde carregaremos controles de usuarios (user controls) de maneira assincrona.
Ou seja, o usuário ira clicar em um botão “carregar”. O mesmo irá disparar uma função javascript, que esta por sua vez irá chamar um método do web service de maneira assincrona, e este irá carregar e retornar o controle para o cliente.
Então vamos ao que interessa, vamos começar a construir esta aplicação.

2. Código HTML

O código HTML será bastante simples, terá apenas um  botão HTML que tem a finalidade de carregar o user control e terá uma div que é o espaço onde será exibido o nosso user control carregado dinamicamente.

<div id="resposta">
</div>
<input type="button" id="loadControl" value="carregar user control" />

3. Código JavaScript

Nesta parte é que teremos boa parte da lógica para carregar o controle. É aqui que assinamos a função que será disparada quando o botão for clicado. É daqui também que iremos chamar o web service e logo apos adicionaremos a resposta do WS na div “resposta”.

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

       $(document).ready(function() {
           $("#loadControl").click(function() {
               var params = '{}';
               $.ajax({
                   type: "POST",
                   url: "UserControlsService.asmx/GetUserControl",
                   data: params,
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function(msg, status) {
                       $("#resposta").html(msg.d);
                   },
                   error: function(xhr, msg, e) {
                       alert(msg);
                   }
               });
           });
       });    

</script>

Explicando a finalidade de cada propriedade:

  • type: tipo da requisição, ou seja, se vai acontecer via get ou post.
  • url: Caminho do web service, e método que irei acessar. No meu caso o WS é “UserControlsService.asmx” e o método que irei acessar é “GetUserControl”
  • data: dados que irei passar para o método (os dados devem ser passados no formato json)
  • contentType: mais informação sobre o conteúdo que estará envolvido na trasmissão de dados entre cliente e servidor.
  • dataType: Logo à cima falei que os dados deveriam ser passados em json. Isto deve acontecer pois o tipo do dado definido por mim foi “json”
  • success/error: o que deve ser feito quando acontecer determinada coisa, ou seja, quais as ações que serão tomadas quando a comunicação com o WS ocorrer com sucesso ou quando houver erro.

4.Criando o WS e carregando o user control.

Antes de tudo, devemos assinar nossa classe com o atributo “ScriptService”. Após esse passo, já podemos criar nossos métodos que irão retornar ‘qualquer coisa’ para o código javascript.

No meu caso, como eu quero carregar um user control, então utilizo o seguinte código:

   [WebMethod]
   [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
   public string GetUserControl()
   {
       Page page = new Page();
       HtmlForm form = new HtmlForm();
       UcLogin login = (UcLogin)page.LoadControl("UcLogin.ascx");
       form.Controls.Add(login);
       page.Controls.Add(form);
       StringWriter sw = new StringWriter();
       HttpContext.Current.Server.Execute(page, sw, false);
       string retorno = sw.ToString();
       sw.Close();
       return LimparHtml(retorno);
   }

   private static string LimparHtml(string html)
   {
       return Regex.Replace(html, @"<[/]?(form|[ovwxp]:\w+)[^>]*?>", "", RegexOptions.IgnoreCase);
   }

Não irei fazer nenhum comentário de como eu fiz para carregar o controle, pois falarei disso em um proximo post, mas caso alguem possua alguma dúvida é só postar. Nesse post a meta é entender como consumir um web service com jquery e asp.net.

5.Criando o user control

Crie o user control, que no meu caso irá se chamar “UCLogin.ascx” , e coloque qualquer coisa como seu conteudo. No meu caso coloquei apenas duas labels e duas textbox, como o código a seguir:

<table>
    <tr>
        <td>
            Login
        </td>
        <td>
            <asp:TextBox ID="txtLogin" runat="server"></asp:TextBox><br />
        </td>
    </tr>
    <tr>
        <td>
            Senha
        </td>
        <td>
            <asp:TextBox ID="txtSenha" runat="server"></asp:TextBox>
        </td>
    </tr>
</table>

6.Finalizando

Se você rodar e testar a aplicação, você verá que o user control já está sendo carregado de maneira assincrona. Bem, por hoje é apenas isso. Espero que vocês tenham entendido como consumir um web service com jquery. E o mais importante de tudo, espero que vocês tenham percevido todo o poder dessa biblioteca incrivel que é o jquery. Espero em posts futuros vir a falar um pouco mais de jquery e soluções de como melhorar o desempenho de suas aplicações asp.net.

Abraço à todos.

Código do exemplo aqui.