Curso de Arquitectura Frontend

En este vídeo veremos de qué trata el curso de Arquitectura Frontend, los objetivos y el contenido que podrás encontrar en esta formación.

Ahora vamos a ver con mayor detalle cada uno de los bloques de este curso, presentando también la práctica que desarrollaremos a lo largo de la formación

Qué es la arquitectura, por qué la necesitamos, cómo debemos aplicarla sin caer en la sobreingeinería. Introducción de diversos modelos de arquitectura de software como Domain Driven Design o Arquitectura Hexagonal.

Explicamos las piezas en las que se compone el proyecto inicial del curso, junto con las herramientas, frameworks y librerías que se usan. El proyecto viene con una serie de herramientas ya configuradas como linters, pre commits, tests con Vitest y Playwright, así como dependencias como el framework NextJS, librerías de UI, etc. También se mostrarán la localización de los componentes del propio proyecto y los orígenes de datos.

En este vídeo veremos qué son los casos de uso, de dónde vienen y cómo definir un primer ejemplo de caso de uso. Veremos cómo a partir de un código de la aplicación inicial, que no tiene una arquitectura, podemos extraer los casos de uso y separarlos en clases, que tendrán sus propias definiciones de interfaces y tipos, que podremos definir aparte y usar a lo largo de la aplicación. También veremos cómo instanciar las clases de los casos de uso en un contenedor, que luego nos vendrá bien para aplicar otros principios de diseño de software.

Creación de nuevos casos de uso según la aplicación de ejemplo del curso. Veremos cómo desarrollar dos nuevos casos de uso, creando las distintas piezas de software que vimos en el anterior vídeo de curso.

En este vídeo veremos qué es CQRS y cómo dividir los casos de uso en dos tipos, los query y los command, implementando estos dos tipos de casos de uso y migrando los casos de uso genéricos a dos ejemplos de query y command.

Ahora vamos a hacer un rápido refactoring de varios tipos de la aplicación, conociendo algunas de las utilidades de definición de tipos de TypeScript, basando éstos en tipos ya definidos anteriormente.

Nos quedaba por migrar un caso de uso a query o command. Este caso de uso puede ser más confuso al escoger su tipo. Veremos los criterios que nos llevan a clasificarlo de una manera particular.

Para terminar el tema de los casos de uso veremos qué es el use case service, por qué lo queremos implementar así y las ventajas que nos ofrece. Realizaremos el refactoring para adaptar los casos de uso de la aplicación para que trabajen por medio de un use case service.

Una primera organización que podríamos pensar para nuestra arquitectura frontend sería organizar los archivos de Javascript por el tipo de módulo que son, creando carpetas de componentes, servicios, modelos, etc. Veremos cómo se haría y los puntos donde esta organización nos podrían dar problemas de mantenimiento.

En proyectos medianos o grandes, incluso en los más pequeños, nos vendrá mejor organizar los módulos de Javascript atendiendo a su funcionalidad, o lo que es lo mismo, el dominio en el que estemos trabajando. Esto nos aportará ventajas que explicaremos con detalle. Además veremos cómo organizar el proyecto de una manera más práctica.

En este vídeo vamos a ver la estrategia que podemos usar cuando un módulo se está haciendo demasiado grande y vemos que existe una necesidad de estructurarlo. Lo veremos implementado en nuestro proyecto, con una funcionalidad a modo de ejemplo.

Ya dependiendo del tipo de proyecto y del framework también podemos tener páginas, que probablemente se agrupan en carpetas distintas, si usamos un framework que tiene un sistema de routing basado en el sistema de archivos. En esos casos las páginas también es interesante que las podamos agrupar por el dominio, facilitando el mantenimiento, la reusabilidad y el trabajo en equipo.

Cómo encarar la arquitectura del CSS, creando un sistema de diseño que podamos usar a lo largo de la aplicación, incluso que podamos reutilizar en varios proyectos de la empresa.

Veremos el concepto de middleware, por qué es útil y luego mostraremos cómo se implementan dentro del proyecto del curso de arquitectura frontend.

En este vídeo veremos con detalle el patrón repositorio, con sus ventajas y cómo se aplica de manera práctica en una aplicación frontend.

Avanzamos en el uso de repositorios viendo otros asuntos relacionados con el diseño y la arquitectura del software.

Veremos qué son las capas concretando a qué se refiere, los tipos de arquitecturas de capas y conceptos relacionados, viendo cómo se aplica todo en la arquitectura frontend.