Jazz: Construye Aplicaciones React en Tiempo Real, Locales con Sincronización y Datos Colaborativos Seguros

Rate this content
Bookmark

Los usuarios han llegado a esperar colaboración en tiempo real de aplicaciones de primera clase como Notion o Figma. Pero las herramientas e infraestructuras ampliamente disponibles para construir aplicaciones multijugador están apenas emergiendo. En esta charla, exploraremos el marco de trabajo de código abierto Jazz y las dos nuevas ideas que lo impulsan: Tipos de Datos Replicados sin Conflictos (CRDTs) y permisos verificables. Al construir una aplicación completa con nada más que React y Jazz, veremos cómo este nuevo enfoque simplifica radicalmente la construcción no solo de aplicaciones multijugador en tiempo real, sino de cualquier tipo de aplicación en la que los usuarios interactúan.

FAQ

JAS es un marco para construir aplicaciones en torno a datos colaborativos seguros y sincronizados. Ofrece características como sincronización entre dispositivos, multijugador en tiempo real, persistencia local y en la nube, y soporte fuera de línea, todo integrado en una interfaz de usuario rápida.

JAS elimina la necesidad de preocuparse por elementos como la elección de una base de datos o la configuración de un backend, especialmente para funcionalidades de tiempo real, permitiendo a los desarrolladores concentrarse más en las características únicas de sus aplicaciones.

Los CRDT (Conflict-free Replicated Data Types) son tipos de datos que permiten múltiples ediciones concurrentes de manera segura. JAS utiliza CRDT para gestionar la sincronización y el almacenamiento de datos de manera eficiente y sin conflictos.

Los interesados pueden unirse a la comunidad de JAS visitando la página principal del proyecto y uniéndose al canal de Discord para colaborar, experimentar con JAS y resolver dudas.

JAS implementa permisos y autenticación a través de grupos y roles, utilizando firmas de cifrado globalmente para el control de acceso, lo que elimina la necesidad de un backend centralizado para la mayoría de las operaciones.

CoJson es un enfoque dentro de JAS que significa JSON colaborativo, facilitando la co-edición en varios dispositivos y gestionando permisos, roles, sincronización y almacenamiento en caché de manera integrada para simplificar el desarrollo de aplicaciones.

El futuro de JAS incluye la incorporación de texto plano colaborativo y texto enriquecido, más opciones de autenticación, y la posibilidad de integrar JAS de manera incremental con aplicaciones existentes, además de explorar nuevas tecnologías como web transport o quick.

Anselm Eickhoff
Anselm Eickhoff
29 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

JAS es un nuevo marco de trabajo para construir aplicaciones alrededor de datos colaborativos seguros y sincronizados, prometiendo simplificar el desarrollo de aplicaciones al eliminar la complejidad innecesaria. CoJson es una abstracción que simplifica el desarrollo de aplicaciones implementando la co-edición en múltiples dispositivos, identidades de usuario, permisos, sincronización, almacenamiento en caché y persistencia. Jazz es un marco de trabajo de código abierto que proporciona enlaces idiomáticos para CoJSON, específicamente en el navegador. JAS proporciona potentes capacidades de sincronización y almacenamiento, eliminando la necesidad de almacenamiento blob externo. Jazz React permite a los desarrolladores usar React y proporciona suscripciones automáticas para actualizaciones reactivas a valores centrales. JAS ofrece interacción instantánea, sincronización fuera de línea y la capacidad de reconstruir Twitter con Jazz.

1. Introducción al Marco JAS

Short description:

Soy Anson y estoy aquí hoy para hablarles sobre JAS, mi nuevo marco para construir aplicaciones en torno a datos colaborativos seguros y sincronizados. Hablaré sobre por qué comencé a hacer JAS, qué es y daré una demostración de una aplicación con un recorrido por el código. JAS promete simplificar el desarrollo de aplicaciones eliminando la complejidad innecesaria y proporcionando características como sincronización entre dispositivos, multijugador en tiempo real y una interfaz de usuario rápida. Para entender cómo llegamos aquí, echemos un vistazo a la historia de la arquitectura de computadoras y la web. La complejidad surge de la necesidad de manejar la transferencia de datos entre diferentes componentes. Los CRDT ofrecen un modelo alternativo al incrustar el internet en los datos, permitiendo la edición colaborativa.

Muchas gracias por la introducción. Soy Anson. Estoy aquí hoy para hablarles sobre JAS, mi nuevo marco para construir aplicaciones en torno a datos colaborativos seguros y sincronizados. Antes de entrar en detalles, esta es la primera vez que hablo de esto públicamente. Por lo tanto, si esto les resulta interesante, realmente podrían ayudarme echando un vistazo a la página principal y uniéndose al Discord, especialmente si quieren experimentar con JAS o tienen algunas preguntas. Cualquier comentario realmente me ayuda en esta etapa inicial. Hoy, hablaré sobre estas cosas. ¿Por qué empecé a hacer JAS? ¿Qué es realmente? Echaremos un vistazo a una pequeña aplicación de demostración y haremos un recorrido detallado por el código para darles una rápida impresión de cómo se siente construir una aplicación con JAS. Si tenemos tiempo, haremos una pequeña aplicación de demostración adicional y hablaré un poco más sobre qué viene para JAS. Entonces, ¿por qué decidí empezar a construir JAS? Construyo muchas aplicaciones y básicamente cada vez que digo, hey, construyamos una aplicación, pero luego tienes que preocuparte por todas estas cosas, como elegir una database, desplegarla, cómo construir el backend y especialmente si quieres hacer multijugador en tiempo real, simplemente añade más complejidad. De repente necesitas colas de mensajes, web sockets, y me pregunto, ¿por qué todo es tan difícil? Y más interesante aún, ¿qué pasaría si no tuviera que ser así? ¿Qué pasaría si pudiéramos deshacernos de casi todo eso y quedarnos solo con las cosas que realmente hacen que nuestra aplicación sea nuestra aplicación, verdad? ¿No sería eso agradable? Esa es más o menos la promesa de JAS, suena bien, ¿verdad? Y mejora aún más. ¿Qué pasaría si les dijera que también obtienen sincronización entre dispositivos, multijugador en tiempo real, obtención automática de data granular de la que no tienen que preocuparse, persistencia local y en la cloud, soporte fuera de línea y una interfaz de usuario realmente rápida de forma gratuita? Suena genial, ¿verdad? Ese es más o menos el sueño que tenía cuando comencé con eso, pero ¿cómo podemos llegar allí? Y creo que para responder a esa pregunta, realmente ayuda. Y eso es con lo que comencé, es preguntarnos, ¿cómo llegamos a este lío en primer lugar? Así que una historia rápida, comencemos desde los principios básicos. Este es más o menos mi modelo mental de una computadora, ¿verdad? Resulta que no es mi modelo mental de una computadora, es en realidad el modelo mental de este tipo, y simplemente lo hizo realidad, y eso es lo que tenemos ahora. Y ha permanecido prácticamente sin cambios desde entonces, excepto en los años 60 y 70, estos tipos añadieron una caja a eso, que es el internet, y todavía estamos recuperándonos de eso. Para la web en sí, este tipo fue super influyente. Básicamente vio esta arquitectura de computadora y dijo, oye, sabes qué, deberíamos construir hipertexto en eso, y creó algunas de las primeras interfaces de usuario gráficas, pero el hipertexto no se popularizó hasta mucho después cuando este tipo dijo, la colaboración de investigación en CERN es un desastre, tal vez deberíamos construir hipertexto, y el problema con su implementación de hipertexto, por supuesto, es que era lo suficientemente buena, y eso es con lo que estamos atrapados ahora, eso es la web. Pero más tarde, en 95, este tipo dijo, hey, eso es un buen hipertexto que tienes ahí, ¿qué tal si construimos una arquitectura de computadora encima de eso? Y también mi jefe me dio diez días para hacerlo. Y de manera similar, el problema con JavaScript fue que era lo suficientemente bueno, así que eso es lo que tenemos ahora, ¿verdad? Así que ahora estamos en una situación en la que básicamente esta es la arquitectura de computadora más popular, la VM de JavaScript en el navegador tal como la conocemos. Pero en realidad, no hay nada realmente malo con eso. La complejidad es realmente inherente en el modelo más genérico de la computadora aquí porque si queremos construir una aplicación, tenemos que preocuparnos por demasiadas de estas cajas. Básicamente la razón por la que tenemos todas estas preguntas es porque cada vez que queremos construir una aplicación, necesitamos pensar en estas flechas y mover data entre la memoria, el disco, el internet, otras computadoras. Ahí es donde creo que proviene la mayor parte de la complejidad. Cuando escuché por primera vez sobre los CRDT, me emocioné mucho porque los CRDT prometen un modelo alternativo a eso. Realmente no tengo mucho tiempo para explicar los CRDT. Hay una publicación de blog muy buena llamada Data Laced with History. Esa es una muy buena forma de pensar en los CRDT también. Así que definitivamente echen un vistazo a eso. Una forma sencilla de pensar en los CRDT que me gusta es, en lugar de intentar tan duro poner tus data en el internet y tener eso en diferentes lugares, básicamente pones el internet en tus data y tus data ahora son conscientes de que existen en diferentes lugares. Muchas personas lo están editando a la vez.

2. Introducción a los Datos Colaborativos y CoJson

Short description:

Cuando comencé a investigar los CRDT, me di cuenta de que por sí solos, no son suficientes. Necesitas permisos, sincronización y almacenamiento resueltos también. Por eso creé CoJson, una poderosa abstracción que simplifica el desarrollo de aplicaciones. Implementa la co-edición en varios dispositivos, identidades de usuario, permisos, sincronización, almacenamiento en caché y persistencia. Con CoJson, la colaboración y el control de acceso seguro se convierten en propiedades inherentes de los datos de tu aplicación.

Cuando comencé a investigar los CRDT, me di cuenta de que por sí solos, realmente no son suficientes. Lo que realmente quieres además de ellos son permisos y quieres tener sincronización y almacenamiento resueltos para ti también. Si tienes este paquete de cosas, en realidad tienes una abstracción realmente poderosa. Tan poderosa que te permite pasar de esta situación bastante complicada a una mucho, mucho más simple que se ve así.

Y esta nueva abstracción es lo que estoy llamando datos colaborativos. Creo que explica bastante bien mi motivación. Entonces, ¿cómo construimos esto realmente? Y aquí es donde comenzaré a hablar sobre lo que realmente es Jazz. Queremos construir esto de alguna manera y ¿cómo lo implementamos en el mundo de hoy? Mi enfoque particular en esto lo llamo CoJson, que significa JSON colaborativo. Y básicamente solo conectas algo de JavaScript a eso y renderizas cosas en el DOM y eso es todo lo que necesitas hacer para construir una aplicación. Para ser más preciso, CoJson implementa la co-edición en varios dispositivos, identidades de usuario y cuentas como un concepto de primera clase. Permisos y roles, sincronización y almacenamiento en caché y persistencia para ti, por lo que no tienes que preocuparte de nada de eso al construir una aplicación. Lo más importante, básicamente hace que la colaboración y el control de acceso seguro se sientan como propiedades inherentes de los datos de tu aplicación. Y eso significa que puedes construir tu aplicación como si todo lo que tuvieras fuera un estado local. Ya no tienes que preocuparte por nada más.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix es un nuevo marco de trabajo web de los creadores de React Router que te ayuda a construir mejores y más rápidos sitios web a través de una sólida comprensión de los fundamentos de la web. Remix se encarga de las tareas pesadas como la renderización del servidor, la división de código, la precarga y la navegación, y te deja con la parte divertida: ¡construir algo increíble!
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Uso efectivo de useEffect
React Advanced Conference 2022React Advanced Conference 2022
30 min
Uso efectivo de useEffect
Top Content
¿Puede useEffect afectar negativamente a tu base de código? Desde la obtención de datos hasta la lucha con las APIs imperativas, los efectos secundarios son una de las mayores fuentes de frustración en el desarrollo de aplicaciones web. Y seamos honestos, poner todo en ganchos useEffect no ayuda mucho. En esta charla, desmitificaremos el gancho useEffect y obtendremos una mejor comprensión de cuándo (y cuándo no) usarlo, así como descubriremos cómo los efectos declarativos pueden hacer que la gestión de efectos sea más mantenible incluso en las aplicaciones React más complejas.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
Los tutoriales interactivos basados en la web se han convertido en un elemento básico de los frameworks de front end, y es fácil ver por qué: a los desarrolladores les encanta poder probar nuevas herramientas sin el problema de instalar paquetes o clonar repositorios.Pero en la era de los meta-frameworks full stack como Next, Remix y SvelteKit, estos tutoriales solo llegan hasta cierto punto. En esta charla, veremos cómo nosotros, en el equipo de Svelte, estamos utilizando la tecnología web de vanguardia para repensar cómo nos enseñamos mutuamente las herramientas de nuestro oficio.
React Query: ¡Es hora de romper con tu "Estado Global"!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: ¡Es hora de romper con tu "Estado Global"!
Top Content
Una cantidad creciente de datos en nuestras aplicaciones React proviene de fuentes remotas y asíncronas y, aún peor, continúa disfrazándose como "estado global". En esta charla, obtendrás información sobre por qué la mayoría de tu "estado global" en realidad no es un estado en absoluto y cómo React Query puede ayudarte a buscar, almacenar en caché y gestionar tus datos asíncronos con una fracción del esfuerzo y el código al que estás acostumbrado.

Workshops on related topic

Repensando el Estado del Servidor con React Query
React Summit 2020React Summit 2020
96 min
Repensando el Estado del Servidor con React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Gestión del estado en React con Context y Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
Gestión del estado en React con Context y Hooks
WorkshopFree
Roy Derks
Roy Derks
Mucho ha cambiado en el mundo de la gestión del estado en React en los últimos años. Donde Redux solía ser la principal biblioteca para esto, la introducción de las API de Contexto y Hooks de React ha revolucionado las cosas. Ya no necesitas bibliotecas externas para manejar tanto el estado del componente como el estado global en tus aplicaciones. En este masterclass aprenderás los diferentes enfoques para la gestión del estado en la era post-Redux de React, ¡todos basados en Hooks! Y como bonificación, exploraremos dos próximas bibliotecas de gestión del estado en el ecosistema de React.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Aprende Fastify Un Plugin a la Vez
Node Congress 2021Node Congress 2021
128 min
Aprende Fastify Un Plugin a la Vez
Workshop
Matteo Collina
Matteo Collina
Fastify es un marco de trabajo HTTP para Node.js que se enfoca en brindar una buena experiencia de desarrollo sin comprometer las métricas de rendimiento. Lo que hace especial a Fastify no son sus detalles técnicos, sino su comunidad, que está abierta a contribuciones de cualquier tipo. Parte de la fórmula secreta es la arquitectura de plugins de Fastify, que permite a los desarrolladores escribir más de cien plugins.Este masterclass práctico está estructurado en una serie de ejercicios que cubren desde lo básico, como "hola mundo", hasta cómo estructurar un proyecto, realizar acceso a bases de datos y autenticación.

https://github.com/nearform/the-fastify-workshop