Aplicaciones locales con ElectricSQL y React

Rate this content
Bookmark
Slides

Local-first es un nuevo paradigma para desarrollar aplicaciones con reactividad instantánea, multiusuario en tiempo real y sin conflictos offline incorporados. Esta charla muestra cómo desarrollar sistemas locales con React utilizando ElectricSQL, una plataforma de software de código abierto de los inventores de CRDTs.

James Arthur
James Arthur
12 min
12 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Electric SQL es una capa de sincronización local que te permite construir aplicaciones directamente sobre Postgres usando React. Proporciona resultados instantáneos, funcionalidad offline y colaboración multiusuario incorporada. El sistema garantiza la consistencia transaccional causal plus y admite sincronización multiusuario en tiempo real y uso multiplataforma. Electric SQL elimina el código repetitivo, proporciona una experiencia de usuario de alta calidad y permite ahorros de costos y simplicidad operativa.

Available in English

1. Introducción a Electric SQL

Short description:

Hola, soy James Arthur, cofundador y CEO de Electric SQL. Somos un Sinclair para construir aplicaciones modernas. Nuestro Sinclair local-first te permite construir aplicaciones directamente sobre Postgres usando React. Tenemos un equipo de geeks de sistemas distribuidos que han estado investigando y fortaleciendo la programación en el lado AP del teorema de cap. Esto ha llevado a un cambio en la arquitectura de las aplicaciones, con los sistemas local-first ganando más popularidad. Estos sistemas permiten la comunicación directa con una base de datos local y proporcionan resultados instantáneos, funcionalidad fuera de línea y colaboración multiusuario incorporada. Ahora pasemos a una demostración para ver esto en acción.

Entonces, hola, soy James Arthur. Soy uno de los cofundadores y soy el CEO de Electric SQL. Entonces esto es básicamente Electric. Somos un Sinclair para construir aplicaciones modernas. Entonces, específicamente, es un Sinclair local-first, del cual hablaré, y te permite construir aplicaciones como Figma, Linear, directamente sobre Postgres, usando React.

Solo para darte un poco de contexto sobre quiénes somos, básicamente somos un grupo de geeks de sistemas distribuidos. Y entonces, la compañía surge de una serie de investigaciones en el lado AP del teorema de cap, y tenemos a varias de las personas que han sido pioneras en muchas cosas en esa área en el equipo, incluyendo a dos de los inventores de CRDTs, etc. Y básicamente, estos académicos, durante las últimas probablemente un par de décadas o más, han estado trabajando para fortalecer básicamente lo que puedes hacer con la programación en el lado AP del teorema de cap. Y no entraré en detalles aquí, pero puedes investigar un poco sobre este tipo de investigación. Y ahora se está utilizando para cambiar la forma en que construyes aplicaciones hoy en día, y particularmente, se trata de apuntar a la transferencia de estado de la arquitectura de la aplicación. Entonces, los sistemas tradicionales cloud-first, se ejecutan en el servidor, hablan con servicios web a través de la red. Mientras que ahora tienes sistemas local-first, donde hablas directamente con una base de datos local que está incrustada dentro de la aplicación, y luego los datos se sincronizan en segundo plano. Y este tipo de arquitectura ahora está siendo utilizada por una amplia gama de aplicaciones exitosas. Así que mencioné cosas como Figma, Linear, tienes el nuevo Facebook Messenger, las nuevas aplicaciones de Google Workspace, tienes SuperHuman, por ejemplo. Y solo para darte una idea muy rápida de lo que está sucediendo allí, con un sistema tradicional cloud-first, tienes la red en el camino de interacción. Entonces el usuario hace clic en un botón, envía una solicitud al servidor, el servidor envía algo de vuelta al usuario, y luego ves los resultados. Y entonces tienes latencia por ir a través de la red, el servidor necesita estar en línea, tienes errores de red que tienes que codificar cada vez que vas a través de la red, y el usuario está allí viendo un spinner de carga o esperando que la página cargue. Mientras que, con local-first, básicamente mueves la base de datos, o un subconjunto de la base de datos, al cliente, el usuario hace clic en el botón, todo es instantáneo, por lo que no hay latencia porque no tienes la red en el camino de interacción, el usuario ve el resultado inmediatamente, las aplicaciones por defecto funcionan sin conexión, si el servidor se desconecta, la aplicación sigue funcionando. Luego introduces este tipo de capa de sincronización en vivo entre la base de datos y el cliente y en el servidor. Y juntos, lo que esto te da es este modelo donde obtienes una especie de trinidad sagrada de una gran experiencia de usuario moderna para el consumidor o prosumidor, que combina la reactividad instantánea para que las aplicaciones simplemente se sientan instantáneas de usar con colaboración multiusuario incorporada y también aplicaciones que pueden trabajar sin conexión y manejar conflictos por ti. Así que voy a saltar en este punto y vamos a pasar a una especie de demostración solo para ver eso en acción. Voy a cambiar de ventanas. Así que esto es pasar a electric. Como primero, solo voy a saltar para darte una idea de algo de el código si eso es útil como orientación. Entonces, por ejemplo, ¿cómo configuras esto? Correcto. Entonces tenemos una arquitectura donde tienes una base de datos Postgres en el fondo. Ejecutas un servicio de sincronización eléctrica. Entonces esto es un servicio de sincronización elixir. Es sin estado. Se ejecuta frente a PostgreSQL y maneja esa replicación por ti.

2. Acceso a Datos y Sincronización

Short description:

Generamos una biblioteca de acceso a datos segura desde el esquema de datos de Postgres. Define tu esquema como de costumbre y utiliza reglas para controlar la exposición de datos y los permisos. Autentica la aplicación local utilizando un JWT y envuelve el controlador SQL light con electrify para obtener una versión en vivo reactiva de la conexión a la base de datos. La API utiliza formas para controlar la sincronización de datos en el dispositivo local. Define formas para la replicación parcial dinámica y vincula consultas en vivo para actualizaciones en tiempo real. Escribe datos directamente en la base de datos local y mantén todo en vivo y reactivo.

Lo que hacemos entonces es generar una biblioteca de acceso a data segura desde el esquema de data de Postgres desde el esquema DDL. Así que la forma en que funciona es que simplemente defines tu esquema como de costumbre utilizando cualquier tooling que usarías para trabajar con Postgres. Así que algo como por ejemplo, luego, nosotros, proporcionamos un conjunto de reglas para poder controlar qué data se expone al sistema. Y también quién puede, quién tiene qué permisos sobre qué data. Es un poco como la security a nivel de fila, pero es un poco diferente porque está diseñado para ser portátil para que puedas ejecutar las reglas en el servicio de sincronización y en el cliente que te permite lograr algo llamado finalidad de los derechos locales. Así que no tienes que codificar para retrocesos y errores cada vez que lo haces. Correcto. Luego autenticas la aplicación local utilizando un JWT, y luego dentro del cliente, básicamente tomas el controlador SQL light estándar para tu entorno. Así que si estás en un navegador web utilizando una compilación Wasm de SQL lights, o si estás haciendo una aplicación móvil, es como un controlador React nativo o un expo o un controlador capacitor. Y luego envuelves eso con esta llamada para electrificarlo. Y eso te da una especie de versión en vivo reactiva de la conexión a la database que también es consciente de tu esquema, y sabe dónde conectar para la replicación. Luego proporcionamos una API utilizando un primitivo llamado formas, que te permite controlar qué data se sincroniza dentro y fuera del dispositivo local. Así que si te imaginas que empiezas con, digamos, una gran base de datos de postgres, y quieres sincronizar solo un subconjunto de la data en el dispositivo local. Defines una forma que podría ser como el proyecto 1234. Así que por ejemplo, aquí, como, podemos decir un proyecto e incluir todos los problemas y comentarios y los autores de los comentarios debajo de eso. Así que es un poco como hacer una consulta ORM con un gráfico de asociación. Y luego puedes definir múltiples formas a medida que avanzas. Y puedes actualizarlos en runtime. Y se agregarán en una especie de suscripción de forma combinada para una aplicación cliente en particular. Así que esa es una API que controla básicamente la replicación parcial dinámica, qué data se sincroniza en el dispositivo local. Y luego, una vez que tienes la data en la database para el dispositivo local, vinculas consultas en vivo. Así que en este caso, este es un ejemplo de resultados como una variable de estado de React, y usas un gancho de consulta en vivo. Y luego tienes un constructor de consultas inspirado en prisma para definir consultas de cómo quieres acceder a la data en la database. O puedes bajar a SQL puro. Y luego, en cualquier momento, puedes escribir data directamente en la database local. Y básicamente todo se mantiene en vivo y reactivo. Así que porque tienes este modelo de replicación activa bidireccional debajo de los componentes que controlan qué data se sincroniza dentro y fuera del dispositivo, en lugar de hacer solo consultas estáticas o recuperaciones estáticas contra el servicio de backend, lo que haces es mantener todo en vivo para que si otro usuario también cambia la data en otro lugar, tus componentes también se actualizan naturalmente. Así que aquí hay un ejemplo de un simple componente de React. Obtienes un control sobre la database electrificada. Configuras una consulta en vivo

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

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.
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.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai
Announcing Starbeam: Universal Reactivity
JSNation 2022JSNation 2022
27 min
Announcing Starbeam: Universal Reactivity
Starbeam is a library for building reactive data systems that integrate natively with UI frameworks such as React, Vue, Svelte or Ember. In this talk, Yehuda will announce Starbeam. He will cover the motivation for the library, and then get into the details of how Starbeam reactivity works, and most importantly, how you can use it to build reactive libraries today that will work natively in any UI framework. If you're really adventurous, he will also talk about how you could use Starbeam in an existing app using your framework of choice and talk about the benefits of using Starbeam as the state management system in your application.
Thinking in React Query
React Summit 2023React Summit 2023
22 min
Thinking in React Query
Top Content
In this talk, I'll explain React Query from a different perspective. After having maintained React Query for over two years and having answered many questions (often the same ones multiple times), I feel like there might be a fundamental understanding missing about the lib. I'll start with a quick introduction about my journey into open source and how I got to know React Query, followed by showing which mindset change is beneficial when working with React Query - how to "think in React Query". I'll have 3 major takeaways: 1) React Query is not a data fetching library It's an async state manager, we'll quickly talk about what makes a state manager, why React Query is one and what "async state" means. 2) staleTime is your best friend I've seen a bit of confusion about how to use React Query as a state manager, so I'll explain why setting staleTime is mostly all you need 3) parameters are dependencies This is important to understand to show the boundaries between client state and server state, and is essential when doing state management with React Query I will then end with a note on "separation of concerns" and about the tradeoffs of just calling `useQuery` wherever you need it in your component tree.

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.
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.