Clean Architecture en el Frontend

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

Clase anteriorSiguiente clase

Resumen

Descubre: ¿Qué es Clean Architecture?

Giuliano De Leonardis

student•

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

student•

Que buen resumen de la clase

Marcos Monteverde

student•

gracias

Jorge Blanco

student•

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

teacher•

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

student•

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

Victor Merino

student•

Un buen recurso donde aprender Clean Architecture en el Frontend?

Miguel Ángel Durán García

teacher•

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

student•

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

teacher•

Genial, Obed! Me alegro que te haya gustado!

Edgar Alfredo López Salero

student•

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

student•

Genial, es de mis favoritas!

Jorge Arias Argüelles

student•

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.

Clean Architecture en el Frontend

Introducción

¿Qué aprenderás en este curso?

Arquitectura de Frontend: Conceptos

¿Qué es la Arquitectura en el Frontend?

Patrones de arquitectura clásicos

Clean Architecture en el Frontend

Screaming Architecture

Frameworks

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

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

Más allá del código

Monorepositorios vs. Multirepositorios

Flujos de trabajo en Git para trabajar en equipo

Objetivo: crear una plataforma web

Tendencias en la arquitectura

La mala fama de los monolitos

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

Backend for Frontend

Síguientes pasos

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

¿Y ahora por dónde sigo?