Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cache, além do CTRL + F5

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

Thulio Philipe

November 26, 2020
Tweet

More Decks by Thulio Philipe

Other Decks in Programming

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. 2
    1
    3

    View Slide

  35. 1
    2
    3

    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