Frameworks Front-end: o que temos pra hoje?

Transcript

1. FRAMEWORKS FRONT-END O QUE TEMOS PRA HOJE? SAMUEL MARTINS LINKEDIN.COM/IN/SAMWX
2. EVOLUÇÃO DE APLICAÇÕES WEB 2000s Monolitos Linguagens de script (PHP, ASP) Pouca preocupação com UX. 2010s Web 2.0 Ajax Aplicações SPA Melhorias em UX Frameworks/libs JS 2020s Server-side rendering Server-driven UI Web distribuída (MFE, Monorepos) 2030s Web3? Blockchain? Programação orientada à Chat-GPT?
3. INTRODUÇÃO Aplicações front-end web de média e larga escala compartilham de problemas comuns, que hoje podem ser resolvidos por diversas ferramentas. 01. Componentização 02. Performance 03. Escala Aplicações componentizadas facilitam a manutenção Alto desempenho é meio caminho andado para uma aplicação de sucesso Arquiteturas evolutivas permitem flexibilidade na adoção de novas tecnologias
4. SENSO COMUM (?)
5. POPULARIDADE Fonte: StackOverflow Insights
6. VISÃO GERAL 01. React Flexibilidade arquitetural Comunidade e conteúdo Pegada mais orientada à programação funcional 02. 03. Angular Robustez e completude Linguagem tipada de forma nativa Pegada mais orientada à objetos Vue.js Facilidade de integração com outras plataformas Simplicidade Leveza
7. TENDÊNCIA SERVER-SIDE (SSR) NO FRONT-END Single-page applications (SPA) deixaram um problema para aplicações que dependem de SEO; Otimização de renderização de interfaces é limitada em SPA; A performance em SSR tende a ser superior se comparada a outros modelos.
8. SSR - Renderização a nível de servidor Melhor performance em SEO Primeira renderização mais rápida Recursos de servidor disponíveis no front-end SSG - Renderização em tempo de build Pré-renderização de toda a aplicação em tempo de build Performance em alto nível Ideal para aplicações estáticas ou com poucas variações de conteúdo
9. Ferramentas
10. TENDÊNCIAS GENERALISTAS Componentização de aplicações legadas; Criação de Design Systems cross-framework; Criação de componentes “à prova de futuros”.
11. TENDÊNCIAS GENERALISTAS Svelte StencilJs Build de componentes generalistas que funcionam em qualquer plataforma/framework. O Svelte atua praticamente como uma ferramenta de desenvolvimento. O código core do Svelte não é incorporado aos componentes após o build, diferentemente dos seus concorrentes Criado pelo Ionic para evitar retrabalho ao implementar a mesma coisa para múltiplos frameworks. Consegue exportar os componentes específicos para React, Angular e Vue, além de Web Components nativos.
12. PRÓXIMOS PASSOS Mantenha o olho aberto para novas tecnologias; Estude diferentes arquiteturas: Clean Architecture; Micro Front-ends; Monorepos; Não adote ferramentas só pelo hype (!); Um framework bem aprendido vale mais do que o conhecimento raso em 20 outros frameworks.
13. MUITO OBRIGADO! SAMUEL MARTINS
14. REFERÊNCIAS Start a new React Project - https://react.dev/learn/start-a-new-react- project; Building React and Angular Component Libraries with Stencil and Nx - https://ionic.io/blog/building-react-and-angular-component-libraries-with- stencil-and-nx; Frontend Developer Roadmap - https://roadmap.sh/frontend; Tudo que você precisa saber sobre o Next.js 13 - https://youtu.be/0zl72thBKzo?si=224RgDfsarYWiZcR; Micro Frontends - https://martinfowler.com/articles/micro-frontends.html