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?