Post on 11-Jun-2015
Técnicas e recursos para desenvolvimento Web em cenários de grande escala
Cleber Dantas
• Atua há 8 anos no mercado de TI• Especialista em desenvolvimento Web• MCAD e MCTS• Entusiasta Agile• Instrutor– Treinando.Net
(http://www.treinando.net)• @cleberdantas• http://www.cleberdantas.com
Minha Vida
Dieta e Saúde
Agenda da Saúde
90 funcionários – 120 Até o fim do ano
25 da área de tecnologia
8 milhões de usuários/mês
50 milhões pageviews/mês
15 TB distribuídos/mês (js, css, html, images, vídeos)
Introdução
• Cenário de aplicações Web (Internet) comparados com sistemas internos exigem técnicas ou práticas que normalmente são ignorados ou desnecessárias
• O ambiente de distribuição é praticamente infinito (navegadores, tipos de conexão, dispositivos, localização, etc)
Agenda
• Front-end• Delivery• Real time
Front-End
• Steve Sounders – “80% dos problemas de performance de aplicações Web estão no Front-end”
• 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)
Front-end - Demo
sprite, paralelismo de downloads e minify js
Ajax
• Otimização do trafego de dados entre servidor e cliente (navegador)
• Trafegar a menor quantidade possível de dados nas requisições
• jQuery e JSON (JavaScript Object Notation) torna isso muito fácil
• jQuery Templates (templates de HTML pré carregados nas páginas)
Ajax - Demo
jQuery, JSON e jQuery Templates
Cache
• A melhor solução de performance é fazer com que o seu código não seja executado o tempo todo!
• Tipos de Cache– Cliente – Headers de expiração (Expires e Cache-
Control)– Servidor – OutputCache (ASP.NET) e Cache de
Objetos (ASP.NET ou memCached)
Cache – Demo
IIS, helper de atualização de arquivos estáticos
Delivery - CDN
• Content Delivery Network– Rede de distribuição de conteúdo– Infraestrutura para ENTREGA do conteúdo
• Própria• Terceirizada (Akamai, Ananke, UOL, etc)• Pública (Microsoft, Google, etc)
– Distribuição de bibliotecas públicas (exemplo jQuery)» http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js
Delivery - CDN
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js
Seu site
Delivery - NGINX
• Proxy Reverso• Utilizamos para entrega de imagens (muito
performático)• http://nginx.org/
Real Time - Web Sockets
• Recurso do HTML 5 para aplicações Web Real Time
• Conexão direta e bidirecional com o servidor web
• Atualização instantânea no cliente (navegadores)
Exemplos: Timeline Twitter
Exemplos: Tempo Real Globo.com
Real Time – Long Pooling - Demo
Aplicações real time – chat
Links
• http://tecnologia.minhavida.com.br• http://br.linkedin.com/company/minha-vida • http://www.cleberdantas.com • http://www.treinando.net
Obrigado. Perguntas?