Visão Geral

Este curso apresenta uma abordagem moderna e escalável para construção de aplicações frontend em larga escala utilizando Micro Frontends com React JS. Você aprenderá como dividir interfaces em módulos independentes, integrar times trabalhando em paralelo e entregar produtos mais robustos, organizados e preparados para crescer.

Objetivo

Após realizar este curso, você será capaz de:

• Projetar, estruturar e implementar aplicações usando Micro Frontends
• Integrar React com Module Federation (Webpack 5)
• Configurar build, deploy e comunicação entre aplicações independentes
• Criar pipelines de entrega independentes por time/componente
• Escalar uma aplicação complexa com segurança e governança

Publico Alvo

• Desenvolvedores React iniciando no ecossistema de Micro Frontends
• Engenheiros front-end que desejam trabalhar com arquiteturas escaláveis
• Times de produto que precisam organizar aplicações grandes
• Profissionais mirando vagas Pleno/Sênior ou Enterprise

Pre-Requisitos

• React JS intermediário
• Conhecimento básico de Webpack ou Vite
• JavaScript moderno (ES6+)
• Noções de arquitetura de software

Conteúdo Programatico

Module 1 — Introduction to Micro Frontends

1. What are Micro Frontends?
2. Benefits and challenges of distributed front-end architecture
3. Differences between monolith vs. micro frontend
4. Real-world use cases in enterprise environments

Module 2 — Architectural Concepts

1. Domain-driven front-end architecture
2. Vertical vs. horizontal slicing
3. Independent deployment and versioning strategy
4. Shared libraries and dependency governance

Module 3 — Module Federation (Webpack 5) Fundamentals

1. How Module Federation works
2. Host and Remote applications
3. Dynamic vs. static remotes
4. Sharing modules between projects

Module 4 — Setting Up a React Micro Frontend Project

1. Initial folder structure
2. Configuring Module Federation in React
3. Creating a shell application
4. Exposing and consuming React components from remotes

Module 5 — Communication Between Micro Frontends

1. Cross-application state management patterns
2. Event emitter architecture
3. Pub/sub messaging
4. URL-based communication
5. Shared state vs. isolated state

Module 6 — Styling Strategies

1. Global styles isolation
2. CSS-in-JS in a micro-frontend architecture
3. Sharing design systems safely
4. Avoiding style collisions

Module 7 — Routing in a Distributed Front-end

1. Single-spa vs. module federation routing
2. Cross-application navigation
3. Authentication and protected routes

Module 8 — Building, Deploying and Scaling

1. Build process for micro frontends
2. CI/CD pipelines per micro app
3. Versioning and rollback strategies
4. Monitoring, observability and error tracking

Module 9 — Real-world Case Study

1. Designing a multi-team dashboard
2. Implementation of 3 micro apps + shell
3. Communication patterns
4. Deployment on cloud (Vercel, Netlify ou S3 + CloudFront)

Module 10 — Best Practices & Anti-patterns

1. When NOT to use micro frontends
2. Common pitfalls in module federation
3. Governance for large teams
4. Checklist for production readiness