5505 otimizando frontends
-
Upload
andre-baltieri -
Category
Technology
-
view
389 -
download
0
Transcript of 5505 otimizando frontends
![Page 1: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/1.jpg)
http://andrebaltieri.net/
HEY!SEU WORKSHOP JÁ VAI
COMEÇARINÍCIO PROGRAMADO PARA
20:30
![Page 2: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/2.jpg)
UTILIZE O
CHATA SUA DIREITA PARASE COMUNICAR
http://andrebaltieri.net/
![Page 3: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/3.jpg)
![Page 4: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/4.jpg)
![Page 5: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/5.jpg)
![Page 6: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/6.jpg)
![Page 7: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/7.jpg)
![Page 8: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/8.jpg)
![Page 9: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/9.jpg)
WorkshopOtimizando Frontends
![Page 10: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/10.jpg)
AgendaContexto 1 – Web
Entendendo o Request/ResponseDeficiências do BrowserRequisição é requisição! Ponto!Analise seus acessos
Contexto 2 – DesenvolvimentoOrganizaçãoPageSpeed InsightsImagens vs FontsThumbnailsBundle/Minification
Cache
Contexto 3 – InfraestruturaStatic File Server ou App?CacheCache vs VersionamentoDistribuição de Imagens (Banco vs Arquivo)CDN
Contexto 4 – AutomaçãoBowerGulp e Grunt
![Page 11: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/11.jpg)
WebEntendendo o Request/ResponseDeficiências do BrowserRequisição é requisição! Ponto!
Analise seus acessos
![Page 12: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/12.jpg)
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...
![Page 13: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/13.jpg)
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
![Page 14: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/14.jpg)
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
![Page 15: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/15.jpg)
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?
![Page 16: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/16.jpg)
DesenvolvimentoOrganize seu códigoPageSpeed InsightsImagens vs Fonts
ThumbnailsBundle/MinificationCache
![Page 17: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/17.jpg)
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”
![Page 18: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/18.jpg)
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!
![Page 19: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/19.jpg)
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
![Page 20: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/20.jpg)
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?
![Page 21: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/21.jpg)
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!
![Page 22: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/22.jpg)
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
![Page 23: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/23.jpg)
InfraestruturaStatic File Server ou App?CacheCache vs Versionamento
Distribuição de ImagensCDN
![Page 24: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/24.jpg)
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
![Page 25: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/25.jpg)
Cache (Server) Existem servidores que tratam o cacheamento da sua aplicação
Redis Memcache Squid etc..
![Page 26: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/26.jpg)
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!
![Page 27: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/27.jpg)
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
![Page 28: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/28.jpg)
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
![Page 29: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/29.jpg)
AutomaçãoOtimizando seu desenvolvimentoBowerGrunt
Gulp
![Page 30: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/30.jpg)
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?
![Page 31: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/31.jpg)
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/
![Page 32: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/32.jpg)
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/
![Page 33: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/33.jpg)
Gulp Realiza tudo que o Grunt faz, mas tem alguns pontos muito
interessantes gulp-webserver gulp-watch gulp-notify
http://gulpjs.com/
![Page 34: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/34.jpg)
Dúvidas
![Page 35: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/35.jpg)
OBRIGADO
![Page 36: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/36.jpg)
![Page 37: 5505 otimizando frontends](https://reader035.fdocumentos.com/reader035/viewer/2022062904/5874f6921a28ab917a8b80a1/html5/thumbnails/37.jpg)