CursosEmpresasBlogLiveConfPrecios

Microfrontends: ¿qué son y cuándo usarlos?

Clase 12 de 15 • Audiocurso de Frameworks y Arquitecturas Frontend: Casos de Estudio

Clase anteriorSiguiente clase

Contenido del curso

Introducción
  • 1
    ¿Qué aprenderás en este curso?

    ¿Qué aprenderás en este curso?

    01:35
Arquitectura de Frontend: Conceptos
  • 2
    ¿Qué es la Arquitectura en el Frontend?

    ¿Qué es la Arquitectura en el Frontend?

    03:33
  • 3
    Patrones de arquitectura clásicos

    Patrones de arquitectura clásicos

    05:40
  • 4
    Clean Architecture en el Frontend

    Clean Architecture en el Frontend

    04:48
  • 5
    Screaming Architecture

    Screaming Architecture

    02:26
Frameworks
  • 6
    Tipos de renderizado: Server Side Rendering, Client Side Rendering y modos estáticos

    Tipos de renderizado: Server Side Rendering, Client Side Rendering y modos estáticos

    06:35
  • 7
    Next.js, Nuxt.js, Astro, Remix...

    Next.js, Nuxt.js, Astro, Remix...

    05:44
Más allá del código
  • 8
    Monorepositorios vs. Multirepositorios

    Monorepositorios vs. Multirepositorios

    14:00
  • 9
    Flujos de trabajo en Git para trabajar en equipo

    Flujos de trabajo en Git para trabajar en equipo

    16:23
  • 10
    Objetivo: crear una plataforma web

    Objetivo: crear una plataforma web

    04:28
Tendencias en la arquitectura
  • 11
    La mala fama de los monolitos

    La mala fama de los monolitos

    03:06
  • 12
    Microfrontends: ¿qué son y cuándo usarlos?

    Microfrontends: ¿qué son y cuándo usarlos?

    02:52
  • 13
    Backend for Frontend

    Backend for Frontend

    04:33
Síguientes pasos
  • 14
    ¿Cómo elegir mi arquitectura de frontend y framework?

    ¿Cómo elegir mi arquitectura de frontend y framework?

    04:00
  • 15
    ¿Y ahora por dónde sigo?

    ¿Y ahora por dónde sigo?

    02:25
    Giuliano De Leonardis

    Giuliano De Leonardis

    student•
    hace 3 años

    Microfrontends: ¿qué son y cuándo usarlos?

    Son una arquitectura de frontend que consiste en dividir la parte visual de una aplicación en pequeñas aplicaciones independientes.
    El objetivo de los microfrontends:

    • Desplegar más rápido
    • Reducir la incertidumbre al llevar cambios a producción
    • Que los equipos sean más autónomos \

    Reto

    • Lograr la comunicación entre los equipos
      Marcos Monteverde

      Marcos Monteverde

      student•
      hace 3 años

      gracias

    Juan José Jaramillo Cajamarca

    Juan José Jaramillo Cajamarca

    student•
    hace 3 años

    ¿Cuándo tendremos un curso de microfrontends en Platzi?

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Buena pregunta. :D

      Cayo Legal

      Cayo Legal

      student•
      hace un año

      x2

    Ivan Camilo Buitrago Buitrago

    Ivan Camilo Buitrago Buitrago

    student•
    hace 2 años

    Los microfrontends son una arquitectura de frontend que consiste en dividir la parte visual de una aplicación en pequeñas aplicaciones independientes.

    Objetivo de los microfrontends

    • Desplegar más rápido: Al tener componentes independientes, se pueden desplegar de manera más ágil y frecuente sin afectar al resto de la aplicación.
    • Reducir la incertidumbre al llevar cambios a producción: Al tener una división clara de responsabilidades, los cambios en un microfrontend no afectan al resto de la aplicación.
    • Que los equipos sean más autónomos: Cada equipo puede trabajar de manera independiente en su propio microfrontend sin depender de otros equipos.

    Reto

    El principal reto de los microfrontends es lograr la comunicación entre los equipos. Al tener una arquitectura distribuida, es importante establecer procesos y herramientas que permitan a los equipos colaborar de manera efectiva.

    Cuándo usar microfrontends

    Los microfrontends son una buena opción cuando:

    • La aplicación es lo suficientemente grande y compleja como para justificar una arquitectura distribuida.
    • Hay múltiples equipos trabajando en diferentes partes de la aplicación.
    • Se requiere una mayor agilidad y autonomía de los equipos.
    • La aplicación tiene una alta frecuencia de cambios.
    Roiner Hernandez

    Roiner Hernandez

    student•
    hace 3 años

    Tuve un caso donde trabajo que el lenguaje que estabamos usando un framework que no nos servia para solucionar el problema de manera eficiente, y usar un microfrontend nos ayudo muchisimo.

      Oriana Carolina Ailigo

      Oriana Carolina Ailigo

      student•
      hace 3 años

      hola como estas? como es que realizaste microfrontend?

      Miguel Cobas

      Miguel Cobas

      student•
      hace 10 meses

      Module federation es una muy buena opción para poder hacer microfrontends

    Francisco Serrato Jiménez

    Francisco Serrato Jiménez

    student•
    hace 3 años

    Micro-Frontend


    Es una arquitectura de desarrollo web moderna que nació en el 2016, con la cual podemos hacer aplicaciones altamente escalables y llevar la abstracción de código a otro nivel, ya no basando aplicaciones en módulos, ni componentes, si no en ++Microfrontends++ que no son mas que sub-aplicaciones web completamente autónomas, independientes y reutilizables, permitiéndonos también escalar de formas increíbles.

    • Angular https://platzi.com/ruta/web-angular/
    • React https://platzi.com/ruta/web-react/
    • Vue https://platzi.com/ruta/web-vue/ https://platzi.com/ruta/vue/
    • Svelte https://platzi.com/cursos/svelte/

    Irving Juárez

    Irving Juárez

    student•
    hace 3 años

    Los micro frontends también son recomendados para problemas de performance, ya que una SPA muy grande, trae sus problemas de rendimiento consigo. Entonces se puede separar el frontend en 2 o 3 aplicaciones más pequeñas, con tareas especificas para que mejore la experiencia de usuario, principalmente en el performance

    Alvaro Tobar

    Alvaro Tobar

    student•
    hace un año

    Hace poco intenté implementar Microfrontends en mi proyecto NextJS y no lo logré, si no estoy mal por las nuevas características de NextJS hace difícil este concepto, alguno ha logrado microfrontends en Next?

    Jorge Mizrain Aguilar

    Jorge Mizrain Aguilar

    student•
    hace 3 años

    Actualmente estoy trabajando en un sistema web construido en Angular. En total el sistema tendrá 21 módulos. Aplicaría para arquitectura microfrontends o cual sería el más ideal?

    Gracias de antemano.

    Alvaro Rafael Guete Puello

    Alvaro Rafael Guete Puello

    student•
    hace 7 meses

    Microfrontends dividen una app en partes independientes con su propio ciclo y tecnología. Son ideales cuando el proyecto es grande, con varios equipos o necesitas despliegues más ágiles.

    Alfredo Olmedo

    Alfredo Olmedo

    student•
    hace un año

    Solucion en los Microfronted con Docker, Docker Swarm o Kubernetes para Orquestación de contenedores

    Daniel Ramos

    Daniel Ramos

    student•
    hace 2 años

    Justo ahora en el seleccionado de no country estamos por seleccionar ir por microfrontends, será la primera vez que trabajo con esto 😅

    Segundo Juan

    Segundo Juan

    student•
    hace 3 años

    De que manera se integran? Se transforma un microfront en un componente embebible?

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads