Comenzamos una nueva sección dentro de Javascript, y se trata de lo que es la reactividad. Hay que comprender cual es el paradigma de la programación reactiva en Javascript, que en los últimos años, librerías como Angular, React, Polimer, Vue… han venido popularizando este paradigma de la programación reactiva y la programación orientada a los componentes, que es básicamente el stack actual que gracias a estas librerías trabajamos de manera profesional en el front.
En esta sección veremos como funcionan internamente estas librerías, para que cuando tengamos que trabajar con ellas, sepamos como se trabaja la reactividad.
Qué es la reactividad
La reactividad la vamos a ver principalmente en los datos de nuestra aplicación. La reactividad de los datos significa cuando una interfaz (sitio, aplicación…) se modifica, los cambios que vemos se modifican a partir de los cambios que tengan los datos que tengan la lógica de programación de dicho sitio o aplicación, lo que significa que cada vez que se actualizan los datos, la interfaz de usuario puede cambiar, mostrar o cargar nuevo contenido.
Estado
El estado es más que una forma de llamar a los datos de nuestra aplicación. Se le llama estado porque estamos hablando de un proceso reactivo, por lo que el estado tiene una duración de tiempo determinada, por eso decimos que el estado son los datos en un momento particular del flujo de nuestro sitio o aplicación, por ello escucharemos decir mucho a los programadores el estado actual de los datos de la aplicación.
Si estamos en una aplicación que nos pide hacer login, podría existir una variable dentro del estado que se llame logueado, que será true cuando el usuario haya ingresado sus datos y tenga permiso para acceder, o false cuando tengamos que registrarnos.
Interfaces de usuario basadas en el estado
Son aquellas que en base a los cambios que sufren los datos de la aplicación en cierto momento, ésta se va a renderizar en nuevos elementos de cualquier tipo. Estas interfaces, generalmente suelen dividirse en pequeños elementos a los que llamamos componentes. Es por ello que se suele hablar de una programación orientada a componentes, y para dar una definición de componentes, un componente es un patrón visual repetido que se puede resumir en un fragmento de código independiente HTML, CSS y que posiblemente tenga Javascript.
Cualquier framework frontend como puede ser Bootstrap, Fundation, Materialice CSS… los componentes que en su conjunto van formando esa interfaz de usuario, son fragmentos de HTML con CSS, por ejm, una tarjeta simplemente es código HTML con CSS, pero un carrusel de imágenes ya implica la programación Javascript.
Características que deben cumplir los elementos de interfaces de usuario
- Son un fragmento de la interfaz que cumplen una función única: por ejm un botón es un botón, una tarjeta es una tarjeta.
- Son reutilizables: utilizan el principio DRY(don´t repeat yourself).
- Son independientes tanto de su contexto como del resto de componentes, lo podemos aislar, extraer, y debería de seguir funcionando.
- Son autocontenidos: no filtran estilos, no filtran funcionalidad a otros componentes, los podemos abstraer de un proyecto, implementarlos en otro y tendrían que funcionar.
Una aplicación reactiva basada en componentes nos permitirá separar el código en elementos de interfaces independientes y que aparte podremos utilizar. Estas pueden estar aisladas o interactuar entre sí pero sin manejar cierta codependencia. Esto hace que evitemos apuntar o manipular directamente a los elementos del DOM que es como estamos acostumbrados a trabajar con Javascript. En lugar de estar apuntando, simplemente a través de esta reactividad hacemos que la aplicación reaccione a las acciones que el usuario desencadene con sus interacciones para que esta actualice el estado, y en base a los cambios, la interfaz se renderice y veamos los cambios tanto en el estado como en la parte visual, es decir, la interfaz basada en el estado.
En los siguientes capítulos veremos como podemos ir agregando poco a poco estos conceptos de estado, estado reactivo, generar un componente.