Projetando Aplicações Front-End Modernas

Arquiteturas, práticas e técnicas recomendadas pelo mercado atualmente para criação de aplicações Front-End, principalmente assuntos relacionados à Baseline, Resumability, Islands, SSR, ISR, SPA, MPA entre outros conceitos modernos, visando facilitar a compreensão sobre como esses temas podem ser aplicados de maneira eficaz em projetos do dia a dia.

Transcript

1. Projetando Aplicações Front-End Modernas Beto Muniz betomuniz.com
2. Projetando Aplicações Front-End Modernas
3. Arquiteturas de Aplicações Front-End Modernas
4. Single-Page Application Carrega uma página e atualiza o conteúdo dinamicamente sem recarregar a página inteira. Recomendada para aplicações interativas e fluidas, como painéis de controle e aplicativos de email.
5. Multi-Page Application A cada requisição, uma nova página é devolvida pelo servidor. Ideal para aplicações dinâmicas que precisam do conteúdo disponível no carregamento da mesma.
6. Micro Front-Ends Divide o front-end em pequenos, independentes e gerenciáveis micro aplicativos front-end. Útil em equipes de onde diferentes módulos precisam ser desenvolvidos em paralelo.
7. Progressive Web Apps Aplicações web que oferecem experiência semelhante a de uma aplicação nativo. Bom para soluções que desejam melhorar a retenção do usuário com suporte offline, notificações, etc.
8. JAMStack Baseia-se em JavaScript, APIs e Markup pré-renderizado para entrega rápida de conteúdo. Indicado para applicações que visam alta performance e segurança. J A M
9. Atomic Design Define a criação de componentes fundamentais e os combina para criar estruturas mais complexas Promove consistência, escalabilidade e produtividade, e é Indicado para criação de Design Systems.
10. Responsive Design A interface se adapta ao layout do dispositivo, melhorando a usabilidade e busca de informações Ideal para alcançar maior público e ganhar pontos de SEO
11. Headless Components Componentes que não possuem uma UI, mas fornecem funcionalidades específicas Ideal para criar bibliotecas de componentes. É uma proposta frameworkless.
12. Gerenciamento de Estados em Aplicações Front-End Modernas
13. 🔗 redux-toolkit.js.org 🔗 xstate.js.org 🔗 jotai.org 🔗 mobx.js.org 🔗 recoiljs.org 🔗 github.com/pmndrs/zustand 🔗 valtio.pmnd.rs 🔗 rematchjs.org
15. Renderizando Aplicações Front-End Modernas
16. Client-side Rendering CSR Server-side Rendering SSR Static Site Generation SSG Incremental Static Regeneration ISR
17. Islands Resumability Streamed HTML Partial Prerendering
18. Segurança de Aplicações Front-End Modernas
19. 🔗 web.dev/csp Content Security Policies Header HTTP que auxilia na proteção contra ataques de code injection como XSS, Clickjacking, etc
20. 🔗 owasp.org/www-project-top-ten OWASP Top 10 Relatório com os 10 principais riscos de segurança em aplicações web Ótimo ponto de partida para se conhecer os tipos de vulnerabilidades que uma aplicação front-end pode ter
21. Mozilla Observatory 🔗 observatory.mozilla.org Ferramenta que avalia o nível de risco e vulnerabilidades de segurança de aplicações Possui linguagem humanizada e didática dos aspectos inseguros da uma aplicação
22. JS Membranes Barreiras que controlam como diferentes partes do código interagem entre si No JavaScript é um padrão implementado através do objeto Proxy, ou bibliotecas como a es-membranes 🔗 github.com/privacycg/js-membranes
23. Padrões Web para Aplicações Front-End Modernas
24. Baseline Auxilia a divulgação e adoção de novas funcionalidades dos browsers Estar em conformidade com a Baseline ajuda evitar surpresas imprevistas nas suas aplicações. 🔗 web.dev/baseline
25. WCAG Padrões técnicos desenvolvidos para tornar a web mais acessível para todos os usuários. Hoje na versão 2.2, a WCAG 3 está em desenvolvimento e promete ser mais abrangente e fácil de entender 🔗 w3.org/TR/WCAG22
26. Transitions View API Especificação que permite criar transições visuais entre um documento e outro. "Simula" SPA num contexto MPA 🔗 mdn.io/transitions-view-api
27. Estilização de Aplicações Front-End Modernas
28. Subgrid Scoped Styles Aspect Ratio sv*, lv*, dv* gap Two-Value Display Nesting accent-color Container Queries Logical Properties :nth-child(Y of X) @starting-style
29. Class Variance Authority 🔗 cva.style 🎨 CSS Houdini CSS in JS Zero Runtime CSS 🔗 designtokens.org Design Tokens
30. stitches.dev linaria.dev goober.js.org storybook.js.org tailwindcss.com purecss.io radix-ui.com tokencss.com emotion.sh
31. Observabilidade em Aplicações Front-End Modernas
32. 🔗 opentelemetry.io 🔗 web.dev/vitals 🔗 vercel.com/docs/observability 🔗 grafana.com/oss/faro
33. 🔗 betomuniz.com/blog/introducao-a-observabilidade-front-end
34. The Web is Awesome!
35. One more thing…
36. Testando Aplicações Front-End Modernas
37. Cross-platform Funcional Desempenho Segurança Acessibilidade Integração Carga UI Cross-browser Usabilidade Sistema Carregamento
38. jestjs.io playwright.dev testing-library.com 🧰 pptr.dev mswjs.io cypress.io
39. Validação de Formulários em Aplicações Front-End Modernas
40. zod.dev docs.superstructjs.org joi.dev 🧰 https://github.com/jquense/yup Yup react-hook-form.com formik.org
41. Desempenho de Aplicações Front-End Modernas
42. RAIL Model web.dev/rail PRPL Pattern patterns.dev/vanilla/prpl HTTP/3 pagespeedchecklist.com/resource-hints Resource Hints
43. Inteligência Artificial e Aplicações Front-End Modernas
44. WebGPU API Web API que dá acesso a GPU para acelerar processamentos complexos diretamente no navegador Recomendada para aplicações de IA/ML ou gráficos 3D na web 🔗 webgpufundamentals.org
45. web-llm Permite integrar modelos de linguagem no navegador através da WebGPU sem necessidade de servidores Ideal para assistentes de IA com focam privacidade e redução de custos, aproveitando o processamento do cliente 🔗 github.com/mlc-ai/web-llm
46. diffusers.js Biblioteca JS que permite executar modelos de difusão em GPU/ WebGPU direto do navegador 🔗 islamov.ai/diffusers.js
47. v0 AI Generativa desenvolvida pela Vercel que cria código React compatível com Shadcn UI com base em prompts de texto Simplifica a prototipagem de Front-End 🔗 v0.dev
48. Tensorflow.js Biblioteca JS otimizada para desenvolver e executar aprendizado de maquina diretamente pelo navegador 🔗 tensorflow.org/js
49. Web Neural Network API Web API que permite aceleração de redes neurais em aplicações web, utilizando hardware local como GPUs e CPUs 🔗 webmachinelearning.github.io Permite experiências através de IA que usam o hardware do usuário para reduzir a latência de processos, privacidade e diminuir custos
50. Open UI brings clarity to information about browser support for web platform features. By aligning with Baseline, there should be no surprises when testing your site open-ui.org
51. Project Fugu an effort to close gaps in the web's capabilities enabling new classes of applications to run on the web Reaching parity with native developer.chrome.com/fugu-showcase
52. Always Bet on Web Platform
53. OBRIGADO!!!! @obetomuniz