P2P React: Estado Local-Primero, Verdad Compartida

This ad is not shown to multipass and full ticket holders
React Advanced
React Advanced 2026
October 23 - 26, 2026
London, UK & Online
Upcoming event
React Advanced 2026
React Advanced 2026
October 23 - 26, 2026. London, UK & Online
Bookmark
Rate this content
Sentry
Promoted
Code breaks, fix it faster

Crashes, slowdowns, regressions in prod. Seer by Sentry unifies traces, replays, errors, profiles to find root causes fast.

Get started

La mayoría de las aplicaciones tratan al servidor como la verdad. Peer-to-peer invierte eso: el estado comienza localmente, los usuarios llevan los datos y la verdad compartida emerge sin enrutar cada interacción a través de un backend central.

Esquema:

- El modelo normal de React/backend
- Servidor/base de datos como la fuente de verdad
- El giro local-primero
- El estado local se convierte en la experiencia principal del usuario
- De local-primero a peer-to-peer
- Los usuarios replican el estado directamente en lugar de solo sincronizar a través de APIs
- Usando una aplicación de chat como ejemplo en ejecución, con comparaciones rápidas con documentos, tableros y compartición de medios
- Cómo emerge la verdad compartida
- Las acciones de los usuarios como operaciones firmadas en registros de solo anexión
- Las reglas deterministas de la aplicación deciden qué operaciones son válidas
- Los pares acuerdan el orden y pueden verificar independientemente el estado resultante
- Qué significa esto para los desarrolladores de React
- La interfaz de usuario se convierte en una vista sobre el estado replicado localmente
- Verificación de la realidad y conclusiones
- P2P no elimina la complejidad del backend; la convierte en diseño de protocolo y estado
- Las compensaciones incluyen disponibilidad, permisos, manejo de conflictos y migraciones
- Estas son aplicaciones normales con una fuente de verdad diferente, y son posibles ahora

Se mantendrá a un nivel alto, práctico y basado en ejemplos. Incluyendo algunas lecciones de construir aplicaciones reales peer-to-peer como Keet.

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

Mikkel Malmberg
Mikkel Malmberg
27 min
12 Jun, 2026

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Imagina que los usuarios finalmente usan tu aplicación, pero los costos y la operación del servidor generan preocupaciones. Peer-to-peer podría ofrecer soluciones para gestionar el tráfico de usuarios de manera efectiva. Se cuestiona la confianza en la fiabilidad del servidor. Se discute peer-to-peer para la resolución de problemas y el control del usuario a través de claves y perfiles. Usuarios invitados a espacios con roles definidos. Aplicaciones construidas de manera distribuida. Mensajes firmados con claves para una verdad compartida como blockchain. Procesamiento determinista de mensajes. Compartición segura de datos y control de acceso. Desarrollo de SDK para aplicaciones peer-to-peer. Definición de esquemas para aplicaciones, como bunk docs. Utilización de middleware para la funcionalidad de la aplicación. Despliegue en peer-to-peer para acceso sin restricciones. Plataforma peer para el desarrollo de aplicaciones. Asegurando la seguridad de los datos y los riesgos del hardware de los pares. Uso de servidores como relés para una funcionalidad óptima. Exploración del consumo de energía de P2P y almacenamiento de datos offline. Consideraciones para servidores de relé en redes P2P. Exploración de consideraciones de rendimiento y estrategias de servicio de relé inteligente en redes peer-to-peer. Exploración del impacto de los seeders en el ancho de banda en redes peer-to-peer y el uso opcional de servidores de relé para la transmisión de datos, enfatizando el creciente enfoque en la seguridad entre los desarrolladores. Discusión sobre la retención de metadatos en aplicaciones de mensajería, con un enfoque en el enfoque de seguridad de Keed y la distribución de datos en una red peer. Discusión sobre la sincronización de dispositivos cliente y técnicas de almacenamiento de datos para mantener los cambios de documentos en aplicaciones de colaboración en tiempo real.

1. User Engagement and Server Operations

Short description:

Imagina que los usuarios finalmente están usando tu aplicación, pero los costos y la operación del servidor generan preocupaciones. Peer-to-peer podría ofrecer soluciones para gestionar el tráfico de usuarios de manera efectiva.

Primero, quiero que cierres los ojos e imagines a un usuario en tu aplicación. ¿Puedes creerlo? Sucedió todo este tiempo construyendo. De repente aparecieron. Este es el sueño. Este es el sueño en el que pasaste tanto tiempo. Ahora finalmente están aquí. Los gráficos están graficando. Los usuarios están usando. ¿Son usuarios? ¿Son bots? ¿Quién sabe siquiera? ¿A quién le importa? Está sucediendo. El sueño es real. Finalmente pusiste IndieHacker en tu perfil de Twitter y esperas despertar a niveles de pares de riqueza y fama.

Y luego, al día siguiente, te despiertas y de repente los usuarios están allí, muchos usuarios, construiste una aplicación, es como una especie de cosa de chat. Tal vez sea como compartir archivos multimedia. Hay mucho almacenamiento de medios. Las facturas también comienzan a aparecer. Recibes una factura de tu proveedor de hosting llamado Triangle. Es como 20k de la nada. ¿Cómo? ¿Cómo? ¿Fueron solo imágenes? Luego tu proveedor de base de datos, SuperMaze, otra factura, Dork, tu servicio de autenticación cobra por asiento. ¿Los bots necesitan asientos? ¿Los bots tienen bots? ¿Quién sabe? Pero todos estos usuarios usando tu aplicación, este es el sueño. ¿No debería ser algo bueno?

De repente comienza a pesarte. ¿Cómo voy a pagar por este tráfico y todo este uso? Y aquí es donde puede entrar peer-to-peer. Porque ¿y si todos esos usuarios fueran realmente algo bueno que te ayudaría? Pero antes de eso, el problema aquí es que todo pasa por los servidores. Pero ¿qué es siquiera un servidor? En el sentido tradicional es más o menos tres cosas. Digamos que son al menos tres cosas. Así que están todas las solicitudes post que llegan de los usuarios. Van al servidor. El servidor las valida, se asegura de que todo esté bien, y almacena los datos. Y luego, por supuesto, en el otro extremo, están todas las solicitudes get, la gente leyendo los datos. Así que almacena los datos, se asegura de que los datos sean válidos, y luego entrega los datos, supongo. Sostiene la verdad y los datos.

2. Peer-to-Peer User Control

Short description:

La confianza en la fiabilidad del servidor es cuestionada. Se discute el peer-to-peer para la resolución de problemas y el control del usuario a través de claves y perfiles.

Pero está bien. Podemos confiar en esto. Quiero decir, al menos nosotros sí. Confiamos en esto. Porque sí, lo hacemos. Pero también esto se convierte en un único punto de fallo. Si el servidor tiene un mal día, este servidor feliz se cae, GitHub. ¿Qué pasa entonces? Todo se cae. Nada funciona. Así que, pero luego recuerdas en tu cosa de construcción de aplicaciones aquí que una vez fuiste a una conferencia y había este tipo guapo, inteligente, brillante, hablando sobre peer-to-peer. Y al día siguiente, había otro tipo también hablando sobre peer-to-peer. Y mencionó cómo esto resolvería algunos de estos problemas.

Así que peer-to-peer, solo las mismas cosas. No puedes eliminar estas cosas. Solo las redistribuyes. Y hacemos esto con criptografía simple. Así que lo primero que tenemos es ¿qué es siquiera un usuario en este espacio? En un sentido tradicional, es la fila de la tabla, fila de la tabla HTML en doc, tu proveedor de autenticación, o es una fila en tu base de datos. ¿Qué está pasando? ¿Es mi barba? Una fila en una base de datos. Así que ese es el usuario tradicional que pensamos. Pero en realidad, un usuario en este sentido es como las claves. Las claves que usas para firmar las cosas que entran en este sistema compartido. Así que antes de tener un usuario, tienes un conjunto de claves.

Y luego podemos hacer que inventemos esto llamado un perfil. Estamos acostumbrados a tener perfiles, es como un avatar, y una descripción, y un nombre de usuario o lo que sea. Y podemos hacer que estas claves sean las únicas claves que pueden controlar este perfil en el sentido de que el uso se convierte en ese perfil, y las claves determinan quién puede modificarlo. Y puedes tener múltiples claves controlando el mismo perfil, como tu móvil y tu escritorio. De todos modos, ahora tenemos usuarios de nuevo. Y luego todos los usuarios, por supuesto, se reúnen alrededor de cosas. Así que en el ejemplo de la aplicación de chat es probablemente la sala, por ejemplo. Estamos construyendo una aplicación de chat en Tether llamada Keet.

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

Diseño Dirigido por Dominio con Aplicaciones Vue
Vue.js London 2023Vue.js London 2023
14 min
Diseño Dirigido por Dominio con Aplicaciones Vue
Top Content
Welcome to this talk on domain-driven design in Vue.js application. Today we are going to look into domain-driven design, its benefits and how it works with Vue.js domain-driven design versus the MVVM model. Vue.js thrives in domain-driven design, a design approach that models software to match a domain. DDD emphasizes understanding business logic and creating a domain that reflects the language and concepts. Integrating DDD in Vue.js offers benefits such as effective modeling of complex business domains, structured code reflecting domain logic, and easier onboarding and ownership.
Cargadores de datos: Mejorando la obtención de datos en Vue
Vue.js Live 2024Vue.js Live 2024
30 min
Cargadores de datos: Mejorando la obtención de datos en Vue
Data loaders provide a solution for complex and repetitive data fetching in Vue.js applications. Using data loaders allows for more independent data fetching and integrates with the navigation cycle. The data loader plug-in adds a navigation guard for data fetching and loading. Lazy loading and caching can be implemented using Pina Colada and Glada loaders. These loaders can improve the performance and speed of data fetching in applications.
No Seriously: htmx es Pro-JavaScript!
JSNation US 2024JSNation US 2024
29 min
No Seriously: htmx es Pro-JavaScript!
HTMX is a hypermedia-oriented front-end library that enhances HTML as a hypermedia. It generalizes the concept of hypermedia controls in HTML, allowing any element to become a hypermedia control. HTMX provides practical attributes like HX swap and HX indicator. The active search demo showcases the dynamic behavior achievable with HTMX. HTMX allows developers to build web applications without writing a ton of JavaScript. It works well for traditional web apps but may not be suitable for offline functionality or fast interactions. HTMX can be integrated with JSX and various backend stacks, and TypeScript can be used alongside HTMX.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
JSNation 2022JSNation 2022
28 min
¡MIDI en el Navegador... ¡Vamos a Rockear la Web!
MIDI is a versatile communication protocol that extends beyond music and opens up exciting possibilities. The Web MIDI API allows remote access to synths and sound modules from web browsers, enabling various projects like music education systems and web audio-based instruments. Developers can connect and use MIDI devices easily, and the Web MIDI API provides raw MIDI messages without semantics. The WebMidi.js library simplifies working with the Web MIDI API and offers a user-friendly interface for musicians and web developers. MIDI on the web has generated significant interest, with potential for commercial growth and endless possibilities for web developers.
La próxima ola de frameworks web es BYOJS
JSNation 2022JSNation 2022
23 min
La próxima ola de frameworks web es BYOJS
The next wave of web frameworks is BYOJS, covering the history and evolution of building web applications. The evolution of web frameworks and build systems includes popular choices like React, Angular, and Vue, as well as advanced build systems like Webpack and Rollup. The rise of performance measurement tools and the adoption of the Jamstack have led to improved web performance. The Jamstack architecture focuses on pre-rendering pages, decoupling APIs and services, and enhancing pages with JavaScript. Astro, a static site generator with SSR support, promotes the islands architecture and partial hydration.

Workshops on related topic

Aplicación Full-stack en medio Día: Next.js 15 Masterclass de Desarrollo
React Summit 2025React Summit 2025
175 min
Aplicación Full-stack en medio Día: Next.js 15 Masterclass de Desarrollo
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
¡Desbloquea el Poder del Desarrollo Moderno Full-Stack en Medio Día!¿Listo para construir aplicaciones web rápidas y escalables? Únete a nuestra inmersiva masterclass interactiva de 4 horas y sumérgete de lleno en el mundo de Full-Stack Next.js 15!Esto no es solo otra sesión teórica. Te arremangaras y construirás una aplicación de comparación de películas del mundo real desde cero, guiado paso a paso por nuestro experto instructor Maurice. Comenzaremos configurando tu entorno de desarrollo local con una robusta base de datos PostgreSQL ejecutándose en un contenedor Docker. Luego, experimentarás la magia de la generación rápida de UI usando v0.dev, permitiéndote crear interfaces impresionantes con facilidad.Pero no nos detendremos en el front-end. Aprenderás cómo integrar sin problemas tu UI con un potente backend usando las últimas características de Next.js 15 y el elegante Prisma ORM para interactuar con tu base de datos PostgreSQL. Además, descubrirás las mejores prácticas para manejar el comportamiento del lado del cliente con una divertida e interactiva función de comparación de películas.Finalmente, llevaremos tu aplicación en vivo con despliegue continuo a Vercel, mostrando cómo compartir sin esfuerzo tus creaciones con el mundo. Al final de esta masterclass, tendrás una aplicación de comparación de películas completamente funcional y la confianza para abordar tus propios proyectos full-stack utilizando el vanguardista ecosistema de Next.js 15.
Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
95 min
Cómo Crear una Aplicación Web de Manera (Casi) Autónoma Usando Clean Coder
Workshop
Grigorij Dudnik
Grigorij Dudnik
Imagina reemplazarte a ti mismo con un programador de IA multi-agente para desarrollar tu aplicación web de producción. Eso es exactamente lo que hicimos en mi startup takzyli.pl. Para lograr esto, diseñamos y utilizamos el Clean Coder - marco de agentes de IA para la escritura autónoma de código (https://github.com/GregorD1A1/Clean-Coder-AI), que es un proyecto de código abierto, con suerte. Si funcionó para nosotros, ¿por qué no debería funcionar para ti?En esta masterclass, te mostraré cómo crear una aplicación web completa de manera (casi) autónoma y reducir drásticamente el tiempo que tú o tus empleados pasan escribiendo código.
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
JSNation 2023JSNation 2023
66 min
Construye una Biblioteca Universal de Datos Reactiva con Starbeam
WorkshopFree
Yehuda Katz
Yehuda Katz
Esta sesión se centrará en los bloques de construcción universales de Starbeam. Usaremos Starbeam para construir una biblioteca de datos que funcione en múltiples frameworks.Escribiremos una biblioteca que almacene en caché y actualice datos, y admita relaciones, ordenación y filtrado.En lugar de obtener datos directamente, funcionará con datos obtenidos de forma asíncrona, incluidos los datos obtenidos después de la representación inicial. Los datos obtenidos y actualizados a través de web sockets también funcionarán bien.Todas estas características serán reactivas, por supuesto.Imagina que filtras tus datos por su título y luego actualizas el título de un registro para que coincida con el filtro: cualquier resultado que dependa de los datos filtrados se actualizará para reflejar el filtro actualizado.En 90 minutos, construirás una increíble biblioteca de datos reactiva y aprenderás una nueva herramienta poderosa para construir sistemas reactivos. La mejor parte: la biblioteca funciona en cualquier framework, incluso si no piensas en (o dependes de) ningún framework al construirla.
Tabla de contenidos- Almacenar un registro obtenido en una celda- Almacenar múltiples registros en un Mapa reactivo- La iteración reactiva es una iteración normal- El filtrado reactivo es un filtrado normal- Obtener más registros y actualizar el Mapa- La ordenación reactiva es una ordenación normal (¿se está volviendo un poco repetitivo?)- Modelar la invalidación de la caché como datos- Bonus: relaciones reactivas
Construye aplicaciones Web3 con React
React Summit 2022React Summit 2022
51 min
Construye aplicaciones Web3 con React
Workshop
Shain Dholakiya
Shain Dholakiya
El masterclass está diseñado para ayudar a los desarrolladores Web2 a comenzar a construir para Web3 utilizando el Hyperverse. El Hyperverse es un mercado abierto de módulos inteligentes construidos por la comunidad, auditados y fáciles de descubrir. Nuestro objetivo es hacer que sea fácil para los desarrolladores de React construir aplicaciones Web3 sin escribir una sola línea de código de contrato inteligente. Piensa en 'npm para contratos inteligentes'.
Aprende más sobre el Hyperverse aquí.
Repasaremos todos los conceptos básicos de blockchain/crypto que necesitas saber para comenzar a construir en el Hyperverse, por lo que no necesitas tener ningún conocimiento previo sobre el espacio Web3. Solo necesitas tener experiencia en React.