Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

Como JAM Stack ajudou crescer o time de Marketi...

Como JAM Stack ajudou crescer o time de Marketing na Azion

Essa apresentação tem o objetivo falar sobre arquitetura JAM Stack usada na Azion. Será explicado ""o que é JAM Stack"", mostrado um casos de uso, também falaremos sobre problemas/soluções e como montamos essa arquitetura estática para o time de Marketing ter um processo mais ágil na criação de páginas de presença web.

https://www.youtube.com/watch?v=PjvxEvfTbY4

Robson Júnior

November 18, 2021
Tweet

More Decks by Robson Júnior

Other Decks in Programming

Transcript

  1. Robson Júnior Software web engineering Azion Technologies Histórico nos times

    de: Routing Services | Core Services | Marketing Engineering
  2. 0s 1s 2s 3s 4s 5s HTML images, icons, other

    media CSS JavaScript Time to first byte (TTFB)
  3. 0s 1s 2s 3s 4s 5s HTML images, icons, other

    media CSS JavaScript (TTFB)
  4. SSR

  5. HTML CSS JS CDN Content Delivery Network Request Response: static

    files (HTML, CSS, JS, Images) storage (ceph, s3 ...)
  6. HTML CSS JS CDN Content Delivery Network Request Response: static

    files (HTML, CSS, JS, Images) Edge Storage
  7. Build Tools Gulp/grunt/webpack/vite/ jekyll/nuxt/gatsby Tipo GIT based GIT backend Forestry/Prose/Coisas

    GIT content version/review CDN Content Delivery Network Third-part API Azion Edge Functions
  8. Build Tools Gulp/grunt/webpack/vite/ jekyll/nuxt/gatsby Tipo GIT based GIT backend Forestry/Prose/Coisas

    GIT content version/review CDN Content Delivery Network Third-part API Azion Edge Functions
  9. Build Tools Gulp/grunt/webpack/vite/ jekyll/nuxt/gatsby Tipo GIT based GIT backend Forestry/Prose/Coisas

    GIT content version/review CDN Content Delivery Network client API Azion Edge Functions Disqus/stripe/rum/hotjar/hubspot/analytics Third-part API Azion Edge Functions
  10. Data driven CDN content delivery network Build Tools gulp/grunt/webpack/vite jekyll/nuxt/gatsby

    Third-part API Azion Edge Functions CMS API Dato/Ghost/Craft API Driven Tipo
  11. Data driven CDN content delivery network Build Tools gulp/grunt/webpack/vite jekyll/nuxt/gatsby

    Third-part API Azion Edge Functions CMS API Dato/Ghost/Craft API Driven Tipo
  12. Data driven CDN content delivery network Build Tools gulp/grunt/webpack/vite jekyll/nuxt/gatsby

    Third-part API Azion Edge Functions CMS API Dato/Ghost/Craft API Driven Tipo client API Azion Edge Functions Disqus/stripe/rum/hotjar/hubspot/analytics
  13. Contras controle de versão fácil rollback dev&editores com mesmo workflow

    simples de configurar Prós GIT based / API driven
  14. Contras controle de versão fácil rollback dev&editores com mesmo workflow

    simples de configurar difícil integração múltiplos Front-End Prós GIT based / API driven
  15. Contras controle de versão fácil rollback dev&editores com mesmo workflow

    simples de configurar difícil integração múltiplos Front-End difícil para publicação em < 1 min Prós GIT based / API driven
  16. Contras controle de versão fácil rollback dev&editores com mesmo workflow

    simples de configurar difícil integração múltiplos Front-End difícil para publicação em < 1 min opções limitadas (estrutura conteúdo) Prós GIT based / API driven
  17. Contras controle de versão fácil rollback dev&editores com mesmo workflow

    simples de configurar difícil integração múltiplos Front-End difícil para publicação em < 1 min opções limitadas (estrutura conteúdo) plano x queries git Prós GIT based / API driven
  18. Contras controle de versão X fácil integração múltiplos Front-End fácil

    rollback dev&editores com mesmo workflow simples de configurar difícil integração múltiplos Front-End difícil para publicação em < 1 min opções limitadas (estrutura conteúdo) plano x queries git Prós GIT based / API driven
  19. Contras controle de versão X fácil integração múltiplos Front-End fácil

    rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow simples de configurar difícil integração múltiplos Front-End difícil para publicação em < 1 min opções limitadas (estrutura conteúdo) plano x queries git Prós GIT based / API driven
  20. Contras controle de versão X fácil integração múltiplos Front-End fácil

    rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow X excelente para múltiplos apps, desk/mobile simples de configurar difícil integração múltiplos Front-End difícil para publicação em < 1 min opções limitadas (estrutura conteúdo) plano x queries git Prós GIT based / API driven
  21. Contras controle de versão X fácil integração múltiplos Front-End fácil

    rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow X excelente para múltiplos apps, desk/mobile simples de configurar X excelente para publicação em < 1 min difícil integração múltiplos Front-End difícil para publicação em < 1 min opções limitadas (estrutura conteúdo) plano x queries git Prós GIT based / API driven
  22. Contras difícil integração múltiplos Front-End X difícil versionamento difícil para

    publicação em < 1 min opções limitadas (estrutura conteúdo) plano x queries git Prós controle de versão X fácil integração múltiplos Front-End fácil rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow X excelente para múltiplos apps, desk/mobile simples de configurar X excelente para publicação em < 1 min GIT based / API driven
  23. Contras difícil integração múltiplos Front-End X difícil versionamento difícil para

    publicação em < 1 min X difícil para gerar preview/stage opções limitadas (estrutura conteúdo) plano x queries git Prós controle de versão X fácil integração múltiplos Front-End fácil rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow X excelente para múltiplos apps, desk/mobile simples de configurar X excelente para publicação em < 1 min GIT based / API driven
  24. Contras difícil integração múltiplos Front-End X difícil versionamento difícil para

    publicação em < 1 min X difícil para gerar preview/stage opções limitadas (estrutura conteúdo) X complexidade para ambiente de dev plano x queries git Prós controle de versão X fácil integração múltiplos Front-End fácil rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow X excelente para múltiplos apps, desk/mobile simples de configurar X excelente para publicação em < 1 min GIT based / API driven
  25. Contras difícil integração múltiplos Front-End X difícil versionamento difícil para

    publicação em < 1 min X difícil para gerar preview/stage opções limitadas (estrutura conteúdo) X complexidade para ambiente de dev plano x queries git X limite storage, querie Prós controle de versão X fácil integração múltiplos Front-End fácil rollback X fácil manejo de grande volume de dados dev&editores com mesmo workflow X excelente para múltiplos apps, desk/mobile simples de configurar X excelente para publicação em < 1 min GIT based / API driven
  26. • Mais seguro • Melhora a performance • Escalabilidade •

    Disponibilidade • Ambos, GIT based e API Driven possuem prós e contras • Redução de custo de infraestrutura • Grande variedade de ferramentas • Todos componentes arquiteturais já são existentes, basta conectá-los Conclusão: