Paradigma declaratiu

En la programació imperativa, el canvi està associat al flux d'execució i l'operador assignació. És una definició operacional.

La programació declarativa es basa en la definició conceptual, es defineixen relacions atemporals.

La programació reactiva es basa en el paradigma declaratiu: les nostres sortides es descriuen declarativament en funció de les nostres entrades. Això les permetrà reaccionar als canvis que es produiran a les entrades al llarg del temps.

Si utilitzem programació basada en esdeveniments, podem associar un listener als canvis (esdeveniments) produïts a les entrades. Llavors, es poden modificar les sortides. Reactivament, canviem el concepte per una relació "el seu valor depèn de" de les sortides cap a les entrades. Conceptualment, podem imaginar que una sortida és listener de totes les entrades de què depèn, i que actualitza el seu valor cada cop que es crida.

El funcionament reactiu executa un programa es produeix en dues fases:

  1. Inicialització: construir un graf dirigit de dependències
  2. Execució: els valors entren i produeixen canvis a les sortides És similar a com funciona una GUI: primer es construeixen els widgets i després el bucle d'esdeveniment els processa.

Gestió de l'estat

La UI (vista) és el resultat de dibuixar una representació de les dades. La gestió de l'estat inclou com representar aquestes dades i gestionar els seus canvis. La relació entre UI i estat és:

UI = fn(estat)

D'això se'n diu UI basada en l'estat. Per explicar com es produeixen els canvis que un usuari produeix sobre l'estat, cal introduir el concepte d'acció:

En aquest esquema es diu que l'estat és un observable, i que l'UI és un observador dels canvis que es produeixen en l'estat. Els observadors es subscriuen als observables, i seran notificats per ells quan hi hagi canvis.

Per tant, l'UI no canvia directament l'estat, li cal passar un missatge (acció) que encapsula el canvi d'estat. Un canvi d'estat fa que tots els seus observadors siguin notificats. L'UI és el principal subscriptor, i quan se li notifica d'un canvi d'estat (observables) torna a renderitzar-se per a reflectir-ho.

Efectes secundaris

Algunes operacions no tenen un efecte directe sobre la UI. Per exemple: obtenir dades d'un servidor, guardar-les, executar alguna tasca periòdica, etc. Aquestes són operacions externes no associades a l'UI, i les diem efectes secundaris o side effects.

Web reactiva

Les interfícies (o sortides) reaccionen als canvis que es produeixen a les seves dependències (o entrades). Són observadors. El paradigma reactiu ens permet oblidar-nos de com i quan es tornarà a redibuixar la UI. D'això s'encarrega la llibreria, que detecta els canvis a realitzar al DOM i els aplica.

La relació entre entrada i sortida és declarativa, i s'implementa de diferents formes segons la llibreria o framework. Habitualment tenim un cert estat (entrades) i un markup (sortides) que el referencia.

Les operacions bàsiques essencials d'un framework reactiu són:

  • Definició d'estats (observables).
  • Definició d'UI (observador) a partir dels estats (observables).
  • Definició de side-effect handlers (observador).
  • Modificació d'un estat a partir d'un esdeveniment UI o un side-effect.
  • Creació d'un observable computat a partir d'altres observables (optimització).