Convex: Simplifying State Management

Mi nombre es Tom. Soy el jefe de experiencia de desarrollador en Convex. Esta es una especie de charla rápida. No hay mucho tiempo, así que voy a intentar cubrir al menos algo que encontré súper interesante. Personalmente, me encontré con Convex hace unos nueve meses. Y de alguna manera cambió mi vida de muchas maneras diferentes.

Uno, trabajo allí ahora. Pero dos, pasé muchos años simplemente construyendo. Me encanta construir. Construí muchas cosas arriba y abajo de la pila. Probé diferentes tecnologías.

Convex fue algo que encontré, y cuanto más profundizaba en ello, más aliviado me sentía de ya no tener que tomar tantas decisiones que me encuentro teniendo que tomar cada vez que quiero iniciar algo. Y estaba emocionado, y luego estaba... No estoy seguro de cuál era la emoción. Quería que más desarrolladores supieran que esto simplemente existe. Realmente era algo. Fue toda una experiencia para mí.

Y eso me llevó a investigar la empresa, contactar a los fundadores. Tuvimos un montón de conversaciones, y finalmente, estoy aquí ahora hablando contigo. Así que supongo que de alguna manera estoy cumpliendo esa visión que tenía.

Entonces, Convex es tu amigable motor de sincronización del vecindario. Voy a acelerar un poco con las cosas técnicas aquí. Tenemos toneladas de publicaciones en el blog sobre cómo funciona todo. Las partes técnicas son súper, súper interesantes.

Convex en sí es un motor de sincronización que incluye base de datos, almacenamiento de archivos, incrustaciones de vectores... Otras cosas que me faltan. Búsqueda de texto completo. Está escrito desde cero en 200,000 líneas de Rust. Está alojado en nuestra plataforma, que viene con un panel de administración, soporte para miembros del equipo, y datos de uso. Pero también es de código abierto. Así que si lo eliges, puedes autoalojarlo.

Entonces, en general, la forma en que funciona es que escribes tu código de Convex justo al lado del resto de tu código. En este ejemplo que veremos hoy, es React y TypeScript. Tenemos clientes para un montón de diferentes lenguajes. Pero lo pones todo en el mismo... Ni siquiera... NX es increíble. Si viste esa charla, ellos hacen gestión de monorepos. En este caso, no necesitas eso.

Simplemente viven juntos en perfecta armonía. La diferencia es que el código en tu carpeta de Convex se compila cada vez que presionas guardar. Se compila. Es TypeScript. Se compila y luego se despliega en tu instancia de Convex, de la cual cada proyecto tiene al menos dos. Hay una instancia de desarrollo, y luego hay una instancia de producción, con más redundancia. Tu aplicación web típica funciona como de costumbre. Y luego la parte de Convex de ella es esta base de datos y literalmente tu código que ha sido enviado allí que se ejecuta en un aislamiento V8 en la misma máquina que tus datos, lo que lo hace increíblemente rápido y efectivamente te absuelve de cualquier preocupación de caché.

Así que cuando un cliente, como un navegador web, accede a tu sitio, todo lo normal sucede y luego cualquier cosa relacionada con Convex, así que tus datos o tu gestión de estado, y llegaremos a eso, está conectado a tu despliegue de Convex a través de un web socket. También increíblemente rápido. Estoy seguro de que puedo hacer que las diapositivas estén disponibles.

Esto también está disponible a través de un muy buen artículo de blog por uno de nuestros cofundadores llamado How Convex Works. Esto se adentra en el lado del web socket de las cosas.

Así que esta es básicamente tu instancia. Esta es tu máquina que está funcionando. Hace un montón de cosas elegantes. Hay un ejecutor de funciones. Hay tres tipos de formas de realmente... Tres formas principales, debería decir, en las que interactúas con Convex. Y esas son a través de funciones. Y una función puede ser una acción, que es como un conjunto arbitrario de código que podrías usar para acceder a APIs de terceros. Eso también tiene acceso a tus datos y a tu base de datos según lo permitas. Acciones, consultas y mutaciones.

Consultas son justo lo que parecen. Mutaciones son cualquier cosa que escriba en la base de datos. Esos son los tres canales principales que realmente usarías para interactuar con Convex. Y luego tiene la base de datos y hace todo tipo de cosas geniales. Te estaba contando sobre la primera vez que experimenté Convex. Y mi pensamiento inmediato fue, como, santo cielo. Literalmente no necesito usar useState más. Cuando comencé a escribir este código, estaba como... Comencé a reemplazar todas mis instancias de useState con useQuery. Y useQuery es en realidad como este gancho de web socket activo a tus datos de Convex. Así que puedes almacenar lo que solía ser todo tu estado de aplicación local globalmente. Y es súper rápido. Hay un montón de optimizaciones, incluyendo actualizaciones optimistas y cosas así. Así que se siente... Quiero decir... Técnicamente es exactamente tan rápido o, ya sabes, exactamente como puedes ser. Y entonces estaba como... Bueno, voy a usar esto...

Voy a usar esto en todas partes. Ahora, lo uso en todas partes, excepto para las cosas más, como, mínimas de estado local. Pero incluso cosas como... ¿Está la barra lateral colapsada o no? Y ese es prácticamente el ejemplo más trivial de usar esto.

Tenemos clientes que han construido aplicaciones a gran escala con miles y decenas de miles de clientes en ellas. Así que esto es lo que quiero hacer. Con solo la mitad del tiempo restante para hablar de ello, quiero que vayas a este sitio web, dxinit. Vamos a verlo en acción. Así que si vas a... Puedes ir a dnx... Ahí vamos. Muy bien. Ya tenemos a algunas personas. Déjame ver si puedo duplicar la pantalla aquí. Debería funcionar decentemente en tu teléfono. CSS es... Quiero decir, me encanta. No soy tan bueno en ello. Pero aquí, lo que quiero mostrarte es... Así que hay un inicio de sesión anónimo justo aquí. Sin inicio de sesión. Te doy un nombre aleatorio falso. Si actualizas, serás una nueva persona. Hey. Eso es un poco profundo.

Aquí, tenemos los datos. Estamos viendo los datos llegar. Llegar, llegar. Podemos ver exactamente lo que está sucediendo. El dispositivo de todos va a mostrar lo mismo ahora.

Y si yo fuera a ser como... No sé. No sé sobre esta aplicación. Simplemente voy a eliminarla por completo. La aplicación de todos también se cerró. Oh, Ashley ha vuelto. Todos hemos vuelto.

Sync engine. Así que déjame mostrarte cómo funciona esto en nuestra aplicación de chat. Aquí tenemos un componente. Este es el componente de chat. Así que esto está haciendo la mayor parte de la vista de lista y el botón de enviar y la entrada y todo eso buen material. Y para listar los mensajes, simplemente usamos esto. Usamos esta llamada use query justo aquí. Y lo que use query está referenciando es API.messages.list. Ese es el nombre de una consulta muy simple que hemos escrito en nuestra carpeta convex. Y lo hemos hecho simplemente usando la función query. Esta no toma argumentos. Está leyendo los mensajes de la tabla en orden descendente, que por defecto es la fecha de creación. Y está tomando los primeros 200 de esos. Y así este código se compila y se ejecuta en tu implementación.

Cuando volvemos al componente aquí, use query se está conectando a eso a través de un WebSocket. Y así, cada vez que cualquiera de los datos subyacentes que serían devueltos por esa consulta cambian, cada cliente que está suscrito a eso, solo por esa línea, recibirá esas actualizaciones instantáneamente en tiempo real. Y lo mismo ocurre con las mutaciones. Así que para mostrarte una de estas mutaciones, aquí está la mutación send. Así que la usamos. Déjame mostrarte en el componente, en el lado de React, donde la estamos usando. Así que tenemos handle submit. Tenemos que prevenir el comportamiento por defecto. Y luego tenemos nuestro send message.

Y simplemente pasas los argumentos que has definido y que también están validados a lo largo de todo el proceso. Así que una de las cosas más hermosas de esto es que es type script de principio a fin. Así que tienes esta seguridad de tipos que cruza el abismo desde tu back end hasta tu front end y tus componentes. Y los IDEs están todos contentos. VS Code sabe lo que está pasando. Obtienes la finalización de tipos. Es muy satisfactorio. Es muy ergonómico. Me devolvió mucha alegría a la programación.

Así que aquí, lo estamos llamando con el cuerpo, el autor. Y luego estamos usando este hook llamado use mutation, que es, de nuevo, es una mutación, pero está conectada a tu instancia, al igual que cada otro cliente que está ejecutando tu código. Y va a llamar a esta función send con esos argumentos. Y así es como se ve. Quiero decir, es bastante sencillo. Tenemos una mutación, lo que significa que la estamos escribiendo. Hay algunas cosas graciosas aquí, sin embargo. Sarcasticize. Eso es genial. Add sparkles. Huh. Me pregunto si podemos hacer que funcionen. Y luego lo insertamos en la base de datos. Y eso es todo. Así que son como esas cuatro cosas, supongo.

El consumo de la consulta, el uso de la mutación, la definición de la consulta y la definición de la mutación fueron todo lo que se necesitó para que todos ustedes pudieran usar esa aplicación de chat entre sí ahora mismo y obtener todos esos datos en tiempo real. Así que lo último, con solo un par de minutos restantes, me encantaría hacer una pequeña prueba de presión. Una de las filosofías que tenemos es sobre eliminar la mayor cantidad de carga o responsabilidad de los desarrolladores y descargar eso en la plataforma. Creo que si puedes imaginar este mundo perfecto en el que los desarrolladores pueden pasar su tiempo codificando sus ideas, las cosas novedosas, las partes interesantes de su aplicación que no están necesariamente relacionadas con la infraestructura o el hecho de que alguien en última instancia tiene que usarlo de alguna manera para adherirse a las ideas. Así que me suscribo a esto. Quiero decir, es un objetivo aspiracional, elevado, potencialmente imposible, pero no es el punto.

Me encantaría que nuestras herramientas siguieran avanzando en ese espectro, eliminando la carga del desarrollador de poder hacer cualquier cosa excepto las partes interesantes del desarrollo.

Volvamos a, así que tenemos Sarcasticize. Todo lo que tengo que hacer es eliminar eso, eliminar eso y eliminar eso. Así que a donde iba... Espera, tengo que desplegar esto rápidamente. Un saludo a Fly. A donde iba con eso es que hemos gastado mucha energía diseñando Convex para ser súper ergonómico desde el primer día y escalable sin esfuerzo para el año dos, año tres, año cuatro. Y lo que quiero decir con eso es que no tienes que entender la provisión de máquinas. Realmente no tienes que preocuparte por tu escala. Tenemos clientes que tienen mucha escala y estamos avanzando. No creo que podamos incorporar una gran empresa en este momento. Pero hemos tenido mucho éxito al eliminar esas barreras al éxito, básicamente. Y parte de eso es gestionar todos los desafíos complejos y profundamente matemáticos que conlleva escalar sistemas distribuidos como bases de datos y gestionar la contención de bases de datos.

Y entonces veamos. Una vez que esto esté hecho, veamos si podemos poner a prueba este servidor. Veremos. Bien. Comprobando. Bien. Estoy seguro de que todo está bien. ¿Qué podría salir mal aquí? Así que si actualizamos nuestro DX init. Sí, ahí vamos. Así que ahora tenemos la opción de enviar cosas sarcásticamente. Así que puedes simplemente escribir tu mensaje y decir, esto no es sarcástico en absoluto. Ahí vamos. Eso es correcto. Así que podemos hacer eso. La otra cosa que podemos hacer es si alguien no se siente tan animado hoy y dice, deja el sarcasmo. No necesito eso ahora mismo. Puedes presionar el botón de hacer serio y eliminará todo ese sarcasmo y simplemente se sentirá agradable y tranquilo.

Hay un pequeño botón de brillo allí también. El botón de hacer serio y el botón de hacer brillante, cada vez que se presiona, está extrayendo cada mensaje en la base de datos, reescribiéndolo y volviéndolo a poner allí. Y así puedes imaginarte a las personas en la sala haciendo la misma acción, escribiendo en las mismas filas de la base de datos al mismo tiempo, y hemos profundizado en el agujero del conejo de la concurrencia para asegurarnos de que esto siga siendo fluido y escalable para siempre. De nuevo, nunca tengo que volver a pensar en ello. Simplemente sucede.

Y esto fue solo, porque esta fue una charla relativamente corta, solo quería elegir una demostración para tratar de transmitir ese mismo sentimiento que sentí la primera vez que usé Convex. Me absolvió de tener que preocuparme por qué base de datos elegir. ¿Me van a criticar en Twitter por hacer esta elección porque, no sé, MySQL fue cancelado la semana pasada por alguna razón. No lo sé. No puedo seguir el ritmo de todo eso.

Y así cada vez, ¿qué es, cada dos o tres meses empiezo un nuevo proyecto, estoy como, bueno, Twitter, X, ¿cuál es la base de datos hoy, eh? Y luego voy y la aprendo y digo, esto es genial. Y luego tres meses después, tengo que hacer eso de nuevo. Y no es solo la base de datos, es el despliegue, son los frameworks, es el stack. Así que eso fue como esta cosa realmente clave para mí que fue como, oh, ahora cada dos o tres meses he reducido toda la fricción que se necesita para poner mis ideas en acción. Ha sido muy agradable.

Y me puse en contacto con los fundadores para ser parte de esto porque esto es, bueno, ahí vamos. Genial. Así que aquí dice, rompe esta página web. Solo voy a eliminar ese mensaje. Debería desaparecer. No se está recopilando suficiente información. Voy a eliminar ese también. Ni siquiera sé qué significa eso. Oh, está bien, Daniel. Está bien. Muy bien. Pero esto es lo que quiero decir. Puedo entrar aquí y simplemente estoy editando la tabla. Y está afectando a todos. Lo cual es increíblemente poderoso.

Así que sí, muchas gracias. Tengo, sí, ganas de algo de System of a Down.

Está bien. Creo que probablemente tenía una última diapositiva que dice, oh, sí, haz algunos amigos, añade algo de brillo, contención, contención, contención. Ya sabes cómo va.

De todos modos, realmente, realmente aprecio que todos se tomen el tiempo para elegir esta charla conmigo. Sé que es tarde en el día. Es mucho café. Simplemente lo aprecio mucho. Y muchas gracias por su tiempo. Si quieren aprender algo más, vengan a hablar conmigo en el Q&A. Voy a hablar aquí y luego por allá. Y sí, visiten convex.dev y comiencen a construir sus sueños.

¿Por qué almacenar tanto estado del cliente en un servidor en lugar de mantenerlo localmente? ¿Eso escala bien?

Lo siento, ¿puedes repetir la pregunta? Bueno, porque eso no estaba en mi cosa. Entonces, ¿por qué almacenar tanto estado del cliente en un servidor en lugar de mantenerlo localmente? ¿Eso escala bien? Sí, por supuesto. Entonces eso es, quiero decir, 1000% específico de la aplicación. Hay muchas buenas razones para no almacenar ninguna cantidad de piezas del estado del cliente en el servidor. Sin embargo, para cualquier cosa que desees que el usuario experimente consistencia dentro de manera efectivamente gratuita, si fueran a cambiar entre sesiones o dispositivos, como asumir que esta persona está desconectada, ha iniciado sesión, tiene una sesión. Si hubiera algo en absoluto que quisieras mantener entre esas dos experiencias, esa sería la oportunidad de poner algo en la base de datos.

Pero hace que sea tan fácil sincronizar todo. Genial, voy a pasar a la siguiente pregunta rápidamente.

Quiero preguntarte y estaba revisando el sitio de convex dev. Tienes algunos estudios de caso. Quiero decir, hay un par que quieres o uno en particular que te gustaría discutir en uno o dos minutos y sabes, como un éxito. No se me permite. No estoy seguro de sobre quién se me permite hablar.

¿A quién tenemos en el sitio web? Quiero decir, no quiero que te despidan. Bueno, si está en el sitio web, está bien. Bien, déjame comprobar. No tengo separación entre, como, conversaciones que tenemos internamente y Bien, ¿qué tal la historia de la migración de dos semanas de tunnel? Esa es una buena. No estoy totalmente seguro y no quiero equivocarme. Bien, genial. Volveremos a la sesión de preguntas y respuestas. Dame un segundo.

¿Cuáles son los límites de rendimiento y las implicaciones de manejar miles de clientes concurrentes dado que está usando Websockets? Esa es una muy buena pregunta. Eso es algo con lo que finalmente terminamos lidiando bastante. Así que hay algunas cosas realmente geniales de ciencia de la computación sucediendo en el fondo, que trato de hacer mi mejor esfuerzo para hacer un millón de preguntas y entender, pero francamente, solo tengo un entendimiento superficial de cómo funciona eso.

Sin embargo, en general, la forma en que funcionan las instancias de convex es que tenemos un enorme grupo de recursos que asignamos dinámicamente en tiempo real según sea necesario. Y lo que eso significa es que si tienes miles de usuarios conectados a Websockets, esos Websockets no siempre están conectados a la misma instancia física exacta, parecerá ser lo mismo para todos los efectos y propósitos. Pero desde un punto de vista de escalabilidad, como escalabilidad horizontal, aprovisionaremos automáticamente una visión más profunda y haremos balanceo de carga entre todas estas instancias físicas. Así es como finalmente terminamos gestionando.

Tenemos un puñado de, oh, aquí hay un estudio de caso. Tenemos un puñado de clientes que se vuelven virales de vez en cuando. Así que hubo como un generador de video AI sobre perros o algo en Reddit hace un par de semanas que fue construido en convex. Y así fue una prueba de carga realmente genial porque se volvió loco. Así que fue una prueba de carga de sistemas técnica realmente interesante para que observáramos. Y fue realmente fue sin problemas. Todos estamos felices y sospechosos.

Genial. ¿Cuál es la DB? ¿Está definida por ustedes o simplemente se conectan a cualquiera?

Oh, sí. Me encanta esto. La base de datos está escrita desde cero en Rust desde el principio. No es Postgres, no es MySQL, y no es nada intermedio. Una de las razones por las que me sentí tan atraído después de investigar un poco sobre la empresa fue que los fundadores eran el equipo que realmente estuvo en el terreno construyendo Dropbox Sync, definieron el protocolo, lo implementaron y lo hicieron funcionar a esa escala. Y así, este era un equipo con habilidades realmente impresionantes cuando se trata de sistemas distribuidos. Y tomaron todo lo que saben sobre sistemas distribuidos y bases de datos y construyeron lo que pensaban que necesitaba existir. Así que es una base de datos novedosa, fresca, construida desde cero en Rust. Es de código abierto. Échale un vistazo.

Genial. Sí. Me gusta esta pregunta. WebSockets utiliza conexiones TCP persistentes, y estamos limitados por el número de conexiones abiertas en un solo servidor. ¿Alguna preocupación de escalabilidad? Hasta donde entiendo, y podría estar equivocado, eso se resuelve con lo que estamos haciendo esta orquestación que estamos haciendo en el fondo donde iniciaremos tantas instancias como sea necesario para manejar de manera segura cualquier tipo de carga y luego gestionar transparentemente todo el balanceo de carga. Podría ir más allá de eso, pero puedo averiguarlo. Pero así es como lo entiendo. Palabra, palabra, palabra.

¿Tienen algún ejemplo de consultas más complejas, por ejemplo, un ejemplo con joins, etc.? Sí, sí, por supuesto. Así que tenemos toda una suite de repositorios de ejemplo que muestran desde lo trivial, como mostré aquí hoy, hasta ejemplos mucho más sofisticados y aplicaciones listas para producción a gran escala, probables. Así que no puedo mostrarte nada aquí, pero sí, absolutamente. Así que hay índices. Puedes definir tus esquemas y relaciones entre tablas. Ahora, el esquema es opcional. Así que esto es lo que quiero decir cuando digo que tratamos de hacerlo realmente fácil desde el primer día para como crear y prototipar tu idea. Sabemos que los modelos de datos y tus sistemas evolucionan, pero luego puedes en cualquier momento hacer cumplir la validación del esquema. Sí, y luego puedes hacer todo tipo de consultas complejas, consultas de alto rendimiento, uniendo objetos, todo eso. Tenemos montones de repositorios de ejemplo.

Genial. Última pregunta, y rápida, respuesta relámpago. Cuéntame sobre Convex for Startups.

Sí. Convex for Startups es este increíble programa dirigido por nuestro jefe de comunidad, Wayne. Y ha sido un éxito rotundo hasta ahora. Entonces, lo que es, es que ofrecemos, hay un montón de beneficios. Hay como acceso gratuito a Convex. Hay como sesiones de preguntas y respuestas con los fundadores. Hay, hacemos como recorridos de código. Y así es un programa para startups al que cualquiera puede postularse para Convex. Y lo revisaremos. Y luego hemos visto algunos de los proyectos más interesantes pasar por aquí. Y eso es realmente lo que estamos buscando, como aplicaciones realmente interesantes y novedosas.

aplicaciones. Genial. Muchas gracias por su tiempo, señor. Gracias, señor. Un aplauso para mi amigo, el Sr. Redmond. Sr.