Cache, além do CTRL + F5

Evento: ThoughtWorks Internal Meetup

Apresentação reformulada sobre cache, explicando um pouco sobre como funcionava no passado e como é feito hoje, quais as limitações, ferramentas e técnicas que podemos utilizar para melhorar a usabilidade e performance de uma aplicação

Transcript

1. Cache Além do CTRL + F5
2. Quem Sou • Designer por formação • Front-end, Animações, Segurança • Ciclista
3. Agenda 1. Onde o cache pode ser útil
4. Agenda 1. Onde o cache pode ser útil 2. Como era feito no passado
5. Agenda 1. Onde o cache pode ser útil 2. Como era feito no passado 3. Como é feito hoje
6. Agenda 1. Onde o cache pode ser útil 2. Como era feito no passado 3. Como é feito hoje 4. Estratégias
7. – Uma pessoa que você conhece “Deve ser cache.”
8. – A mesma pessoa do slide anterior “Limpa o cache que resolve.”
9. Onde o cache pode ser aplicado?
10. Servidor
11. Servidor • NGINX como um proxy para servidor de cache • Chave no cabeçalho da requisição HTTP (Cache- Control, Last-Modified)
12. Rede
13. Rede • CDN (Content Delivery Network)
14. Aplicação
15. Aplicação • Técnicas como Memoization • Ferramentas como Memcached e Redis • Web API’s (AppCache, Service Workers, Storage)
16. Cliente • Chave no cabeçalho da requisição HTTP (Cache- Control, Last-Modified) • Na camada do navegador
17. Camada do Navegador
18. UX OFFLINE
19. UX OFFLINE PERFORMANCE
20. UX OFFLINE PERFORMANCE NO BOLSO DE ALGUÉM
21. Cache no passado AppCache
25. AppCache • Simples arquivo de texto ou qualquer outra extensão. Por exemplo: .dale • O mime-type do arquivo que era importante • Por padrão utilizava-se a extensão .appcache • Só atualiza o cache quando o manifesto for alterado
26. caniuse.com/#search=appcache
27. 5mb
28. Mp3 de faroeste caboclo ~8mb
29. Uma Música de 4min no Spotify ~6.5mb
30. Cache hoje Service Workers e Cache API
32. Cache API • É uma API. • Permite utilizar diferentes abordagens de cache. • As requisições HTTP são cacheadas como um par de (requisição/resposta) • Pode cachear qualquer tipo de arquivo que seja transferido via HTTP
33. caniuse.com/#search=service%20worker
34. 2 1 3
35. 1 2 3
36. < 50mb
37. Zoom ~48mb
38. Sublime Text ~45mb
39. Estratégias
40. Primeiro vai na rede se tudo der errado, vai no cache
42. Primeiro vai no cache se tudo der errado, vai na rede
47. Fallback genérico o importante é exibir algo pro usuário
50. Exibe o do cache e depois vai na rede
54. – Alguém que eu não lembro “Otimização prematura é a raiz de todo o mal.”
55. Referências • alistapart.com/article/request-with-intent-caching- strategies-in-the-age-of-pwas • medium.com/datadriveninvestor/all-things-caching-use-cases- benefits-strategies-choosing-a-caching-technology-exploring • developers.google.com/web/fundamentals/instant-and-offline/ offline-cookbook • hackernoon.com/client-network-server-and-application-caching- on-the-web • blog.bitsrc.io/understanding-service-workers-and-caching- strategies • serviceworke.rs/caching-strategies
56. Obrigado!