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

Transcript

1. JAM Stack Acelerando entregas web na Azion Robson Júnior github.com/robsongajunior
2. Robson Júnior Software web engineering Azion Technologies Histórico nos times de: Routing Services | Core Services | Marketing Engineering
3. arquitetura convencional
4. Quais os problemas com a arquitetura convencional?
5. Problemas • Segurança
6. exploit-db.com https://jamstack.org/
7. drupal
8. wordpress
9. magento
10. opencart
11. Problemas • Segurança • Performance
12. 0s 1s 2s 3s 4s 5s HTML images, icons, other media CSS JavaScript Time to first byte (TTFB)
13. Problemas • Segurança • Performance • Escalabilidade
14. Problemas • Segurança • Performance • Escalabilidade • Custo
15. Solução? Robson Júnior github.com/robsongajunior
16. JAM Stack Robson Júnior github.com/robsongajunior
17. JavaScript Robson Júnior github.com/robsongajunior
18. JavaScript API Robson Júnior github.com/robsongajunior
19. JavaScript API Markdown Robson Júnior github.com/robsongajunior
20. arquitetura JAM Stack
22. Principais benefícios • Segurança
23. Principais benefícios • Segurança • Performance
24. 0s 1s 2s 3s 4s 5s HTML images, icons, other media CSS JavaScript (TTFB)
25. Principais benefícios • Segurança • Performance • Escalabilidade
26. Principais benefícios • Segurança • Performance • Escalabilidade • Custo
27. Ferramentas
28. Ferramentas jamstack.org/generators
29. Ferramentas jamstack.org/generators
30. Ferramentas jamstack.org/generators
31. Ferramentas jamstack.org/generators
32. Ferramentas jamstack.org/generators
33. Ferramentas jamstack.org/generators
34. jamstack.org/generators
35. SSR / SSG
36. SSR
37. SSR server side rendering
38. Request Request Data Response: dynamically HTML generated
39. SSR / SSG server side rendering
40. SSR / SSG server side rendering / static site generator
41. HTML CSS JS CDN Content Delivery Network Request Response: static files (HTML, CSS, JS, Images) storage (ceph, s3 ...)
42. HTML CSS JS CDN Content Delivery Network Request Response: static files (HTML, CSS, JS, Images) Edge Storage
43. Gerenciando Conteúdo https://jamstack.org/
44. Ferramentas jamstack.org/headless-cms
45. Ferramentas jamstack.org/headless-cms
46. Ferramentas jamstack.org/headless-cms
47. Ferramentas jamstack.org/headless-cms
48. GIT based vs API driven Tipos Gerenciamento de conteúdo
49. GIT based Tipos Gerenciamento de conteúdo
50. Build Tools Gulp/grunt/webpack/vite/ jekyll/nuxt/gatsby Tipo GIT based GIT backend Forestry/Prose/Coisas GIT content version/review Third-part API Azion Edge Functions
51. 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
52. 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
53. 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
54. API driven Tipos Gerenciamento de conteúdo
55. Data driven Build Tools gulp/grunt/webpack/vite jekyll/nuxt/gatsby Third-part API Azion Edge Functions CMS API Dato/Ghost/Craft API Driven Tipo
56. 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
57. 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
58. 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
59. controle de versão GIT based / API driven Contras Prós
60. Contras controle de versão fácil rollback Prós GIT based / API driven
61. Contras controle de versão fácil rollback dev&editores com mesmo workflow Prós GIT based / API driven
62. Contras controle de versão fácil rollback dev&editores com mesmo workflow simples de configurar Prós GIT based / API driven
63. 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
64. 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
65. 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
66. 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
67. 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
68. 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
69. 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
70. 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
71. 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
72. 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
73. 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
74. 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
75. jamstack.org/headless-cms
76. Dados
77. jamstack.org/survey/2021/#adoption
78. jamstack.org/survey/2021/#demographics
79. jamstack.org/survey/2021/#workflows
80. jamstack.org/survey/2021/#workflows
81. jamstack.org/survey/2021/#workflows
82. E na prática? live code
83. • 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:
84. • www.azion.com/en/blog/simplifying-and-accelerating-deliveries-with-serverless-functions • www.azion.com/pt-br/blog/como-a-azion-passou-a-usar-jamstack • www.azion.com/pt-br/blog/como-a-performance-lcp-melhorou-com-jamstack • www.azion.com/pt-br/blog/beneficios-do-jamstack • www.azion.com/pt-br/blog/jamstackxwordpress • jamstack.org/what-is-jamstack • jamstack.org/generators • jamstack.org/headless-cms • jamstack.org/survey/2021 • youtube.com/watch?v=KX4G49ZrvY0 Como saber mais sobre JAM Stack?
85. Robson Júnior github.com/robsongajunior robsongajunior.medium.com linkedin.com/in/robsongajunior OBRIGADO 300 U$ para usar/estudar na plataforma de Edge Computing da Azion Technologies