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.

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.

Available in English

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

Building Better Websites with Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
Everything Beyond State Management in Stores with Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Everything Beyond State Management in Stores with Pinia
Top Content
When we think about Vuex, Pinia, or stores in general we often think about state management and the Flux patterns but not only do stores not always follow the Flux pattern, there is so much more about stores that make them worth using! Plugins, Devtools, server-side rendering, TypeScript integrations... Let's dive into everything beyond state management with Pinia with practical examples about plugins and Devtools to get the most out of your stores.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.
React Query: It’s Time to Break up with your "Global State”!
React Summit Remote Edition 2020React Summit Remote Edition 2020
30 min
React Query: It’s Time to Break up with your "Global State”!
Top Content
An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.

Workshops on related topic

Rethinking Server State with React Query
React Summit 2020React Summit 2020
96 min
Rethinking Server State with React Query
Top Content
Featured Workshop
Tanner Linsley
Tanner Linsley
The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like:
- Sharing Data across apps- Caching & Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination & Incremental fetching- Memory & Garbage Collection- Optimistic Updates
Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them.
In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query.
By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query.
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Back to the Roots With Remix
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
State Management in React with Context and Hooks
React Summit Remote Edition 2021React Summit Remote Edition 2021
71 min
State Management in React with Context and Hooks
WorkshopFree
Roy Derks
Roy Derks
A lot has changed in the world of state management in React the last few years. Where Redux used to be the main library for this, the introduction of the React Context and Hook APIs has shaken things up. No longer do you need external libraries to handle both component and global state in your applications. In this workshop you'll learn the different approaches to state management in the post-Redux era of React, all based on Hooks! And as a bonus, we'll explore two upcoming state management libraries in the React ecosystem.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
Learn Fastify One Plugin at a Time
Node Congress 2021Node Congress 2021
128 min
Learn Fastify One Plugin at a Time
Workshop
Matteo Collina
Matteo Collina
Fastify is an HTTP framework for Node.js that focuses on providing a good developer experience without compromising on performance metrics. What makes Fastify special are not its technical details, but its community which is wide open for contributions of any kind. Part of the secret sauce is Fastify plugin architecture that enabled developers to write more than a hundred plugins.This hands-on workshop is structured around a series of exercises that covers from basics "hello world", to how to structure a project, perform database access and authentication.

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