Construindo o futuro da web com JAM Stack

Apresentação abordando como JAM Stack é usado e tem ajudado e melhorar o desacoplamento entre regras de negócio, interface, camada de dados fechando com live code utilizando a Azion Technologies.

Youtube vídeo: https://youtu.be/YF1RFTC_z10?si=9OUZdZdXpMoVcV9X

Transcript

1. eeeeee JAM Stack Construindo o Futuro da Web
2. eeeeee 1. Arquitetura convencional 2. JAMStack 3. Rendering Frameworks & Azion Edge Computing 4. Recapitulando 5. Referências
3. eeeeee ROBSON JUNIOR Software Engineering
4. Arquitetura convencional 1 © Azion 2023
5. © Azion 2023 Client Web Server APP Server Database
6. eeeeee Segurança Diversos tipos de ataques cada vez mais sofisticados em crescimento exponencial. 1
7. eeeeee exploit-db.com
8. © Azion 2023
9. © Azion 2023
10. © Azion 2021 questionamentos / segurança
11. © Azion 2021 questionamentos / segurança
12. eeeeee Performance Aplicação centralizada, entrega distante do usuário e tempo alto para processamento, execução e entrega. 2
13. © Azion 2023 0s 1s 2s 3s 4s 5s HTML images, icons, other media CSS JavaScript Time to first byte (TTFB)
14. © Azion 2021 questionamentos / performance
15. © Azion 2021 questionamentos / performance
16. eeeeee Escalabilidade Difícil garantia de entrega e processamento em momentos com grande volume de dados. 3
17. © Azion 2021 questionamentos / escalabilidade
18. eeeeee Infraestrutura Alto custo para expansão versus tempo ócio quando não em momentos de alta volumetria de dados. 4
19. eeeeee Segurança Diversos tipos de ataques cada vez mais sofisticados em crescimento exponencial. 1 Infraestrutura Alto custo para expansão versus tempo ócio quando não em momentos de alta volumetria de dados. 4 Escalabilidade Difícil garantia de entrega e processamento em momentos com grande volume de dados. 3 Performance Aplicação centralizada, entrega distante do usuário e tempo alto para processamento, execução e entrega. 2
20. JAMStack 2 © Azion 2023
21. © Azion 2023 Java Script API Markdown Java Script API Markdown
22. eeeeee
23. eeeeee
24. eeeeee
25. eeeeee
26. © Azion 2023
27. eeeeee
28. eeeeee
29. © Azion 2023 Client Web Server APP Server Database Azion Edge Platform (e.g CDN + Functions) Client
30. eeeeee Segurança Mitigação de Bots, DDoS, OWASP, monitoramento, PATH Transversal, proteção de access key. 1
31. © Azion 2023 Azion Edge Platform (e.g CDN + Functions) Client
32. eeeeee Performance Requisição local, processamento e execução de código local. 2
33. © Azion 2023 0s 1s 2s 3s 4s 5s HTML images, icons, other media CSS JavaScript (TTFB)
34. eeeeee Escalabilidade Globalmente conectados, para cada requisição é feita a melhor escolha do caminho para entregar/executar. 3
35. eeeeee Infraestrutura Sob demanda, grande e espalhada de forma global, garantindo entrega sem ponto de falha. 4
36. © Azion 2023 100+ Edge Locations Worldwide 30ms Median Global Latency 300B Transactions Per Day 100% Network Uptime Guaranteed The most reliable network on the planet.
37. eeeeee Segurança Mitigação de Bots, DDoS, OWASP, monitoramento, PATH Transversal, proteção de access key. 1 Infraestrutura Alto custo para expansão versus tempo ócio quando não em momentos de alta volumetria de dados. 4 Escalabilidade Globalmente conectados, para cada requisição é feita a melhor escolha do caminho para entregar/executar. 3 Performance Requisição local, processamento e execução de código local. 2
38. © Azion 2023 Azion Edge Platform (e.g CDN + Functions) Client
39. Rendering Frameworks + Azion Edge Computing 3 © Azion 2023
40. RenderingFrameworks VS ComponentLibraries © Azion 2023
41. eeeeee SEO Complexidade de processamento para crawlers identificar o conteúdo da página. 1 Performance Garantir um bom tempo de cliente rendering devido a multiplos devices com diferentes capacidades de processamento. 2 Web Vitals LCP (Largest Content Paint) CLS (Cumulative Layout Shift) FID (First Input Delay) NIP (Next Interaction Pain / 2024) 3 https://web.dev/vitals/
42. © Azion 2023
43. SSR © Azion 2023 Server Side Rendering
44. © Azion 2023 Request Request Data Response: dynamically HTML generated
45. SSR © Azion 2023 + Azion Edge Computing
46. © Azion 2023 Request Request Data Request Data Azion Edge Platform (e.g CDN + Functions) Response: dynamically HTML generated
47. © Azion 2023 Request Response: dynamically HTML generated Request Data Azion Edge Platform (e.g CDN + Functions)
48. SSG © Azion 2023 Site Static Generator
49. © Azion 2023 HTML CSS JS Request Response: static files (HTML, CSS, JS, Images) storage (ceph, s3 ...) CDN img
50. SSG © Azion 2023 + Azion Edge Computing
51. © Azion 2023 HTML CSS JS Request Response storage (ceph, s3 ...) Azion Edge Platform (e.g CDN + Functions)
52. © Azion 2023 HTML CSS JS Request Response storage (ceph, s3 ...) Azion Edge Platform (e.g CDN + Functions)
53. Live Coding + © Azion 2023
54. Pipeline + © Azion 2023
55. © Azion 2023 Build Tools Grunt / Gulp / Webpack / Vite Astro / Jekyll / Hugo / Gatsby GIT content Version / Review GIT backend Cloudcannon / Builder.io / Tina Azion Edge Platform (e.g CDN + Functions)
56. © Azion 2023 Build Tools grunt/gulp/webpack/vite jekyll/nuxt/gatsby CMS API Dato/Ghost/Craft API Driven GIT content version/review Azion Edge Platform (e.g CDN + Functions)
57. Recapitulando 4 © Azion 2023
58. © Azion 2023 Client Web Server APP Server Database Azion Edge Platform (e.g CDN + Functions) Client
59. • Seguro; • Escalável; • Performático; • Redução de infraestrutura; • Grande variedade de ferramentas; • Escolher ferramentas e conectá-las; • Redução drástica no processo de desenvolvimento e lançamento de aplicações e funcionalidades; © Azion 2023
60. Referências 5 © Azion 2023
61. © Azion 2023 • 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/2022
62. © Azion 2023 Obrigado!