Curso Arquitectura Frontend Avanzada

Introducción y declaración de intenciones del curso de Arquitectura Frontend Avanzada.

En este vídeo vamos a ver los distintos bloques que tendrá el curso con un detalle más completo de las intenciones y objetivos.

Comenzaremos por abrir el proyecto del curso, Celestia, el planificador de viajes espaciales. Luego vamos a repasar los conceptos de Inyección de dependencias e Inversión de control. Explicaremos qué nos aportan estos principios y técnicas de diseño de software.

Librerías populares que implementan la inyección de dependencias en Javascript / TypeScript.

Para lo que nosotros necesitamos en nuestra aplicación podemos usar un contenedor de dependencias más sencillo, que podemos implementar desde cero mediante nuestro propio código. Veremos en este vídeo cómo hacerlo.

Ahora veremos cómo usar nuestro contenedor de dependencias y cómo actualizar la aplicación para basarnos en él.

Cómo mejorar el contenedor de dependencias y el tipado para mejorar la aplicación de nuestro patrón de inyección de dependencias.

Esta pieza nos permite usar los casos de uso abstrayéndose de la complejidad que hay detrás, el contenedor de dependencias y otras cosas.

Cómo mejorar la aplicación de casos de uso mediante un wrapper que básicamente lo realizaremos mediante un hook de React que nos permite abstraernos de tener que usar el getInstance del contenedor de dependencias y ejecutar el caso de uso. Es una pieza fina porque nos permite integrar el servicio de casos de uso con el código de negocio y que nos permitirá mejorar la arquitectura sensiblemente y dar pie a integrar de manera sencilla funcionalidades recurrrentes en el futuro.

Personalizaciones y reutilización. Mediante currificación podemos pasarle el contenedor para conseguir adaptar el sistema de casos de uso a cualquier tipo de aplicación. Además distinguimos entre core y shared-core para poder reutilizar partes de nuestra aplicación en otros proyectos.

Completamos el wrapper para los casos de uso con una nueva pieza "use-use-case" que nos permite usar los casos de uso de una manera más sencilla, robusta y testable.

Cómo puedo mandar objetos complejos de configuración de los casos de uso mediante una nueva pieza que vamos a llamar use case options y que nos dará pie a una completa versatilidad en nuestros middlewares.

En este vídeo vamos a realizar un middleware que permite reaccionar de una manera inmediata ante condiciones de success, mostrando en un toast un mensaje personalizado al usuario.

Vamos a desacoplar el middleware de success de los componentes de interfaz gráfica que usa mediante la aplicación de un event emitter.

Otro caso frecuente en las aplicaciones es la necesidad de mostrar mensajes de confirmación al usuario, por ejemplo antes de producirse una acción destructiva. Mediante un middleware podemos conseguir de una manera inmediata y extremadamente limpia que las acciones se puedan condicionar a la aceptación previa en un cuadro de diálogo emergente.

Vamos a ver qué nos ofrece Javascript para gestionar los errores y los tipos de error y cómo los vamos a tratar de manera general. Luego comenzaremos a aplicar esa gestión, adaptada a la arquitectura de nuestra aplicación.

Vamos a crear un tipo de error que sería el error de dominio, que podremos usar a lo largo de este y otros proyectos y que nos permite personalizar aspectos del tratamiento de errores como los códigos de error o los mensajes.

Ahora vamos a ver cómo se muestran los errores de manera conveniente a los usuarios, haciendo una gestión global de los errores y una gestión local si fuera necesario para errores más particulares.

Acabamos la sesión dedicada a la gestión de errores perfeccionando todavía más el sistema, aplicando nuevos tipos de error, como los errores HTTP y otras cuestiones.

Qué es el estado, qué necesitamos saber para comenzar a gestionar el estado de las aplicaciones frontend de una manera eficiente. Estado local y global. Librerías para gestionar estados. Diferencias entre el modelo SPA y las aplicaciones con Server Side Rendering. Cómo el SSR impacta en la gestión del estado.

Cómo llevar a código en nuestra aplicación la gestión del estado.

Estrategias diversas para la gestión del estado en las aplicaciones frontend, tanto el estado global como el estado local y otros tipos de estado.

Una primera aproximación al mundo de la IA con generalidades que está bien conocer y que aplican a nuestro trabajo diario con los distintos modelos y herramientas.

El contexto es uno de los principales elementos que debemos de cuidar en nuestras interacciones con las herramientas de IA. En este vídeo veremos cómo definir instrucciones primeramente para Junie, que es la IA de los IDEs de JetBrains. Luego explicaremos que cada desarrollador puede usar sus propios IDEs y agentes de IA, por lo tanto explicaremos las estrategias y prácticas que debemos tomar para compartir las mismas instrucciones de IA por todos los desarrolladores en cada proyecto.

Otras herramientas de IA que considera interesantes, Claude y Bolt. Veremos sus ventajas y desventajas, en qué áreas aplicar cada una.

Ahora vamos a abordar otra de las grandes herramientas que todo el mundo conoce, ChatGPT. Explicaremos en qué áreas nos puede venir bien y cómo sacarle partido. También conoceremos Mermaid que es una herramienta para crear documentación con diagramas y cómo integrarla en el proyecto y los README.

Además de agentes de IA y chats vamos a hablar también de herramientas de automatización, destacando n8n. Acabamos el recorrido a herramientas con V0 y por qué también puede sernos de utilidad.

Acabamos el curso con unas conclusiones que nos ayudarán a entender mejor todo el material expuesto a lo largo de las clases.