O documento discute engenharia de frontend de alta performance, incluindo conceitos como sprites, CSS, JavaScript e HTML para melhorar o desempenho de sites. Ele também lista ferramentas e conhecimentos importantes para engenheiros front-end.
Boas práticas de programação com Object Calisthenics
Engenharia de front end de alta performance
1. Engenharia de frontend de alta performance
Engenharia de frontend
de alta performance
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
2. Engenharia de frontend de alta performance
Mas porque engenharia?
A engenharia é a ciência e a profissão de adquirir
e aplicar os conhecimentos matemáticos,
técnicos e científicos na criação,
aperfeiçoamento e implementação de
utilidades, tais como materiais, estruturas,
máquinas, aparelhos, sistemas ou processos, que
realizem uma determinada função ou objetivo.
Fonte:
http://pt.wikipedia.org/wiki/Engenharia
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
3. Engenharia de frontend de alta performance
Tenha sempre em mente
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
4. Tenha sempre em mente Engenharia de frontend de alta performance
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
5. Tenha sempre em mente Engenharia de frontend de alta performance
Keep It Simple, Stupid!
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
6. Tenha sempre em mente Engenharia de frontend de alta performance
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
7. Tenha sempre em mente Engenharia de frontend de alta performance
Preguiça
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
8. Engenharia de frontend de alta performance
Ferramentas
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
9. Ferramentas Engenharia de frontend de alta performance
Editor de
Firebug Yslow Pagespeed Webdeveloper
código
Firefox
Colorzilla Measureit! Html validator Screen grab!
collection
Virtualbox / Editor de
Css usage lynx
VM Ware imagens
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
10. Engenharia de frontend de alta performance
o que fazer para o site
ficar mais rápido
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
11. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance
sprites
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
12. O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance
O que é sprite?
Em computação gráfica, um sprite é um objeto gráfico bi
ou tridimensional que se move numa tela sem deixar
traços de sua passagem (como se fosse um "espírito").
Os sprites foram inventados originalmente como um
método rápido de animação de várias imagens
agrupadas numa tela, em jogos de computador
bidimensionais, usando hardware especial...
Fonte:
http://pt.wikipedia.org/wiki/Sprite_(gráfico)
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
13. O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance
Sprites
Porque usar sprites?
Dá para usar sprites para todas as
imagens?
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
14. O que fazer para o site ficar mais rápido / sprites Engenharia de frontend de alta performance
Exemplo de sprite
Dimensões em pixel: 500 x 1200
Tamanho em kb: 450
Tempo de carregamento: 2.4s
Agrupamento de 202 imagens
Qual o tamanho em kb se não estivessem agrupadas?
Maior controle das imagens utilizadas no site
Menos imagens de layout para o site inteiro
Agrupamento no css do uso das imagens
Felicidade do designer por manter aquela sombrinha
“essencial”
E o melhor, poder de negociação para cortar aquela bossa
chata de ser implementada
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
15. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance
CSS
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
16. O que fazer para o site ficar mais rápido / CSS Engenharia de frontend de alta performance
CSS
CSS genérico ou “amarrado”?
Quando o CSS genérico é bom?
Quando o CSS amarrado é bom?
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
17. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance
javascript
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
18. O que fazer para o site ficar mais rápido / javascript Engenharia de frontend de alta performance
javascript
JS puro ou
framework?
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
19. O que fazer para o site ficar mais rápido Engenharia de frontend de alta performance
HTML
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
20. O que fazer para o site ficar mais rápido / HTML Engenharia de frontend de alta performance
HTML
menor código possível ou
código mais otimizado?
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
21. Engenharia de frontend de alta performance
conhecimentos que
fazem a diferença
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
22. Conhecimentos que fazem a diferença Engenharia de frontend de alta performance
CDN DNS
Montar o ambiente de
Download de elementos da página
desenvolvimento
Interpretação dos seletores pelo
Noções de SEO
browser
Estresse do browser com CSS e JS Microformats e schema.org
Overlays e selects no IE6 Noções de programação backend
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
23. Engenharia de frontend de alta performance
Simplificando as coisas
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
24. Simplificando as coisas Engenharia de frontend de alta performance
Exemplo 01
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
25. Simplificando as coisas Engenharia de frontend de alta performance
Exemplo 02
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
26. Simplificando as coisas Engenharia de frontend de alta performance
Exemplo 03
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
27. Engenharia de frontend de alta performance
@andersonSolano dúvidas? #FIR2011 naoesqueca.com
28. Engenharia de frontend de alta performance
@andersonSolano dúvidas? #FIR2011 naoesqueca.com