singulars/funcionalitats/wp-react.md

@@ -133,23 +133,37 @@ Un cop resolta la necessitat d'importacions condicionals de mòduls, i per tant,
 
 ### React Router
 
-**El frontend de l'oficina virtual de Som Connexió fa ús del paquet [React Router](https://reactrouter.com/en/main) per gestionar l'estat de visibilitat dels seus components. Aquest és un aspecte a controlar quan executem l'aplicació en l'entorn de WordPress ja que la gestio de URLs de WordPress colisiona amb la gestió que fa React**. Per tal de resoldre això, les versions empaquetades per a ser executades en l'entorn WP hauran de fer ús de la variant [HashRouter](https://reactrouter.com/en/main/router-components/hash-router). Aquesta modalitat de router treballa prenen el control sobre el compononent _hash_ de la URL. Una URL es pot dividir en 5 components:
+**El frontend de l'oficina virtual de Som Connexió fa ús del paquet [React Router](https://reactrouter.com/en/main) per gestionar l'estat de visibilitat dels seus components.**
+
+Aquest paquet permet l'enrutament del costat del navegador.
+
+A les pàgines webs tradicionals, el navegador demana un document al servidor, el descarrega i n'evalua el codi de presentació (CSS) i el d'aplicació (JavaScript), i finalment pinta el contingut (HTML) rebut. Quan l'usuari clica un enllaç, torna a començar tot el procés de nou per a una nova pàgina.
+
+L'enrutament a la banda del navegador permet a la nostra aplicació actualitzar la URL després que l'usuari faci clic sobre un enllaç sense haver de tornar a fer una petició al servidor en busca d'un nou document. En canvi, l'aplicació pot mostrar de forma immediata un nou contingut i fer una petició de dades al servidor per a actualitzar de forma dinàmica el contingut.
+
+Gràcies a aquesta funcionalitat, es millora l'experiència d'usuari reduint el temps de resposta del navegador estalviant la necessitat de carregar tot un nou document i la seva conseguent evaluació a cada navegació.
+
+**Aquest és un aspecte a controlar quan executem l'aplicació en l'entorn de WordPress ja que la gestio de URLs de WordPress colisiona amb la gestió que fa React**. Per una banda, WordPress utilitza el sistema tradicional d'enrutament gestionat desde la banda del servidor: Cada URL representa un recurs únic que el servidor resol i representa en forma d'HTML abans d'enviar-lo de tornada al navegador. React amb sistema d'enrutament, per la seva banda, pren forma d'aplicació JavaScript que es carrega un sol cop, i un cop actiu, pren el control de la URL, intercepta les navegacions, i interpeta els seus canvis com a canvis en el seu estat intern amb el que gestiona la visibilitat dels diferents components.
+
+Per tal de resoldre això, les versions empaquetades per a ser executades en l'entorn WP hauran de fer ús de la variant [HashRouter](https://reactrouter.com/en/main/router-components/hash-router). Aquesta modalitat de router treballa prenen el control sobre el compononent _hash_ de la URL. Una URL es pot dividir en 5 components:
 
     # https://somconnexio.coop/tarifes-internet?lng=ca#join
     # [protocol]://[origin]/[pathname]?[search]#[hash]
+    # ┌---------------------------------------┐┌---------┐
+    #                 WordPress                   React
     
-El sistema d'enrutament de WordPress treballa sobre els components _pathname_ i _search_, però no utilitza el _hash_. Per tal d'aconseguir que els sistema d'enrutament de WordPress i de React convisquin en un mateix context, s'ha de configurar React per treballar sobre el _hash_.
+El sistema d'enrutament de WordPress treballa sobre els components _pathname_ i _search_, però no utilitza el _hash_. Per tal d'aconseguir que els sistema d'enrutament de WordPress i de React convisquin en un mateix context, s'ha de configurar React per treballar sobre el _hash_. Els canvis en el _hash_ de la URL només seran detectats pel router de React i dispararan una navegació en la banda del navegador, els canvis a la resta de la URL dispararan una navegació clàssica que serà gestionada per WordPress.
 
 El resultat final serà que de les dues versions distribuibles, la pròpia de la oficina virtual configurarà el seu _router_ com un router de URL amb la totalitat de les rutes disponbiles a l'oficina virtual activades, i la versió per a incrustar a WP configurarà el _router_ com un ruter de hash sense rutes privades ni sistema d'autenticació.
 
 ### Configuració HTTP CORS de la API
 
-L'oficina virtual utilitza les comunicacións [ajax]() per alimentar de dades el _frontend_. Aquesta comunicació apunta a la REST API de l'oficina virtual implementada amb Djang, un framework de python. La API està exposada sota el domini [oficinavirtual.somconnexio.coop](https://oficinavirtual.somconnexio.coop), el mateix entorn on està exposat el codi frontend de la oficina virtual.
+L'oficina virtual utilitza les comunicacións [ajax](https://developer.mozilla.org/en-US/docs/Glossary/Ajax) per alimentar de dades el _frontend_. Aquesta comunicació apunta a la REST API de l'oficina virtual implementada amb [Django](https://www.djangoproject.com/), un framework de python per a desenvolupar servidors web. La API està exposada sota el domini [oficinavirtual.somconnexio.coop](https://oficinavirtual.somconnexio.coop), el mateix entorn on està exposat el codi _frontend_ de la oficina virtual. Quan l'usuari consulta la seva oficina virtual accedeix des del navegador al domini, carrega el codi JavaScript i aquest fa peticions de dades a la API que està sota el mateix domini.
 
-Quan la nostra aplicació s'executi en el context de WP el nostre codi de React s'estarà executant sota el domini de la pàgina web de SomConnexio, [somconnexio.coop](https://somconnexio.coop). D'això se'n deriven dos problemàtiques a tenir en conta:
+Quan la nostra aplicació s'executi en el context de WP el nostre codi de React s'estarà executant sota el domini de la pàgina web de SomConnexio, [somconnexio.coop](https://somconnexio.coop). Aquest fenòmen no es dona si l'aplicació s'incrusta a la web pública a través d'un _iframe_, ja que aquest, tot i que visualment es mostra integrat a la pàgina, internament funciona com un context web diferents, com si el codi que s'executa dins l'_iframe_ estigués en una pestanya independent en un domini diferent. D'aquest fet se'n deriven dos problemàtiques a tenir en conta:
 
-1. Configuració de React: En el procés de compilació de React s'injecten, via variables d'entorn, els valors de les URL de les que ha de disposar l'aplicació per accedir a les diferents APIs via connexions http així com gestionar redireccions entre pàgines. Per evitar problemes de links trencats quan l'aplicació s'executi en fora del seu context natural, s'ha de controlar que aquestes variables d'entorn estiguin definides de forma condicional en funció de l'entorn per al qual s'està transpilant el codi.
-2. Configuració de Django: Django disposa d'un arxiu de configuració on s'indica el domini al qual la nostra aplicació a de servir. Per defecte, qualsevol petició que no s'origini des d'aquest domini i arribi al procés de python és descartada. Haurem de fer alguns canvis en la configuració de Django perquè l'aplicació reconegui el domini [somconnexio.coop](https://somconnexio.coop) com un domini vàlid i permeti a React accedir a la REST API des d'aquest domini sense generar problemes de CORS (Cros Origin Resource Scripting).
+1. Configuració de React: En el procés de compilació de React s'injecten, via variables d'entorn, els valors de les URL de les que ha de disposar l'aplicació per accedir a les diferents APIs via connexions http així com gestionar redireccions entre pàgines. Per evitar problemes de links trencats quan l'aplicació s'executi fora del seu domini natural, s'ha de controlar que aquestes variables d'entorn estiguin definides ben definides i permetin a React gestionar bé l'enrutament i les peticions de dades entre els dos dominis.
+2. Configuració de Django: Django disposa d'un arxiu de configuració on s'indica el domini al qual la nostra aplicació a de servir. Per defecte, qualsevol petició que no s'origini des d'aquest domini i arribi al procés de python és descartada. Aquesta és la configuració per defecte i està dissenyada com a mesura de seguretat per evitar atacs des d'origens desconeguts. Haurem de fer alguns canvis en la configuració de Django perquè l'aplicació reconegui el domini [somconnexio.coop](https://somconnexio.coop) com un domini vàlid i permeti a React accedir a la REST API des d'aquest domini sense generar problemes de CORS (Cros Origin Resource Sharing).