Saltar a contenido

Proyecto Reactivo

La programación reactiva es un enfoque moderno que ha transformado el desarrollo de aplicaciones móviles y web, especialmente en el contexto actual donde las aplicaciones híbridas —aquellas que combinan tecnologías web con acceso a funcionalidades nativas— se han vuelto cada vez más comunes. Este tipo de aplicaciones requieren un comportamiento altamente dinámico y adaptativo para ofrecer una experiencia de usuario fluida y coherente, sin importar el dispositivo o plataforma.

A diferencia del modelo tradicional, en el que el flujo de ejecución era secuencial y síncrono, la programación reactiva se basa en la gestión de flujos de datos y eventos en tiempo real, permitiendo que las aplicaciones respondan automáticamente a los cambios sin necesidad de una intervención manual constante. Este paradigma resulta especialmente útil en entornos híbridos, donde los datos pueden provenir tanto del servidor como de sensores, notificaciones del sistema operativo o interacciones del usuario. Con el crecimiento de la inteligencia artificial, la movilidad y la demanda de interfaces cada vez más reactivas, la adopción de esta forma de desarrollo se ha vuelto prácticamente indispensable para construir aplicaciones modernas, eficientes y escalables.

Una manera asíncrona de programar

La programación reactiva aborda esta necesidad al permitir que las aplicaciones se desarrollen de manera asíncrona. Esto significa que, en lugar de seguir una secuencia lineal de instrucciones, las aplicaciones reactivas están diseñadas para responder de manera inmediata a los eventos que ocurren en tiempo real. Esto se logra mediante el uso de flujos de datos y la propagación automática de los cambios en el sistema.

En términos más simples, la programación reactiva le permite a las aplicaciones responder de manera eficiente a los eventos, manteniendo tiempos de respuesta rápidos y una alta capacidad de adaptación. En lugar de esperar a que una solicitud se complete antes de pasar a la siguiente, las aplicaciones reactivas pueden procesar múltiples solicitudes simultáneamente, mejorando significativamente la eficiencia y la experiencia del usuario.

Características

La principales características que ofrece la programación reactiva, y por lo cual se está convirtiendo en tendencia, es que permite que los sistemas sean:

  • Responsivos: aseguran la calidad del servicio cumpliendo unos tiempos de respuesta establecidos. Además define límites en dichos tiempos de respuesta, de forma que los problemas pueden ser detectados rápidamente y tratados de forma efectiva
  • Resilientes: se mantienen responsivos incluso cuando se enfrentan a situaciones de error.
  • Elásticos: se mantienen responsivos incluso ante aumentos en la carga de trabajo.
  • Orientados a mensajes: minimizan el acoplamiento entre componentes al establecer interacciones basadas en el intercambio de mensajes de manera asíncrona. Afectando (de manera positiva) todo el sistema.

Aplicación Reactiva

Laravel Breeze: Introducción

Laravel Breeze lo definen en la documentación oficial como:

¿Qué es Laravel Breeze?

Laravel Breeze es una implementación mínima y simple de todas las funciones de autenticación de Laravel, incluido el inicio de sesión, el registro, el restablecimiento de contraseña, la verificación de correo electrónico y la confirmación de contraseña. La capa de vista predeterminada de Laravel Breeze se compone de vistas Blade simples diseñadas con Tailwind CSS.

Y en pocas palabras nos ofrece dos configuraciones a nivel del proyecto:

  1. Instalar y configurar Tailwind.css y Alpine.js.
  2. Instalar y configurar un sencillo esquema de autenticación, registrarse, recuperar la contraseña y middleware para el control de acceso.

Ventana registro con Breeze

Ventana registro con Breeze

Para instalarlo deberemos hacer uso de la línea de comandos artisan:

composer require laravel/breeze --dev

Y lo ejecutamos:

php artisan breeze:install

Durante la instalación te da la opción de poder instalar directamente React o Vue, pero de momento vamos a utilizar Blade con Alpine. Anotar que Tailwind.css (o las bases para entenderlo) se debería haber trabajado en el módulo de Diseño de Interfaces, mientras que React o Vue (o las bases para entenderlo) se deberían haber trabajado en el módulo de Desarrollo Web en Entorno Cliente. No hay que perder el enfoque que estamos diseñando un proyecto web y para ello nos hacen falta muchas tecnologías para poder desplegar la aplicación que hemos diseñado.

Es por ello que Breeze es una ayuda a la hora de implementar partes que de otro modo deberíamos hacer nosotros, además de realizar una serie de cambios visuales y de ficheros en nuestro proyecto.

Cambios tras la instalación de Breeze

Cambios tras la instalación de Breeze

Revisa tus rutas

Si has instalado Laravel Breeze una vez iniciado tu proyecto, revisa las rutas. Durante la instalación puede que se hayan borrado y es un buen momento de asegurarnos que todo funciona correctamente.

Actividades

  • 📝 AC 901. (RA9 / CE9a CE9b / IC1 / 3p) - Instala y configura Breeze en la aplicación de lista de tareas.

  • ⚓ AR 902. (RA9 / CE9a CE9b / IC1 / 3p) - Crea un proyecto de cero e instala Breeze. Documenta y comprueba todo lo que te ofrece.

  • 🔬 AP 903. (RA9 / CE9a C9b / IC1 / 5p) - Tu CTO necesita que instales y configures Breeze en el proyecto de e-commerce, además requiere que se implemente la pantalla de login y que una vez autenticado te muestre el listado de pedidos.

Si te falta algo...

Puede que durante la UT anterior te faltase implementar algún controlador, vista o modelo. Es el momento de hacerlo pues trabajaremos con ellos a lo largo de la unidad.