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
   

   View Slide

2. Quem Sou
   • Designer por formação
   • Front-end, Animações,
   Segurança
   • Ciclista
   

   View Slide

3. Agenda
   1. Onde o cache pode ser útil
   

   View Slide

4. Agenda
   1. Onde o cache pode ser útil
   2. Como era feito no passado
   

   View Slide

5. Agenda
   1. Onde o cache pode ser útil
   2. Como era feito no passado
   3. Como é feito hoje
   

   View Slide

6. Agenda
   1. Onde o cache pode ser útil
   2. Como era feito no passado
   3. Como é feito hoje
   4. Estratégias
   

   View Slide

7. – Uma pessoa que você conhece
   “Deve ser cache.”
   

   View Slide

8. – A mesma pessoa do slide anterior
   “Limpa o cache que resolve.”
   

   View Slide

9. Onde o cache pode
   ser aplicado?
   

   View Slide

10. Servidor
    

    View Slide

11. Servidor
    • NGINX como um proxy para servidor de cache
    • Chave no cabeçalho da requisição HTTP (Cache-
    Control, Last-Modified)
    

    View Slide

12. Rede
    

    View Slide

13. Rede
    • CDN (Content Delivery Network)
    

    View Slide

14. Aplicação
    

    View Slide

15. Aplicação
    • Técnicas como Memoization
    • Ferramentas como Memcached e Redis
    • Web API’s (AppCache, Service Workers, Storage)
    

    View Slide

16. Cliente
    • Chave no cabeçalho da requisição HTTP (Cache-
    Control, Last-Modified)
    • Na camada do navegador
    

    View Slide

17. Camada do Navegador
    

    View Slide

18. UX
    OFFLINE
    

    View Slide

19. UX
    OFFLINE
    PERFORMANCE
    

    View Slide

20. UX
    OFFLINE
    PERFORMANCE
    NO BOLSO DE ALGUÉM
    

    View Slide

21. Cache no passado
    AppCache
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

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
    

    View Slide

26. caniuse.com/#search=appcache
    

    View Slide

27. 5mb
    

    View Slide

28. Mp3 de faroeste caboclo
    ~8mb
    

    View Slide

29. Uma Música de 4min no Spotify
    ~6.5mb
    

    View Slide

30. Cache hoje
    Service Workers e Cache API
    

    View Slide

31. View Slide

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
    

    View Slide

33. caniuse.com/#search=service%20worker
    

    View Slide

34. View Slide

35. View Slide

36. < 50mb
    

    View Slide

37. Zoom
    ~48mb
    

    View Slide

38. Sublime Text
    ~45mb
    

    View Slide

39. Estratégias
    

    View Slide

40. Primeiro vai na rede
    se tudo der errado, vai no cache
    

    View Slide

41. View Slide

42. Primeiro vai no
    cache
    se tudo der errado, vai na rede
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. Fallback genérico
    o importante é exibir algo pro usuário
    

    View Slide

48. View Slide

49. View Slide

50. Exibe o do cache
    e depois vai na rede
    

    View Slide

51. View Slide

52. View Slide

53. View Slide

54. – Alguém que eu não lembro
    “Otimização prematura
    é a raiz de todo o mal.”
    

    View Slide

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
    

    View Slide

56. Obrigado!
    

    View Slide