Software Local-Primero Con ElectricSQL

Rate this content
Bookmark

Local-primero es un nuevo paradigma para desarrollar aplicaciones, donde tus componentes hablan con una base de datos local incorporada y obtienes reactividad instantánea, sincronización multiusuario y soporte sin conflictos para trabajar sin conexión. ElectricSQL es una nueva plataforma de código abierto para el desarrollo local-primero de los inventores de CRDTs. Esta charla introduce el desarrollo local-primero y muestra cómo puedes desarrollar aplicaciones locales-primero reales hoy con React + ElectricSQL.

This talk has been presented at React Advanced Conference 2023, check out the latest edition of this React Conference.

FAQ

El software local first es un patrón de diseño en el que la base de datos o almacén se mueve a la aplicación local del usuario, permitiendo que las operaciones como la lectura y escritura de datos se realicen directamente en el dispositivo del usuario, lo que reduce la latencia y mejora la disponibilidad de la aplicación, especialmente en escenarios de conexión a internet limitada o inestable.

Electric React está diseñado para trabajar siguiendo el patrón local first, permitiendo a los desarrolladores escribir directamente a una base de datos local incrustada, como SQLite, desde un componente React. Esto facilita una actualización instantánea de la UI y sincroniza los datos en segundo plano con un servidor central, lo que mejora la reactividad y el rendimiento de las aplicaciones.

El patrón local first ofrece varias ventajas como cero latencia en las operaciones de base de datos local, funcionamiento sin conexión, propiedad de datos por parte de los usuarios, sincronización en tiempo real entre múltiples usuarios y simplificación del mantenimiento del software al reducir la necesidad de APIs complejas y microservicios.

Electric SQL es un proyecto que proporciona una capa de sincronización diseñada para integrarse con bases de datos PostgreSQL y aplicaciones React, facilitando la adopción del patrón local first. Ofrece sincronización en tiempo real, gestión de conflictos y soporte offline, permitiendo a los desarrolladores construir aplicaciones robustas y altamente interactivas.

El enfoque local first resuelve problemas de latencia y disponibilidad que son comunes en el modelo cloud first, donde la interacción del usuario depende de la conexión a internet. Además, mejora la privacidad y la seguridad de los datos al almacenarlos localmente en el dispositivo del usuario y reduce la complejidad y el costo de mantener alta disponibilidad y fiabilidad en los servidores.

La replicación activa-activa es crucial en aplicaciones local first porque permite la sincronización de datos en tiempo real entre múltiples dispositivos o instancias de la aplicación, asegurando que todos los usuarios vean la misma información actualizada sin importar en qué dispositivo estén trabajando. Esto es especialmente útil para aplicaciones colaborativas en tiempo real como editores de documentos o aplicaciones de gestión de proyectos.

Electric SQL utiliza CRDTs (Conflict-Free Replicated Data Types) para manejar la consistencia de datos en un ambiente distribuido. Esto permite que las aplicaciones mantengan una consistencia fuerte de manera causal y transaccional, resolviendo conflictos de forma automática y eficiente, lo que es ideal para escenarios de escritura local con sincronización en segundo plano.

James Arthur
James Arthur
29 min
23 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

El software local-primero permite la visualización instantánea de datos al usuario, ofreciendo cero latencia y funcionalidad sin conexión. Simplifica la sincronización de datos y permite la sincronización en tiempo real de múltiples usuarios. Herramientas populares como Facebook Messenger y las aplicaciones de Google Workspace han adoptado este patrón. Electric SQL proporciona una capa de sincronización para aplicaciones existentes, combinando funcionalidad en tiempo real con capacidades sin conflictos para trabajar sin conexión. El software local-primero reemplaza las APIs y los microservicios con un protocolo de replicación estandarizado, simplificando la gestión del estado y reduciendo la carga del servidor.

1. Introducción al Software LocalFirst

Short description:

Hola. Mi nombre es James Arthur. Soy el CEO y uno de los cofundadores de Electric SQL. Hoy voy a hablar sobre el software local first y cómo puedes construirlo usando Electric React. En el desarrollo de software tradicional, la solicitud del usuario se envía al servidor a través de la red, y el servidor responde con el resultado. Sin embargo, con el software LocalFirst, la base de datos se traslada a la aplicación local, permitiendo la visualización instantánea de los datos al usuario. Este patrón ofrece cero latencia y funcionalidad fuera de línea, además de dar a los usuarios la propiedad de sus datos.

Hola. Mi nombre es James Arthur. Soy el CEO y uno de los cofundadores de Electric SQL. Y hoy voy a hablar sobre el software local first y cómo puedes construirlo usando Electric React. Así que para empezar, este es un diagrama bastante simplificado de, supongo, el desarrollo de software a la antigua. Muestra una arquitectura de tipo cloud first. El usuario llega, hace clic en el botón, se envía algún tipo de solicitud al servidor a través de la red. El servidor luego responde con el resultado. Esto podría ser una solicitud de página completa. Podría ser Ajax. Y luego muestras los resultados al usuario. Y si contrastas eso con el software LocalFirst, con LocalFirst, mueves la base de datos o almacén a la aplicación local, el usuario hace clic en el botón, va directamente a la base de datos local, y se muestra instantáneamente al usuario, y luego los datos se sincronizan a través de la red en segundo plano. Así que eso es más o menos de lo que estamos hablando como patrón. Y solo como una rápida orientación en términos de código. Así que este es un ejemplo de componente react que está configurado para trabajar de manera LocalFirst. Así tienes esta función add que es un manejador de callback, que está vinculado a un evento de clic. Llamas a este método create, y escribe directamente a una base de datos local incrustada, en este caso una base de datos SQLite. Luego puedes consultar esa base de datos local directamente en el código de la aplicación, y típicamente tienes un patrón en vivo o reactivo donde estás vinculando los resultados de la consulta a una variable de estado react. Así que eso es una orientación de lo que estamos hablando.

2. Beneficios del Patrón Local-First

Short description:

Local-first es un patrón que elimina la dependencia de la red para las interacciones de la aplicación, proporcionando cero latencia y funcionalidad fuera de línea. Los usuarios tienen la propiedad de sus datos, y las aplicaciones pueden funcionar incluso cuando el back end está caído. Este patrón simplifica la sincronización de datos y permite la sincronización en tiempo real de múltiples usuarios. Aplicaciones modernas, como Figma y Linear, se construyen en este patrón para ofrecer una experiencia de usuario superior.

Entonces, ¿por qué es local-first un buen patrón o una buena idea? Si vuelves a este diagrama simple de nuevo, con este patrón cloud-first básicamente tienes la red en el camino de interacción, por lo que tu disponibilidad y tu latencia están ligeramente a merced de la conexión de red del usuario. Es muy importante diseñar una alta fiabilidad, como necesitas el servidor en línea para atender las solicitudes, por lo que empujas estos altos números de nueves, y es muy costoso hacer ese tipo de ingeniería de fiabilidad. Si las cosas tardan un tiempo en la red, el usuario está allí esperando un spinner de carga, están esperando que las cosas se carguen. Como desarrollador, porque estás escribiendo código que mueve data de un lado a otro a través de la red, tienes que escribir un montón de cosas para manejar errores de red y escenarios de fallo, y también porque los data tienden a ser almacenados en la cloud, es una especie de objetivo para lo que tienes hoy en día en torno a modelos donde las empresas ofrecen productos para obtener data de usuario para luego explotar los data y analizarlos y venderlos. Esos son algunos de los desafíos con este enfoque tradicional cloud-first. Con local-first, lo que obtienes es... Más bien, obviamente, porque mueves la base de datos local a la aplicación, no tienes la red en el camino de interacción, obtienes cero latencia. Las aplicaciones básicamente funcionan por defecto, por lo que funcionan fuera de línea incluso cuando la red está caída, funcionan incluso cuando el back-end está caído. Tienes esta primera copia de los data dentro de la aplicación local, por lo que los usuarios realmente poseen sus data. Porque tienes este tipo de cero latencia, tan pronto como un usuario hace algo, se muestra instantáneamente. Tienes este tipo de calidad de reactividad instantánea y sensación instantánea en las aplicaciones. Porque los data se sincronizan en segundo plano a través de la replicación activa-activa, obtienes esta sincronización natural en tiempo real de múltiples usuarios. También en muchos casos simplifica la operación del software porque mueves la forma en que estás moviendo los data de un lado a otro a través de la red, lejos de un conjunto completo de diferentes APIs y microservices a solo un protocolo de replicación estandarizado. Y significa que también el back-end simplemente no necesita ser diseñado para niveles tan altos de fiabilidad, porque las aplicaciones pueden funcionar incluso si el back-end está caído. Así que esa es una especie de introducción a por qué local-first, y creo que si miras muchas aplicaciones modernas que han estado alterando su sector o construyendo la mejor posible user experience, ahora están siendo construidas en este patrón, ¿verdad? Así que en el lado izquierdo, tienes Figma, por ejemplo, Figma fue recientemente comprado por Adobe por creo que 30 mil millones de dólares. Pero porque han podido construir un producto que tenía colaboración en tiempo real, y esta experiencia local-first incorporada directamente en él. Arriba a la derecha, tienes Linear, como Linear es un proyecto super ágil, de sensación instantánea

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

Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
Joe Savona
Mofei Zhang
2 authors
The Talk discusses React Forget, a compiler built at Meta that aims to optimize client-side React development. It explores the use of memoization to improve performance and the vision of Forget to automatically determine dependencies at build time. Forget is named with an F-word pun and has the potential to optimize server builds and enable dead code elimination. The team plans to make Forget open-source and is focused on ensuring its quality before release.
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
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Los Átomos de Jotai Son Simplemente Funciones
React Day Berlin 2022React Day Berlin 2022
22 min
Los Átomos de Jotai Son Simplemente Funciones
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Featured Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Modelado de Bases de Datos Relacionales para GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Modelado de Bases de Datos Relacionales para GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
En esta masterclass profundizaremos en el modelado de datos. Comenzaremos con una discusión sobre varios tipos de bases de datos y cómo se mapean a GraphQL. Una vez que se haya establecido esa base, el enfoque se desplazará a tipos específicos de bases de datos y cómo construir modelos de datos que funcionen mejor para GraphQL en varios escenarios.
Índice de contenidosParte 1 - Hora 1      a. Modelado de Datos de Bases de Datos Relacionales      b. Comparando Bases de Datos Relacionales y NoSQL      c. GraphQL con la Base de Datos en menteParte 2 - Hora 2      a. Diseño de Modelos de Datos Relacionales      b. Relación, Construcción de Tablas Multijoin      c. Complejidades de Consulta de Modelado de Datos Relacionales y GraphQL
Prerrequisitos      a. Herramienta de modelado de datos. El formador utilizará dbdiagram      b. Postgres, aunque no es necesario instalar esto localmente, ya que estaré utilizando una imagen de Dicker de Postgres, de Docker Hub para todos los ejemplos      c. Hasura
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
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!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.