CursosEmpresasBlogLiveConfPrecios

¿Qué es la Arquitectura en el Frontend?

Clase 2 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
    Herald Flores

    Herald Flores

    student•
    hace 3 años

    Notas:

    Arquitectura: es la estructura fundamental de una aplicación, se define en base a un conjunto de decisiones que se toman al inicio y durante el desarrollo de un proyecto. Se conforma una serie de patrones, reglas y buenas prácticas que guían el desarrollo de la aplicación.

    La implementación de una arquitectura de software no es inmutable, pero puede ser difícil de cambiar sobre la marcha del proyecto. Se debe tener en cuenta los pros y los contras de está implementación, tomando decisiones de forma consciente y de la mejor manera.

    Objetivos:

    • Pautas para desarrollar e iterar sobre la app, iniciando el desarrollo lo más pronto posible y de manera segura.
    • Mantenible en el tiempo, fácil de entender y extender.
    • Flexible y adaptable a los cambios.
    • Escalable
    • Fácil de testear, test automáticos
    • Fácil de desplegar
    • Fácil de aprender, que sea conocida por las comunidades.
      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Brutal! Muchas gracias por ese resumen!

      Marcos Monteverde

      Marcos Monteverde

      student•
      hace 3 años

      gracias

    cesar fernandez

    cesar fernandez

    student•
    hace 3 años

    Bro, eres un grande, siempre tu contenido en el formato que sea y en tus diferentes plataformas es lo maximo!! Siempre atento a tu contenido!! Espero pronto subas la biblia de react actualizado con mejores practicas, tips, y ese contenido de calidad que siempre aportas!! exitos... y como siempre gracias bro!!

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Muchas gracias, Cesar!!! :)

      Josue Jonathan Diaz Perez

      Josue Jonathan Diaz Perez

      student•
      hace 2 años

      Es que neta, es Man de Miguel Ángel es una maravilla

    Eliaser Alejandro Concha Sepúlveda

    Eliaser Alejandro Concha Sepúlveda

    student•
    hace 3 años

    ¿Qué es una arquitectura?

    La arquitectura corresponde a la estructura fundamental de nuestra aplicación, se define en base a un conjunto de decisiones se conforman una serie de patrones, reglas y buenas prácticas para guiar nuestro desarrollo. Estas decisiones aunque pueden ser inmutables, suelen ser difíciles de cambiar una vez que el proyecto está en marcha.

    Entre los objetivos de una arquitectura frontend están:

    • Ofrecer pautas para desarrollar e iterar sobre nuestra aplicación de la manera más rápida posible.
    • Mantener la aplicación a lo largo del tiempo, es decir, fácil de entender y de extender.
    • Es importante disponer de una arquitectura que sea flexible y adaptable a los distintos cambios a través del tiempo.
    • Escalable, es decir, que se puedan incluir nuevos desarrolladores sin perder la coherencia del código. Que se puedan incorporar nuevas funcionalidades, sin que la aplicación se vuelva inmantenible. Entre otros casos.
    • Fácil de testear. Esto quiere decir que debemos probar nuestro código de manera sencilla y sin tener que hacerlo de forma manual, es decir, de forma automatizada.
    • Fácil de desplegar.
    • Ahorrar costes en el desarrollo y mantenimiento de la aplicación.
    • Fácil de aprender para otros desarrolladores y/o talentos.

    Una arquitectura de software es una guía para el desarrollo y mantener la coherencia para construir una aplicación que cumple con los objetivos definidos.

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      ¡Gracias por ponerlo en palabras! :)

    Omar Noel Rodríguez Ocampo

    Omar Noel Rodríguez Ocampo

    student•
    hace 3 años

    Una arquitectura de software no es una receta mágica... no es una herramienta que te va a permitir construir una aplicación perfecta... la perfección en el software no existe

    Entendido y anotado✨

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Y punto.

    Juan Camilo Moreno

    Juan Camilo Moreno

    student•
    hace 3 meses

    La arquitectura en el frontend se refiere a la estructura y organización de los componentes y las tecnologías utilizadas para desarrollar aplicaciones web. Incluye decisiones sobre frameworks, patrones de diseño, manejo del estado, y cómo los diferentes elementos interactúan entre sí. Una buena arquitectura facilita la escalabilidad, el mantenimiento y la colaboración en equipo. En el desarrollo moderno, se consideran enfoques como microfrontends y patrones como el Backend for Frontend (BFF), que ayudan a optimizar la experiencia del usuario y la eficiencia del desarrollo.

    Josué Alfredo Tomas Machaca Fajardo

    Josué Alfredo Tomas Machaca Fajardo

    student•
    hace 3 años

    Si antes mucha de la inteligencia de negocio vivía en el backend, ahora vive en el frontend

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      O en ambos sitios. Lo más interesante es incluso poder compartir la misma lógica entre los dos.

    Jesús Leon

    Jesús Leon

    student•
    hace 2 años

    ¿Qué es la Arquitectura en el Frontend? Es una Guía para ayudarte en el Desarrollo, para mantener una coherencia y que te va a ayudar a construir una aplicación que cumpla con los objetivos que te has marcado.

    Juan José Jaramillo Cajamarca

    Juan José Jaramillo Cajamarca

    student•
    hace 3 años

    Hola midu! Excelente introducción, eres un gran profesor!

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Gracias, Juan José!!!

    Carlos Mauro Cárdenas Fernández

    Carlos Mauro Cárdenas Fernández

    student•
    hace 3 años

    ta bueno

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      🤗 Gracias, Carlos!

    Johan Sebastian

    Johan Sebastian

    student•
    hace 3 meses

    Arquitectura

    Estructura fundamental de nuestra aplicación, en base a un conjunto de decisiones que tomamos al inicio y durante el proyecto.

    Jorge Arias Argüelles

    Jorge Arias Argüelles

    student•
    hace 7 meses

    La arquitectura en el frontend se refiere a la estructura y organización de una aplicación web en la parte del cliente. Implica decisiones sobre cómo se organizarán los componentes, cómo se gestionará el estado, la interacción con el servidor y la forma en que los datos fluyen a través de la aplicación. Un buen diseño arquitectónico facilita la escalabilidad, mantenibilidad y rendimiento de la aplicación. Además, se deben considerar patrones de diseño y frameworks que se adapten a las necesidades del proyecto, como los microfrontends, que permiten dividir la interfaz en componentes independientes.

    Jonathan Blanco Hernandez

    Jonathan Blanco Hernandez

    student•
    hace 3 años

    Grande Midu!!

    Elias Giannantonio

    Elias Giannantonio

    student•
    hace 3 años

    Miguel Angel, Midu, eres un crack, tu manera de explicar es excelente en cada medio en el que veo tu contenido. Te mando saludos desde Argentina.

    Marcos Monteverde

    Marcos Monteverde

    student•
    hace 3 años

    hoy la lógica también vive en el frontend

    Jose Barboza

    Jose Barboza

    student•
    hace 3 años

    La arquitetura la estructura fundamental de nuestra aplicación en base de un conjunto de decisiones que se toman al inicio y durante el proyecto conformamos patrones y buenas practicas que nos guiaran durante el desarrollo.

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