Aplicaciones web en tiempo real con casi ningún JavaScript

Se puede desarrollar una aplicación web en tiempo real con muy poco código JavaScript. Esto se logra mediante el uso de HTML sobre WebSockets, un patrón que permite al servidor enviar HTML ya renderizado al cliente, en lugar de enviar JSON y dejar que el navegador lo interprete.

El patrón de HTML sobre WebSockets se basa en la idea de que el servidor envía el HTML ya construido al cliente, que simplemente lo coloca en el lugar correcto. Esto significa que toda la lógica de renderizado se mantiene en el servidor, en un solo lenguaje, sin necesidad de contratos o API. Este enfoque se conoce como hypermedia o HTML sobre la red.

“El patrón de HTML sobre WebSockets se basa en la idea de que el servidor envía el HTML ya construido al cliente, que simplemente lo coloca en el lugar correcto”

Existen tres variantes de este patrón: sobre HTTP, sobre SSE y sobre WebSockets. La variante sobre WebSockets es la que permite una comunicación bidireccional y en tiempo real, lo que la hace ideal para aplicaciones web en tiempo real. Esto se logra mediante el uso de un canal permanente y bidireccional entre el servidor y el cliente.

El uso de HTML sobre WebSockets permite a los desarrolladores construir aplicaciones web en tiempo real con muy poco código JavaScript. El servidor se encarga de renderizar el HTML y enviarlo al cliente, que simplemente lo coloca en el lugar correcto. Esto reduce la complejidad del código del cliente y permite a los desarrolladores centrarse en la lógica del servidor.

El creador de Phoenix, Chris McCord, presentó este patrón en la conferencia ElixirConf 2019, donde construyó un clon de Twitter en tiempo real sin utilizar ningún framework de JavaScript. Desde entonces, este enfoque ha ganado popularidad y ha inspirado a otros desarrolladores a implementar soluciones similares en otros lenguajes. El uso de HTML sobre WebSockets permite a los desarrolladores mantenerse en el servidor y ser productivos, sin renunciar a las ventajas del frontend.