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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Onde o cache pode
    ser aplicado?

    View full-size slide

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

    View full-size slide

  11. Rede
    • CDN (Content Delivery Network)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Camada do Navegador

    View full-size slide

  15. UX
    OFFLINE
    PERFORMANCE

    View full-size slide

  16. UX
    OFFLINE
    PERFORMANCE
    NO BOLSO DE ALGUÉM

    View full-size slide

  17. Cache no passado
    AppCache

    View full-size slide

  18. 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 full-size slide

  19. caniuse.com/#search=appcache

    View full-size slide

  20. Mp3 de faroeste caboclo
    ~8mb

    View full-size slide

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

    View full-size slide

  22. Cache hoje
    Service Workers e Cache API

    View full-size slide

  23. 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 full-size slide

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

    View full-size slide

  25. Sublime Text
    ~45mb

    View full-size slide

  26. Estratégias

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Exibe o do cache
    e depois vai na rede

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide