Stateful Web
github.com/kaozdl
kaozdl@gmail.com
Acerca de mi
¿Que es un navegador web?
Los inicios de la web
Los primeros sitios web no eran experiencias interactivas.
Se escribían sitios en HTML directo que se navegaban a traves de links.
Server Side Rendering
Para permitir mas interactividad lenguajes como PHP podían integrarse en el código HTML, renderizando páginas "al vuelo" en función de los datos ingresados por los usuarios.
Con esto nacen las primeras aplicaciones web
La era JQuery
Javascript, un lenguaje inicialmente pensado para añadir algo de interactividad a los sitios, empezó a permitir el desarrollo de aplicaciones web que corrían en el lado del cliente, en lugar del servidor.
JQuery es un ejemplo muy popular de esto con su $.ajax()
La era de la SPA
Este estilo de aplicaciones se popularizo incluso mas con la aparición de las apis REST.
Nacieron muchos frameworks para crear este tipo de aplicaciones.
React, Vue y Angular son ejemplos populares de este tipo de frameworks.
Sin embargo las SPA presentan algunos problemas
Problemas de las SPA
- Se mandan muchos MB de JS al cliente
- El cliente necesita cargar mucho JS antes de poder funcionar
- Separación arbitraria en la capa de comunicación (front-end/back-end)
- Usualmente requiere mas desarrolladores
- El desarrollo de la capa de comunicación implica un tiempo extra.
La fatiga de JS
Estas herramientas son ampliamente usadas hoy dia, pero cuales realmente precisamos?
Stimulus es un framework pensado para mejorar la experiencia del HTML estático o renderizado en el servidor.
El HTML que "ya está ahí"
Esto se logra conectando objetos de JS con elementos del documento mediante anotaciones.
Es posible centralizar el estado de una aplicación web en el Backend, enviando al cliente sólamente las actualizaciones necesarias, logrando una performance similar a la nativa.
Chris McCord
La web también evolucionó
Websockets
-
La conexión con el servidor es permanente
-
El servidor puede mandar datos al cliente sin que este lo pida
-
El servidor es consciente del estado del cliente
Phoenix LiveView
¿En que consiste la idea?
- Usar una cantidad mínima de JS, solo para la comunicación
- La mayor parte del renderizado ocurre en el servidor
- Luego del renderizado inicial, el servidor indica los cambios y JS los aplica
Otros frameworks tomaron esta idea
Stimulus Reflex busca extender la capacidad de Rails y Stimulus, Interceptando las interacciones del HTML y enviándolas al servidor mediante web-sockets.
Estas interacciones son procesadas en el servidor mediante acciones "Reflexes" sin necesidad de recargar la página para observar un cambio.
Django-Sockpuppet
Pros
- Lógica de negocio centralizada en el servidor
- Menores tiempos de respuesta
- Menor carga del lado del cliente puede ayudar en dispositivos lentos (celulares)
- Los cambios se ven muy rápido
Contras
- Es muy facil incluir lógica en la capa de presentación
- Si la conexión se corta la app deja de funcionar
- Mayor carga del lado del server
- Puede requerir infraestructura adicional
- Requiere un cambio de paradigma
¿Que se puede hacer con esto?
Elixir Web Console
- https://elixirconsole.wyeworks.com/
Tune
- https://tune.fullyforged.com/
Text on Arrival
- https://textonarrival.com/