JAMstack na prática - Os desafios por trás do hype

JamStack é uma ideia de stack que surgiu há algum tempo atrás e recentemente se tornou o mais novo hype da comunidade de desenvolvimento web.

Basicamente, trata-se de uma stack baseada em Javascript, APIs e Markup, onde a as aplicações são servidas estaticamente, de forma rápida e segura. É uma estratégia que não estabelece tecnologias específicas, mas sim uma alternativa a aplicações monolíticas e talvez uma resposta a complexidade que as aplicações frontend ganharam nos últimos anos.

Nesta talk, eu destrincho o conceito, dou minha opinião a respeito do hype e trago um estudo de caso que expõe os principais benefícios desse tipo de ideia, melhores práticas e trade-offs, abordando temas como headless CMS, atomic deploy, static generators e ferramentas legais para trabalhar nesse tipo de projeto.

Transcript

1. JAMSTACK NA PRÁTICA OS DESAFIOS POR TRÁS DO HYPE
2. MILSON JÚNIOR Software Developer na idwall @mjnr20
3. Vagas idwall.gupy.io Twitter @idwall_co
4. JAMSTACK “A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.” jamstack.org
5. JAVASCRIPT API’s MARKUP
6. JavaScript É responsável por qualquer interação que ocorra durante o ciclo de vida da aplicação como por exemplo: requisições para o servidor do lado do cliente. API’s São utilizadas para abstrair processos server-side e interações com banco de dados. Markup Toda marcação HTML necessária para a renderização de uma página é construída em build-time utilizando ferramentas para geração de sites estáticos ou um simples script de build.
7. PRINCIPAIS BENEFÍCIOS
8. Desenvolvimento Infraestrutura Cliente Perspectivas
9. Stack tradicional Desenvolvimento Infraestrutura Cliente Perspectivas
10. Stack tradicional JamStack Desenvolvimento Infraestrutura Cliente Perspectivas
11. Perspectiva de desenvolvimento Entregar app monolítico Lançamento ao mercado depende do envolvimento de muitos times e infraestrutura funcionando Maior curva de aprendizado acerca de ferramentas como Docker, kubernetes Chances de maximizar vendor lock-in
12. Perspectiva de desenvolvimento Entregar site estático Maior velocidade de lançamento ao mercado Menor curva de aprendizado durante o desenvolvimento de novas features Maior pluralidade tecnológica na construção de serviços. Entregar app monolítico Lançamento ao mercado depende do envolvimento de muitos times e infraestrutura funcionando Maior curva de aprendizado acerca de ferramentas como Docker, kubernetes Chances de maximizar vendor lock-in
13. Perspectiva de infraestrutura Servidor de aplicação Precisa implementar escalonamento e monitoramento. É necessário uma quantidade significante de recursos para gerenciar um app em produção. O que gera custos elevados. Interações com dependências acontecem runtime, maximizando o risco de indisponibilidade. Risco de ataques a banco de dados e servidor.
14. Perspectiva de infraestrutura CDN Abstrai escalonamento, monitoramento, log, etc. Reduz a necessidade de recursos always-on para manter o app em produção, logo reduzindo os custos com infraestrutura. Interações com dependências são feitas build-time, reduzindo o risco de indisponibilidade. Minimiza risco de ataques, já que são servidos arquivos estáticos. Servidor de aplicação Precisa implementar escalonamento e monitoramento. É necessário uma quantidade significante de recursos para gerenciar um app em produção. O que gera custos elevados. Interações com dependências acontecem runtime, maximizando o risco de indisponibilidade. Risco de ataques a banco de dados e servidor.
15. Perspectiva do cliente Páginas geradas runtime TTFB geralmente mais elevado e risco maior de tela branca.
16. Perspectiva do cliente Arquivos estáticos Experiência de carregamento mais rápida, TTFB menor e risco menor de tela branca. Páginas geradas runtime TTFB geralmente mais elevado e risco maior de tela branca.
17. PIPELINE E ECOSSISTEMA
25. CASOS REAIS DE IMPLEMENTAÇÃO
26. Frontend Services Conjunto de serviços utilitários consumidos build-time, com o objetivo de automatizar tarefas, integrar com serviços de terceiros e gerar entregáveis mais ricos.
27. Headless CMS Um CMS que tem a camada de apresentação desacoplada, o conteúdo gerado pode ser consumido via APIs e reutilizado entre diferentes plataformas.
28. Headless CMS Um CMS que tem a camada de apresentação desacoplada, o conteúdo gerado pode ser consumido via APIs e reutilizado entre diferentes plataformas.
29. Headless CMS Um CMS que tem a camada de apresentação desacoplada, o conteúdo gerado pode ser consumido via APIs e reutilizado entre diferentes plataformas.
30. Headless CMS Um CMS que tem a camada de apresentação desacoplada, o conteúdo gerado pode ser consumido via APIs e reutilizado entre diferentes plataformas. headlesscms.org/
35. Dynamic Design Systems Geração de assets e variáveis de estilo dinamicamente a partir da integração com uma ferramenta de prototipação. figma.com/developers/api
36. figma.com
37. <svg> <path d="M109.417.398"/> </svg> :root { --red-theme: #e74c3c; }
38. ARMADILHAS E PONTOS FRACOS
39. https://hacklibraryschool.com/2019/03/11/the-hype-cycle/ The Hype Cycle
40. JAMSTACK “A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.” jamstack.org
41. JAMSTACK “A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.” jamstack.org
42. JAMSTACK “A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.” jamstack.org
43. JAMSTACK “A modern architecture — Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.” jamstack.org
44. Novas tecnologias e estratégias devem ser exploradas com responsabilidade.
45. “Backendificação” do frontend. The “Backendification” of Frontend Development - Mike Taylor
48. The “Backendification” of Frontend Development - Mike Taylor
49. The “Backendification” of Frontend Development - Mike Taylor
50. Procure inovar em aspectos que podem melhorar a vida das pessoas, não atualizando a versão do webpack.
51. Exposição de variáveis de ambiente
52. Backend wrapper para consumo runtime de APIs de terceiros
53. Frontend consumindo APIs de terceiros diretamente e expondo chaves
54. Frontend consumindo um BFF que por sua vez integra com o core backend.
55. Lidando com recursos dinâmicos e SEO.
60. Existe a possibilidade de uma aplicação backend que gera marcação HTML runtime ser a melhor opção no seu caso.
61. APRENDA AS PARTES IMPORTANTES DE JAMSTACK
62. Você não precisa necessariamente usar todos os conceitos, mas sim adaptar as ideias ao seu cenário. - Headless CMS - Backends for Frontends - Frontend Services - Atomic Deploys - Dynamic Design Systems - Static Generators
63. Referências • https://headlesscms.org/ • https://jamstack.org/ • https://matthewstrom.com/writing/design-apis/ • https://philcalcado.com/2015/09/18/the_back_end_for_front_end_pattern_bff.html • https://www.reddit.com/r/webdev/comments/a7xgox/jamstackhype_or_not/ • https://buttercms.com/blog/jamstack-vs-mean-vs-lamp-your-guide-to-picking-one#jamstac kprosandcons • https://dev.to/ossia/how-freecodecamporg-uses-the-jamstack--a-single-api-server-to-help- millions-of-people-learn-to-code-every-month-4d5g
64. Valeu FRONT IN FLORIPA! MILSON JÚNIOR @mjnr20 VAGAS ABERTAS idwall.gupy.io