Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frameworks Front-end: o que temos pra hoje?

Samuel Martins
December 05, 2023
50

Frameworks Front-end: o que temos pra hoje?

Samuel Martins

December 05, 2023
Tweet

Transcript

  1. 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?
  2. 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
  3. 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
  4. 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.
  5. 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
  6. TENDÊNCIAS GENERALISTAS Componentização de aplicações legadas; Criação de Design Systems

    cross-framework; Criação de componentes “à prova de futuros”.
  7. 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.
  8. 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.
  9. 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