O documento fornece uma agenda para um workshop sobre otimização de frontends. A agenda inclui tópicos como entendimento de requisições e respostas, deficiências do navegador, organização do código, ferramentas de automação e cache.

1. http://andrebaltieri.net/
HEY!SEU WORKSHOP JÁ VAI
COMEÇAR
INÍCIO PROGRAMADO PARA
20:30

2. UTILIZE O
CHATA SUA DIREITA PARA
SE COMUNICAR
http://andrebaltieri.net/

9. Workshop
Otimizando Frontends

10. Agenda
Contexto 1 – Web
Entendendo o Request/Response
Deficiências do Browser
Requisição é requisição! Ponto!
Analise seus acessos
Contexto 2 – Desenvolvimento
Organização
PageSpeed Insights
Imagens vs Fonts
Thumbnails
Bundle/Minification
Cache
Contexto 3 – Infraestrutura
Static File Server ou App?
Cache
Cache vs Versionamento
Distribuição de Imagens (Banco vs
Arquivo)
CDN
Contexto 4 – Automação
Bower
Gulp e Grunt

11. Web
Entendendo o Request/Response
Deficiências do Browser
Requisição é requisição! Ponto!
Analise seus acessos

12. Entendendo o Req/Res
 Request
 Toda requisição feita ao servidor
 Response
 Resposta do servidor a requisição
 Tipos de Resposta
 HTML
 JSON
 Imagem
 Texto
 Etc...

13. Deficiências
 O browser possui um limite de requisições simultâneas (Isto vai
mudar no HTTP 2.0)
 Quanto mais requisições sua página fizer, mais lenta será
 Quanto mais imagens, mais lenta
 Quanto mais arquivos CSS, JS, mais lenta
 Similar a cópia de arquivos nos SOs

14. Sobre Requisições
 Uma requisição é uma requisição! Não importa se o retorno é um
HTML, um JSON, uma Imagem, etc...
 Se seu frontend está na mesma aplicação da sua API, além de
fornecer seus arquivos “HTML” sua aplicação também tem que
“ouvir” as requisições do seu serviço.
 Eles vão disputar a atenção

15. Analise seu tráfego
 Quantos usuários/acessos sua aplicação recebe?
 Destes, quantos são novos? Por que isto importa?
 Sua aplicação escala automático?
 Se sim, por que me preocupar com performance?

16. Desenvolvimento
Organize seu código
PageSpeed Insights
Imagens vs Fonts
Thumbnails
Bundle/Minification
Cache

17. Organize seu código
 Separe seu CSS/JS em arquivos
 CSS no topo
 JS no fim da página
 Evite JS no “meio” das páginas
 A semântica correta do HTML também ajuda
 Evite CSS “inline”

18. PageSpeed Insights
 Ferramenta que fornece informações sobre sua página
 https://developers.google.com/speed/pagespeed/insights/
 Já mostra as possíveis soluções para os problemas encontrados
 Não entre em pânico!

19. Imagens VS Fonts
 Minha aplicação tem muitos ícones, como proceder?
 Fontes são sempre a melhor opção?
 E os SVG?
 Quais opções temos?
 Font-awesome
 Material Icons

20. Imagens
 Minha aplicação tem muitas imagens, como proceder?
 Gere thumbnails das suas imagens
 Posso gerar thumbs dinamicamente?
 Sim, mas muita calma nesta hora!
 É interessante trabalhar com Sprites?

21. Bundle/Minification
 Se quanto mais arquivos, mais requisições e quanto mais requisições
mais lento....
 Por que não juntar todos os arquivos CSS/JS em um único arquivo?
 Minifique os arquivos! O browser não precisa de espaços e quebras
de linha!

22. Cache (Client)
 Existem dois tipos de cache
 Server Side
 Client Side
 Cache padrão do HTML
 Cache Manifest
 https://developer.mozilla.org/pt-
BR/docs/Web/HTML/Using_the_application_cache

23. Infraestrutura
Static File Server ou App?
Cache
Cache vs Versionamento
Distribuição de Imagens
CDN

24. Static vs App Server
 Sendo sua aplicação somente HTML, CSS e JS, ela pode ser
armazenada em um servidor de arquivos estáticos
 Arquivos estáticos podem ser servidos mais rapidamente
 São melhores cacheados
 Impossibilita técnicas de bootstrap, cache do lado do servidor,
otimização do SEO por parte do servidor e afins

25. Cache (Server)
 Existem servidores que tratam o cacheamento da sua aplicação
 Redis
 Memcache
 Squid
 etc..

26. Versão
 Se meus arquivos serão cacheados, o que acontece quando eu subir
uma nova versão deles?
 Que tal versionar seus arquivos?
 scripts-1.0.0.min.js
 styles-1.0.0.min.css
 logo_300x300-1.0.0.png
 Mudando o nome do arquivo, a atualização é automática
 Cuidado, isto pode impactar as requisições no seu servidor!

27. Distribuição de Imagens
 Junto a sua aplicação (Arquivos estáticos)
 Em base64 armazenada no banco de dados
 Em um servidor separado (Só para imagens)
 Em um servidor separado (Cacheando)
 Via CDN

28. CDN
 Content Delivery Network
 Otimiza a entrega de arquivos estáticos “espalhando-os” por vários
servidores pelo mundo
 O usuário sempre acessa o arquivo no servidor mais próximo
 Quanto mais servidores, melhor
 Não é tão barato

29. Automação
Otimizando seu desenvolvimento
Bower
Grunt
Gulp

30. Otimizando o Dev
 O que faço com todas as dependências da minha aplicação?
 Toda vez tenho que minificar meus arquivos?
 Como preparo minha aplicação para publicação?

31. Bower
 Faz a gestão de todos os pacotes que sua aplicação usa e que não são
servidos via CDN
 Utilize o Bower para gerenciar seus pacotes. Evite fazer o download
direto dos sites
 Ele versiona os pacotes e promove a facilidade da concentração das
dependências em um repositório. Isto ajuda no trabalho em equipe
 http://bower.io/

32. Grunt
 Automatiza tarefas como cópia de imagens, minificação, junção de
arquivos
 Você pode deixar tudo pré-configurado e fazer seu pacote para
deploy com apenas um comando
 Utiliza JavaScript como linguagem 
 http://gruntjs.com/

33. Gulp
 Realiza tudo que o Grunt faz, mas tem alguns pontos muito
interessantes
 gulp-webserver
 gulp-watch
 gulp-notify
 http://gulpjs.com/

34. Dúvidas

35. OBRI
GADO