CursosEmpresasBlogLiveConfPrecios

Clean Architecture en el Frontend

Clase 4 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
Resumen

Descubre: ¿Qué es Clean Architecture?

    Giuliano De Leonardis

    Giuliano De Leonardis

    student•
    hace 3 años
    • Patrones de arquitectura: el objetivo es separar responsabilidades.

    Clean Architecture

    • Patrón de arquitectura clean architecture o arquitectura limpia: esta arquitectura también se basa en capas
      • Entidades: son los objetos de negocio. Por ejemplo, en Platzi las entidades podrían ser los cursos, los profesores, los estudiantes, etc.
      • Casos de uso: son las reglas de negocio. Por ejemplo, en Platzi podría ser las creación de un curso, que un estudiante se inscriba a un curso, mostrar las valoraciones de un curso, etc.
    • Las capas "entidades" y "casos de uso" son el núcleo que se encarga de la lógica de nuestro negocio. Es la forma en la que codificamos o describimos sómo se usa en el mundo real, y es lo que realmente marca la diferencia con otras aplicaciones y lo que le da el valor diferencial al usuario.
      • Adaptadores de interfaz: en esta capa se encuentran los controladores, los presentadores, lo modelos de vista. Acá podriamos tener todo el patrón MVC.
      • Bibliotecas de terceros: acá se encuentran los frameworks y drivers. Por ejemplo en Platzi podriamos tener la biblioteca de React, de Redux, la de React Router, etc. .
    • Todas estas capas se basan en una regla: nada, nada de una capa interior puede conocer nada de una capa exterior. Es decir, que la capa "entidades" no puede conocer nada de la capa "capas de uso". A esto se le llama "regla de la dependencia".
    • La "regla de la dependencia" es la base en la que se sustenta que una aplicación siga el patrón de clean architecture.

    Desventaja del clean architecture

    • Puede que la curva de aprendizaje sea muy pronunciada. Conseguir que todo el equipo sepa y entienda aplicar esta arquitectura no es una tarea fácil.
    • La separación de las capas es un trabajo manual. Requiere experiencia y es fácil confundir responsabilidades.
    • En general es un patrón que se aplica mejor a aplicaciones grandes.
    • La velocidad de desarrollo al principio sea más lenta

    Ventajas

    • Ayuda a estructurar el código y la navegación por el mismo.
    • Cambios en una capa no afectan a otras.
    • Poder crear tests que solo prueben, por ejemplo, la lógica del negocio
      Ana Rotela Cabrera

      Ana Rotela Cabrera

      student•
      hace 3 años

      Que buen resumen de la clase

      Marcos Monteverde

      Marcos Monteverde

      student•
      hace 3 años

      gracias

    Jorge Blanco

    Jorge Blanco

    student•
    hace 3 años

    angular trabaja con este patrón definitivamente lo malo es que la curva de aprendizaje es alta pero vale la pena

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Sí, la curva de aprendizaje es pronunciada... Normalmente lo es con todo aquello que queremos que sea escalable y mantenible en el tiempo. :D

      Diego Reyes Cabrera

      Diego Reyes Cabrera

      student•
      hace 3 años

      ¿Por eso es que dicen que Angular es más complicado de aprender? ¿O por cuales cosas más?

    Victor Merino

    Victor Merino

    student•
    hace 3 años

    Un buen recurso donde aprender Clean Architecture en el Frontend?

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Si no recuerdo mal, el libro Arquitectura limpia : guía para especialistas en la estructura y el diseño de software de Robert C. Martin está disponible en español y puede ser una buena iniciación.

    Obed Paz

    Obed Paz

    student•
    hace 3 años

    Excelente, me ha gustado mucho esta clase, super clara. En la empresa donde laboro usamos Clean Arquitecture con Angular para aplicaciones bastante grandes y complejas. Y usamos Screaming arquitecture orientada a Features con React para los sitios web corporativos.

      Miguel Ángel Durán García

      Miguel Ángel Durán García

      teacher•
      hace 3 años

      Genial, Obed! Me alegro que te haya gustado!

    Edgar Alfredo López Salero

    Edgar Alfredo López Salero

    student•
    hace 3 años

    Clean architecture esta basado en la separacion de capas, de manera analoga podriamos decir que es como un juguete matrioska, el cual son varios juguetes uno dentro de otro, el mas grande puede copar al mas pequeño, pero caso contrario eso no puede suceder. Asi seria una manera de entender la arquitectura basada en capaz, si alguno de los mas pequeños llega a necesitar saber de los grandes, aqui deberiamos utilizar la inversion de dependencias para poder comunicar la parte interna con la externa, dado a que este viene es por capaz.

    Félix Alejandro Zelaya Orellana

    Félix Alejandro Zelaya Orellana

    student•
    hace 3 años

    Genial, es de mis favoritas!

    Jorge Arias Argüelles

    Jorge Arias Argüelles

    student•
    hace 7 meses

    La capa que contiene las reglas específicas del negocio de una aplicación se llama "Capa de Dominio" o "Capa de Negocio". Esta capa es fundamental en la arquitectura de software, ya que encapsula la lógica que define cómo funcionan los procesos y las reglas dentro del sistema, además de interactuar con otras capas, como la capa de presentación y la de acceso a datos. Esto permite mantener una buena organización y separación de responsabilidades en el desarrollo de la aplicación.

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