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.

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
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
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.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Solid captó la atención de la comunidad frontend al popularizar la programación reactiva con su convincente uso de Señales para renderizar sin re-renderizaciones. Los hemos visto adoptados en el último año en todo, desde Preact hasta Angular. Las Señales ofrecen un conjunto poderoso de primitivas que aseguran que tu interfaz de usuario esté sincronizada con tu estado, independientemente de los componentes. Un lenguaje universal para la interfaz de usuario frontend.
Pero, ¿qué pasa con lo Asíncrono? ¿Cómo logramos orquestar la carga y mutación de datos, el renderizado en el servidor y la transmisión? Ryan Carniato, creador de SolidJS, echa un vistazo a una primitiva diferente. Una que a menudo se malinterpreta pero que es igual de poderosa en su uso. Únete a él mientras muestra de qué se trata todo este Suspense.
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
Todos amamos GraphQL, pero puede ser desalentador poner en marcha un servidor y mantener tu código organizado, mantenible y testeable a largo plazo. ¡No más! Ven a ver cómo paso de un directorio vacío a una API GraphQL completamente desarrollada en cuestión de minutos. Además, verás lo fácil que es usar y crear directivas para limpiar aún más tu código. ¡Vas a amar aún más GraphQL una vez que hagas las cosas Redwood Easy!
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
Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai
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
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Workshops on related topic

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.
Escalando tu base de datos con ReadySet
Node Congress 2023Node Congress 2023
33 min
Escalando tu base de datos con ReadySet
WorkshopFree
Aspen Smith
Nick Marino
2 authors
La base de datos puede ser una de las partes más difíciles de escalar en una aplicación web. Muchos proyectos terminan utilizando sistemas de caché ad-hoc que son complejos, propensos a errores y costosos de construir. ¿Qué pasaría si pudieras implementar un sistema de caché listo para usar para mejorar el rendimiento y la optimización de consultas sin necesidad de realizar cambios en el código de tu aplicación?
Únete a los desarrolladores Aspen Smith y Nick Marino para ver cómo puedes cambiar una línea de configuración en tu aplicación y utilizar ReadySet para escalar el rendimiento de tus consultas en órdenes de magnitud hoy mismo.