Cloud State: Revolutionizing JavaScript Development

♪♪ {{^}}♪♪ {{^}}♪♪ Hola, soy Ben. Soy el CEO de Freestyle. Estamos construyendo un nuevo entorno de ejecución de JavaScript llamado Cloud State que te permite escribir toda tu aplicación en TypeScript.

Ahora, muchos de ustedes podrían estar pensando que ya escriben toda su aplicación en TypeScript. Pero eso no es cierto. Podrías escribir tu front-end en TypeScript y podrías escribir tu back-end en TypeScript, pero luego estás usando Superbase TypeScript para conectarte a una base de datos SQL. Y luego, cuando estás conectando tu back-end y tu front-end, estás usando un REST, HTTP, GraphQL, cualquiera de estas cosas que están fuera de JavaScript.

Creemos que estas capas causan el problema y la fricción en los equipos de TypeScript. Y cuando las llevas a TypeScript de forma nativa, tus equipos pueden funcionar mucho más eficientemente. Así es como lo hacemos. Creamos un nuevo motor de TypeScript que te permite escribir tu código como TypeScript regular y luego se ejecuta en la base de datos. Entonces, lo que eso significa es que podrías tener un contador. Y al solo escribir este contador, estos datos no se almacenan en el heap. En realidad, se descargan detrás de escena para que ahora sean persistentes. Tu equipo de TypeScript no está escribiendo una capa de traducción de Superbase. No está escribiendo SQL. Tu equipo ahora está escribiendo JavaScript, el viejo y regular JavaScript, y así es como funciona.

Cuando lo usas en freestyle, en realidad vas aún más lejos. No solo te dejamos escribir este contador en JavaScript y que se mantenga en tu back-end, sino que realmente puedes simplemente llamar a tus funciones de back-end desde tu front-end sin ningún problema.

Así que echemos un vistazo a un ejemplo un poco más complejo. Así es como construyes una lista de tareas en TypeScript con freestyle. Ahora, la primera parte de la lista de tareas está en cloud state. Eso es lo que nos dice que esto es persistente. Así que puedes ver que tomamos una clase de lista de tareas regular, le damos un ID y la marcamos como at cloud state.

Ahora, tiene un mapa de elementos que van de cadena a elemento de tarea. Y este mapa de elementos es la base de datos. No está solo en memoria, sino que porque está marcado como cloud state, estos datos son persistentes. Cuando estoy agregando un elemento a él, estoy agregando una clase a él, no solo JSON, sino cualquier clase, realmente estoy agregando eso a este mapa, que lo está poniendo en la base de datos. Y luego, omitiremos esto por ahora. Vamos a devolver items.info, y eso se está ejecutando en la clase de elemento de tarea, que también tiene un ID y tiene una función regular, toItems.info. Y lo que puedes ver aquí si hago zoom hacia afuera es que tenemos un archivo de 53 líneas que existe en aislamiento con prácticamente solo TypeScript regular. Estás tomando una clase de lista de tareas.

Así es como podrías escribir una lista de tareas regularmente. Y con una sola línea en cloud state, esta clase ha pasado de ser algo en memoria que puedes ejecutar en el front-end a no solo ejecutarse en tu back-end, sino también tener los datos persistentes. Así que esto realmente puede ser desplegado a producción ahora sin necesitar una base de datos SQL.

Esta es la base de datos. Entonces, ¿cómo te conectas a esto desde el front end? Bueno, lo que puedes hacer es en el front end, escribes use cloud de la lista de tareas. Y ahora, puedo hacer to-do list dot, y puedes ver que las funciones que escribimos están justo ahí. Add item con todos los tipos fuertes, todo el TypeScript, está justo ahí.

Y sabes qué, quiero saber qué hace getItems. Así que, voy a hacer clic con comando, y ahora estoy de vuelta en la clase. Vamos a empezar con un prefijo. Y veamos, cuando regreso al front end, ahora puedo simplemente llamar dot starting with, y me dirá, oh, ¿qué quiere? Quiere un prefijo. Así que pongo un prefijo, y luego está feliz. Así que tienes tipos fuertes completos en todo momento.

Ahora, lo que estás viendo aquí es que nos dimos cuenta de que incluso eso era demasiado difícil, porque tienes que mantenerlo sincronizado, tienes que hacer una carga, una suspensión, todo eso. Así que realmente creamos algo inspirado por TAM stack. En lugar de use query, puedes escribir use cloud query, y esto manejará automáticamente la carga, la sincronización, todo eso. Y no necesita un refetch, porque si recuerdas al principio, tuvimos que invalidar.

Y lo que hace invalidar es que es un refetch del lado del servidor. Así que, en la lista de tareas, puedes ver que tenemos una lista de elementos de tareas que estamos obteniendo. Y siempre que los datos de los elementos de tareas puedan ser consumidos, como de costumbre, como el tipo. Y lo que sucede es que en el backend aquí, podemos decir, oye, cada vez que agregas un elemento, cualquier cosa que dependa de get items de esta lista de tareas, deberías volver a buscarlo. Así que lo ejecuta y lo mantiene sincronizado. Así que esta es la aplicación, déjame ejecutarla. Freestyle Dev. Eso va a iniciar el servidor de desarrollo, todo eso, hacer toda la compilación. Y ahora estamos aquí. Tenemos una aplicación completamente persistente y en vivo lista para usar aquí mismo. Y puedes ver que los datos no están almacenados en la página web, están almacenados persistentemente en la base de datos.

Así que, realmente podemos llevar esto más lejos. Y ahora, con dos comandos, freestyle build. Eso va a construir esta aplicación, prepararla para producción. Y luego freestyle deploy. Me va a preguntar cómo quiero nombrar esto.

Y voy a decir demo for talk. Y se tomará su tiempo creando el proyecto. Se toma su tiempo. Y luego, eventualmente, desplegará este producto en producción. No solo tu aplicación web con estado. No solo está haciendo el alojamiento web que todos hacen. Pero lo más importante, ahora está desplegando la infraestructura de persistencia de datos que necesitas para construir funcionalidad real.

Ahora, ¿cómo es esto posible? Veamos, demo for talk. Ahora tenemos una aplicación realmente persistente. Y está cargando. Oh, ahí estamos. Y puedes ver, hola, bienvenido. Esta es la aplicación. Supongo que ahora está iniciada. Y puedes ver que está compartida, está en vivo, todo eso. Esto es genial. Quiero enfatizar la verdadera diferencia entre esta aplicación y cualquier otra aplicación que hayas visto. Esta aplicación está escrita en puro TypeScript. No hay ORM, no hay configuración para SQL. Esto se ejecuta como JavaScript en tu front end, seguido por Deno en tu back end, seguido por CloudState para tu persistencia. Y todo eso sin salir nunca de TypeScript. Así que quiero mostrarte en general cómo funciona esto. Así que el runtime de CloudState es una fusión de V8, Deno core, y un motor de base de datos que diseñamos nosotros mismos.

Ahora, ¿por qué necesitábamos un motor de base de datos personalizado? Porque si intentaras hacer esto con un almacén de documentos, comenzarías a volverte súper lento. Porque, ¿almacenas un objeto completo? ¿Almacenas parte de un objeto? ¿Dónde trazas la línea en este almacén de objetos? Y lo sabemos porque lo intentamos. Así que lo que realmente hicimos fue diseñar un almacén de objetos que no solo almacena objetos de la manera tradicional de NoSQL. Sino que realmente los descompone en sus campos individuales. Así que si estás tratando de acceder a un objeto que tiene usuarios y solo el primer nombre de ese usuario, no estás obteniendo el objeto completo. No estás obteniendo el usuario completo. En realidad, solo estás obteniendo su primer nombre.

Y de manera similar, cuando estás escribiendo de nuevo en una base de datos, no estás escribiendo de nuevo todo el usuario. No estás escribiendo de nuevo todo el objeto. Solo estás reescribiendo su nombre. Y así es como esto es realmente posible. Que fusionamos en el runtime, todo lo que necesitamos para poder hacer estas transacciones de grano fino para permitir que esto realmente funcione en producción.

Así que quiero mostrarte a dónde va esto y qué permite. Más que cualquier mejora que esto haga, esto permite algo un poco extraño. Me encantan los paquetes de JavaScript. Los paquetes de JavaScript son lo mejor de JavaScript. NPM es mi ángel y todos mis proyectos dependen de él. Pero hay algo que falta. Me encanta ShadCM, por ejemplo. Me encanta Bootstrap y me encantan todos estos paquetes de utilidades. Pero cada paquete que he usado es una utilidad. Es ya sea un envoltorio para la API de otra persona, por ejemplo, Superbase, que envuelve la conexión a sus contenedores Docker, o Clerc, que se conecta a Clerc o es ShadCM. Es algo que me da componentes, me da ayudantes, me da localización o algo. Pero nunca ha podido darte una característica completa. ¿Por qué es eso? Porque la característica es el dato. Podrías argumentar que cualquier característica se reduce a mostrar, manipular y mover datos. Y el hecho es que no hay forma de hacer eso en un paquete hoy.

Si estoy construyendo un componente de React, ¿a dónde voy a enviar estos datos? ¿Estoy buscando en algún lugar aleatorio? Si estoy construyendo el lado del back-end de esto, ¿dónde almaceno esos datos? E incluso entonces, ¿cómo conecto estas cosas? Podrías intentarlo en Next, pero no podrías hacer las rutas de la API porque todo es enrutamiento basado en el sistema de archivos. Pero lo genial de CloudState es que este archivo funciona de manera aislada. Puedo tomar este back-end de lista de tareas, copiarlo y pegarlo, ponerlo en un paquete, y luego funciona. Así que ahora puedes compartir tu back-end, tu infraestructura de datos con otras personas. Pero en realidad no se detiene ahí. Porque puedes ver cuando lo usamos en el front-end en los componentes de React, no estamos referenciando un servidor web, no estamos referenciando un endpoint. Estamos referenciando la clase y el ID de la clase, y eso también se puede almacenar en un paquete. Así que cualquier característica que construyas en CloudState realmente puede compartirse como un paquete.

Déjame mostrarte un ejemplo de uno de los primeros que hemos lanzado. Freestyle chat.

Construir una interfaz de usuario de chat es difícil. Hay mucho que entra en ello. Necesitas una REST API para la primera carga, necesitas el socket para mantenerlo sincronizado, necesitas la persistencia de datos, necesitas identificación de múltiples usuarios, y luego la interfaz de usuario, oh Dios mío. Requiere mucho, por eso hay un montón de proveedores externos que te venderán chat, pero entonces ellos poseen tus datos, poseen el código, y nunca puedes realmente alejarte de ellos.

Freestyle chat es completamente open source. Todo el código fuente de lo que estoy a punto de mostrarte es completamente open source. Ahora, lo que puedes hacer es ejecutar npm install freestyle-chat, importar el back end, solo importándolo, sin llamar a algún otro cliente, sin configurar nada, solo importando el back end, luego importando los componentes de React del front-end como estás acostumbrado, y luego se te dará un chat en vivo preconstruido ejecutándose en tu aplicación, totalmente configurable, totalmente reescribible, totalmente bifurcable, tus datos en tu aplicación que posees de forma gratuita.

Esto es lo que Freestyle permite más que cualquier otra cosa. Que ahora mismo, cada paquete que usas, es genial, pero todo lo que es es una utilidad. Pero cuando construyes en Freestyle, puedes compartir cualquier cosa, y aquí es donde vamos a estar yendo en el futuro cercano.

Para concluir, creemos que Cloud State tiene el potencial de hacer con las bases de datos lo que Node.js hizo con los servidores. Al igual que JavaScript ha tomado el control del resto de una pila, creemos que puede tomar el control de la pila de datos. Y cuando lo haga, va a mejorar el desarrollo para la gente de JavaScript en todas partes. Nos encantaría si pudieras darle una estrella a nuestro repositorio. Eso ayuda mucho. Soy Ben. Por favor, contáctame si esto es interesante. Gracias.