Técnicas e recursos para desenvolvimento Web em cenários de grande escalaWEB309<br />Alexandre Tarifa<br />Cleber Dantas<b...
Introdução<br />Cenário de aplicações Web para Internet comparados com sistemas internos exigem técnicas ou práticas que n...
Front-End<br />Steve Sounders – “80% dos problemas de performance de aplicações Web estão no Front-end”<br />YSlow – Exten...
Regra 1: Minimize HTTP Requests<br />Regra 2: Use CDN´s (Content Delivery Network)<br />Regra 3: Use “Expires Header“<br /...
demo<br />Front-end (sprite, paralelismo de downloads e minify js)<br />
Ajax<br />Otimização do trafego de dados entre servidor e cliente (navegador)<br />Trafegar a menor quantidade possível de...
demo<br />AJAX (jQuery, JSON e jQuery Templates)<br />
Cache<br />A melhor solução de performance é fazer com que o seu código não seja executado o tempo todo!<br />Tipos de Cac...
demo<br />Cache (outputcache, cache profile, cache partial, memCached, IIS e helper de atualização de arquivosestáticos)<b...
memCached<br />www.memcached.org<br />Sistema distribuído de altíssima performance para armazenamento de informações em ca...
Infra - CDN<br />Content Delivery Network<br />Rede de distribuição de conteúdo<br />Infraestrutura para ENTREGA do conteú...
CDN - Exemplo<br />Seu site<br />http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js<br />
demo<br />CDN – proxy entrega de conteúdo (proxy reverso – nginx e Windows)<br />
App real time: Timeline Twitter<br />
App real time: Tempo Real Globo<br />
Web Sockets<br />Recurso do HTML 5 para aplicações Web Real Time<br />Conexão direta e bidirecional com o servidor web<br ...
LongPolling<br />Forma simples de maximizar o uso de uma requisição HTTP<br />Suporte de todos os browsers (XHR)<br />Cone...
demo<br />Aplicações real time – chat<br />
Fora da caixa<br />ASP.NET é compatível com diversos projetos open source<br />Microsoft mantém o site www.codeplex.com co...
Fora da caixa – exemplos<br />Banco de dados NoSql<br />http://cassandraemon.codeplex.com/<br />http://mongodbstudio.codep...
Fora da caixa – NuGet<br />www.nuget.org<br />Distribuição de projetos com fácil implementação no seu projeto (Visual Stud...
demo<br />NodeJS – Windows<br />
IIS 7 e 7.5<br />Diversos recursos podem ser implementados diretamente pelo IIS facilitando a implementação e o gerenciame...
demo<br />IIS – (gzipe apagandoincêndio)<br />
Dicas rápidas<br />Modo de pipeline IIS<br />Clássico<br />Integrado<br />
Dicas rápidas<br />Debug = true em produção!!! NUNCA!<br />A compilação de páginas ASP.NET leva mais tempo (otimizações de...
Dicas rápidas<br />WebForms<br />Só deixe viewstatehabilitato em locais que realmente você precisa! Por default o valor é ...
Dicas rápidas<br />Bibliotecas prontas<br />Cuidado com controles e plugins prontos Jquery, Ajax control toolkit e afins! ...
Conteúdo Relacionado<br />Slide Obrigatorio<br />Palestrantes, Por favor listarconteudosexistentesdentro das paginas dos p...
Recursos<br />Recursos para IT Pros<br />http://technet.microsoft.com/pt-br<br />Recursos para Desenvolvedores<br />http:/...
Obrigatorio<br />Nãoesqueça de preenchersuaavaliação online<br />www.teched.com.br/avaliacao<br />
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Upcoming SlideShare
Loading in …5
×

Técnicas e recursos para desenvolvimento Web em cenários de grande escala

3,927 views
3,852 views

Published on

Palestra com Cleber Dantas no evento TechEd 2011 Brasil

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • no escriban mierdas de trabajozZ ke esta mal todo idiotaz...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
3,927
On SlideShare
0
From Embeds
0
Number of Embeds
1,725
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • TEMPO PREVISTO: 10 MIN
  • CSS SpriteFFSprite meInstalaçãohttp://www.dietaesaude.com.br/alimentosGerar sprite e mostrar css modificadaParalelismoLimite de download paraleloIE7 e anteriores e algumas versões do FF suportam apenas 2 downloads paralelos por subdomínio – Keep aliveIE8 suporta 6 downloads em paralelo – Keep aliveAlgumas versões do FF suportam 8 downloads, IE7 e anteriores suportam 4 – Sem keep alivenetwork.http.max- - Mostrar no FFMostrar site do Minha Vida e explicar os cookies2 MINUTOSMinifyExplicar YUI CompressorMostrar DLLsArquivo de buildConfiguração no post build (propriedades)Compilar e mostrar ganhos gerais
  • AjaxMostrar site do linha de códigopelo FFMostrar site do techedpelo FFMostrar site do DS, busca de alimentoExemplo 1, ajax, json e jquery templatesDemo.js esta o código do jquery templateSnippet do template Jqueryna toolbox@using (Ajax.BeginForm(&quot;Comentar&quot;, new AjaxOptions { OnSuccess = &quot;AtualizaDados&quot;, HttpMethod = &quot;Post&quot; })){}Mostrarresultado no FFExemplo 2Math.js scriptArrastarcódigoMostrarcarregamento no FFExemplo 3Mostrarcarregamento normal do Iframe – FFMostrar com modificação
  • Client MemCached - http://code.google.com/p/memcached/wiki/ClientsClient CacheExplicar a diferença entre os headers Expires e Cache-Control - Mostar no FF – Yahoo.comConfigurar na pasta Scripts no IIS o tempo de cache de 10 min, depois mostrar o resultado para o público.Mostrar o Helper de atualização de conteúdo estático + url rewrite. (explicar devagar)Criar o HelperColocar o namespace dentro do web.config da pasta de viewsExplicar que só funciona quando o modo debug não esta ativo.Trocar as chamadas (puxar da toolbox)Executar mostrar que o caminho não existe, logo ta certo.Habilitar a regra de rewrite e mostrar o resultado.
  • Técnicas e recursos para desenvolvimento Web em cenários de grande escala

    1. 1.
    2. 2. Técnicas e recursos para desenvolvimento Web em cenários de grande escalaWEB309<br />Alexandre Tarifa<br />Cleber Dantas<br />
    3. 3. Introdução<br />Cenário de aplicações Web para Internet comparados com sistemas internos exigem técnicas ou práticas que normalmente são ignorados ou “desnecessárias”<br />O ambiente de distribuição é praticamente infinito (navegadores, tipos de conexão, dispositivos, localização, etc) <br />
    4. 4. Front-End<br />Steve Sounders – “80% dos problemas de performance de aplicações Web estão no Front-end”<br />YSlow – Extensão do Firefox para análise de performance nas páginas – baseado nas 14 regras do livro High Performance Web Sites (existem outros templates) <br />
    5. 5. Regra 1: Minimize HTTP Requests<br />Regra 2: Use CDN´s (Content Delivery Network)<br />Regra 3: Use “Expires Header“<br />Regra 4: Utilize Gzip<br />Regra 5: Mova CSS para o topo<br />Regra 6: Mova scripts para baixo<br />Regra 7: Evite expressões em CSS<br />Regra 8: ‘Inlined’ JavaScript e CSS<br />Regra 9: Minimize Domínios<br />Regra 10: Minimize JavaScript<br />Regra 11: Evite Redirecionamentos<br />Regra 12: Remova Scritps Duplicados<br />Regra 13: Desabilite ETags<br />Regra 14: Cache AJAX<br />Front-End<br />Regra 1: Minimize HTTP Requests<br />Regra 2: Use CDN´s (Content Delivery Network)<br />Regra 3: Use “Expires Header“<br />Regra 4: Utilize Gzip<br />Regra 5: Mova CSS para o topo<br />Regra 6: Mova scripts para baixo<br />Regra 7: Evite expressões em CSS<br />Regra 8: ‘Inlined’ JavaScript e CSS<br />Regra 9: Minimize Domínios<br />Regra 10: Minimize JavaScript<br />Regra 11: Evite Redirecionamentos<br />Regra 12: Remova Scritps Duplicados<br />Regra 13: Desabilite ETags<br />Regra 14: Cache AJAX<br />
    6. 6. demo<br />Front-end (sprite, paralelismo de downloads e minify js)<br />
    7. 7. Ajax<br />Otimização do trafego de dados entre servidor e cliente (navegador)<br />Trafegar a menor quantidade possível de dados nas requisições<br />jQuery e JSON (JavaScript Object Notation) torna isso muito fácil<br />jQuery Templates (templates de HTML pré carregados nas páginas)<br />
    8. 8. demo<br />AJAX (jQuery, JSON e jQuery Templates)<br />
    9. 9. Cache<br />A melhor solução de performance é fazer com que o seu código não seja executado o tempo todo!<br />Tipos de Cache<br />Cliente – Headers de expiração (Expires e Cache-Control)<br />Servidor – OutputCache (ASP.NET) e Cache de Objetos (ASP.NET ou memCached)<br />
    10. 10. demo<br />Cache (outputcache, cache profile, cache partial, memCached, IIS e helper de atualização de arquivosestáticos)<br />
    11. 11. memCached<br />www.memcached.org<br />Sistema distribuído de altíssima performance para armazenamento de informações em cache de objetos em MEMÓRIA RAM.<br />Reduz drasticamente a carga de processamento de servidores de aplicação, banco de dados, etc.<br />Criado pela Danga (livejournal.com)<br />Utilizado por facebook (805 servidores), twitter, linkedin, wikipedia, minha vida, etc<br />Fácil de gerenciar, adicionar novas máquinas e instâncias<br />
    12. 12.
    13. 13. Infra - CDN<br />Content Delivery Network<br />Rede de distribuição de conteúdo<br />Infraestrutura para ENTREGA do conteúdo<br />Própria<br />Terceirizada (Akamai, Ananke, Azion, UOL, etc)<br />Pública (Microsoft, Google, etc)<br />Distribuição de bibliotecas públicas (exemplo jQuery)<br />http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js<br />
    14. 14. CDN - Exemplo<br />Seu site<br />http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js<br />
    15. 15. demo<br />CDN – proxy entrega de conteúdo (proxy reverso – nginx e Windows)<br />
    16. 16. App real time: Timeline Twitter<br />
    17. 17. App real time: Tempo Real Globo<br />
    18. 18. Web Sockets<br />Recurso do HTML 5 para aplicações Web Real Time<br />Conexão direta e bidirecional com o servidor web<br />Atualização instantânea no cliente (navegadores)<br />
    19. 19. LongPolling<br />Forma simples de maximizar o uso de uma requisição HTTP<br />Suporte de todos os browsers (XHR)<br />Conexão longa e “persistente”<br />
    20. 20. demo<br />Aplicações real time – chat<br />
    21. 21. Fora da caixa<br />ASP.NET é compatível com diversos projetos open source<br />Microsoft mantém o site www.codeplex.com com diversos projetos e disponibiliza o site como repositório público para projetos open source.<br />
    22. 22. Fora da caixa – exemplos<br />Banco de dados NoSql<br />http://cassandraemon.codeplex.com/<br />http://mongodbstudio.codeplex.com/<br />NodeJS<br />http://nodejs.org/#download<br />Lucene .Net<br />
    23. 23. Fora da caixa – NuGet<br />www.nuget.org<br />Distribuição de projetos com fácil implementação no seu projeto (Visual Studio)<br />Biblioteca da própria Microsoft ou pode ser adicionada outras bibliotecas<br />
    24. 24. demo<br />NodeJS – Windows<br />
    25. 25. IIS 7 e 7.5<br />Diversos recursos podem ser implementados diretamente pelo IIS facilitando a implementação e o gerenciamento<br />Os desenvolvedores precisam conhecer <br />
    26. 26. demo<br />IIS – (gzipe apagandoincêndio)<br />
    27. 27. Dicas rápidas<br />Modo de pipeline IIS<br />Clássico<br />Integrado<br />
    28. 28. Dicas rápidas<br />Debug = true em produção!!! NUNCA!<br />A compilação de páginas ASP.NET leva mais tempo (otimizações desativadas neste modo)<br />Código pode executar de forma mais lenta (caminhos de depuração habilitados)<br />Muito mais memória é usada dentro do aplicativo em tempo de execução<br />Scripts e imagens baixadas pelo manipulador WebResources.axd não são armazenados em cache<br />
    29. 29. Dicas rápidas<br />WebForms<br />Só deixe viewstatehabilitato em locais que realmente você precisa! Por default o valor é “true”. Desde a versão 4.0 é muito mais fácil gerenciar esse controle.<br />Compactação de Session, caso necessário a partir da versão 4.0 é possível compactar os objetos em sessão e caso não utilize desligue.<br />
    30. 30. Dicas rápidas<br />Bibliotecas prontas<br />Cuidado com controles e plugins prontos Jquery, Ajax control toolkit e afins! Normalmente são pesados e consomem mais recursos do que o necessário!<br />Ferramentas<br />Conheça bem as ferramentas de análise como Firebug, Yslow, Fiddler, etc.<br />
    31. 31. Conteúdo Relacionado<br />Slide Obrigatorio<br />Palestrantes, Por favor listarconteudosexistentesdentro das paginas dos produtos (www.microsoft.combrasil) e paginas do TechNet e MSDN (technet.microsoft.com/brasil– msdn.microsoft./com/brasil)<br />Codeplex www.codeplex.com<br />ASP.NET MVC www.asp.net/mvc<br />ASP.NET Brasil http://msdn.microsoft.com/pt-br/ff380144<br />MSDN www.msdn.com.br<br />Cleber Dantas www.cleberdantas.com<br />Alexandre Tarifa www.alexandretarifa.com.br<br />
    32. 32. Recursos<br />Recursos para IT Pros<br />http://technet.microsoft.com/pt-br<br />Recursos para Desenvolvedores<br />http://msdn.microsoft.com/pt-br<br />
    33. 33. Obrigatorio<br />Nãoesqueça de preenchersuaavaliação online<br />www.teched.com.br/avaliacao<br />
    34. 34. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />

    ×