¿Cómo funcionan las aplicaciones colaborativas en tiempo real?

El otro día estaba haciendo pair-programming con un compañero del trabajo.

Estabamos en una llamada de Google meet resolviendo un problema y decidimos compartir una sesión en VSCode utlizando Live Share.

Esta extensión te permite crear una sesión colaborativa en tiempo real para que dos o más personas puedan trabajar en el mismo proyecto.

Es básicamente Google docs, pero para programar 😂.

Y entonces me pregunté, ¿Cómo funciona este sistema?

No es tan sencillo como parece.

Al principio pensé que era obvio, es una conexión vía web sockets que le permite a los clientes estar escuchando diferentes eventos en tiempo real para así actualizar la información del documento.

Pero la solución no es tan trivial.

Hay diferentes problemas, pero el más crítico es la resolución de conflictos. Si dos o más usuarios modifican el mismo texto al mismo tiempo debemos decidir cual es la versión que queremos utilizar y esto no es óptimo para la experiencia del usuario.

Ahí es donde entra el algoritmo del que voy a contarte hoy: Operational Transform.

Operational Transform (OT)

Nació precisamente para esto, para la colaboración en tiempo real en aplicaciones.

Su objetivo principal es asegurar que varias personas puedan editar un documento de manera simultánea evitando los conflictos o problemas en los cambios que estos hacen.

Y la forma en la que funciona es curiosa.

Cada cliente conectado al documento va a tener una copia local del mismo en el que va a hacer sus operaciones.

¿Qué es una operación? Las ediciones en el documento se representan así. Una operación puede ser tan simple como insertar un carácter o tan compleja como borrar una sección de texto.

Esta es la primera parte del algoritmo, luego vamos a tener 👇🏻👇🏻

2.- Historial de operaciones: Cada cliente que colabora en el documento mantiene un historial de las operaciones que ha realizado. Esto es una lista de los cambios que ha hecho.

3.- Envío y recepción: Cuando un cliente hace una edición, envía su operación a todos los demás clientes conectados.

4.- Transformación: Antes de aplicar la operación recibida de otro cliente, se realiza una transformación en esa operación. Esto significa que se ajusta o modifica la operación para que sea coherente con las operaciones realizadas localmente por el cliente que la recibe. Esto ayuda a evitar conflictos.

5.- Aplicación de operaciones: Una vez que las operaciones se han transformado adecuadamente, se aplican en el orden correcto a cada copia del documento en los diferentes clientes. Esto asegura que todos vean el mismo resultado final.

Seguramente hasta ahora lo que entendiste fue “bla bla bla” 😂, vamos con un diagrama mejor

En esta primera parte del diagrama vamos a tener un documento con un simple texto que dice “CA”.

Y se van a conectar dos usuarios, el Usuario 1 sería el verde y el Usuario 2 sería el naranja. Perfecto hasta aquí.

Ahora imagina que el Usuario 1 escribe la letra “T” al final de la palabra “CA”, el resultado sería “CAT” no? Perfecto.

Y en paralelo, al otro lado del mundo, el Usuario 2 escribe la letra “T” al final de la palabra “CA”, y sustituye la letra C por la H, pero recuerda que toda modificación en el documento es una operación entonces sería primero eliminó la letra “C” y luego insertó la letra “H”.

Hasta este momento ninguno de los usuarios pueden ver cuales son las operaciones que realizaron las otras personas, es decir que no están sincronizados.

Entonces la segunda parte del diagrama 👇🏻

Para el Usuario 1, su operación local fue colocar la letra “T” al final de la palabra “CA” para dar como resultado “CAT”, pero resulta que hay una operación de cambio entrante que viene del Usuario 2.

Qué va a pasar para el Usuario 1? Bueno, como él escribió “CAT” y luego el Usuario 2 modificó la palabra y escribió HAT, ese va a ser su resultado final.

Y algo parecido va a pasar con el Usuario 2.

Esta persona escribió “HAT” con las operaciones que te dije antes, pero esas operaciones fueron realizadas sobre la palabra “CA”, porque recuerda que te dije que los usuarios no estaban sincronizados.

Por eso es que este usuario va a recibir primero las operaciones del Usuario 1, resultando así en la palabra “CAT” y por último, el algoritmo es lo suficientemente inteligente primero para saber que ya la letra “T” está al final de la palabra, entonces no la va a agregar de nuevo, y luego va a aplicar la modificación para cambiar la letra “C” por la “H” resultando así en “HAT”.

Así es como se sincronizan los cambios.

Todos los clientes van a recibir las operaciones de los demás, entonces el algoritmo va a calcular y a transformar el texto para que todos estén sincronizados.

Una locura no? 🤯

Para finalizar

Implementar Operational Transform es algo en realidad muy complejo y que toma mucho tiempo de entender y si no me crees, Joseph Gentle (Creador de Google Wave y de Share.js librería de Operational Transform) decía:

Recursos gratuitos

• Descubre cuales son las Startups y side-projects que están haciendo dinero con Startups.fyi. (Sirve como inspiración para tu próximo proyecto).

• Infinidad proyectos de ejemplo construidos con Docker: Docker awesome.

• Una API para enviar emails que está dando mucho de que hablar: Plunk.

• Entiende los patrones de diseño con ejemplos sencillos: Design Patterns.

• Para tu próxima entrevista de Node.js: Event Loop animado.

3 Noticias para ti

• 🤯 Bun ya está en su versión v1.0 y Node.js tiembla por su existencia

• 🤔 Google está creando una IA para escribir noticias

• 😮 ¿La tecnología nos hace menos productivos?

Nos vemos en la edición #3

Si llegaste hasta aquí, seguramente te duele el cerebro.

Perdón por tanta información, pero me pareció fascinante compartir este algoritmo contigo.

Es algo que utilizamos a menudo sin darnos cuenta y por detrás hay mucha ingeniería funcionando.

Nos vemos en la edición #3 🤓.

Recuerda que si quieres hablar de algo en particular puedes sugerir el tema respondiendo este correo.

Hasta pronto, Nicolás Leal.