Estado Colaborativo en Tiempo Real en el Borde

Rate this content
Bookmark
GithubProject website

Charla práctica que muestra cómo pasar de un estado local a un estado persistente capaz de estar offline en el borde para hacer una aplicación como Figma, Notion y más.

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

FAQ

Steven vivió 7 ½ años en Sydney, Australia.

Steven trabajó en un constructor de correos electrónicos que permitía diseñar correos electrónicos responsivos mediante una herramienta de arrastrar y soltar.

Easy era una herramienta diseñada para ayudar a los diseñadores a crear animaciones para la web sin necesidad de escribir código, y permitía obtener el CSS de las animaciones creadas.

Steven trabajó en el equipo de InVision Studio, donde lideró el diseño para convertir InVision Studio en una aplicación basada en navegador y colaborativa.

LiveBlocks es una empresa que proporciona APIs y herramientas a los desarrolladores para construir experiencias colaborativas y multijugador, facilitando la creación de aplicaciones que permitan la colaboración en tiempo real.

Steven destacó a Figma por su capacidad para integrar características colaborativas de manera fluida y ofrecer una experiencia colaborativa de alta calidad, similar a estar físicamente juntos.

Steven Fabre
Steven Fabre
26 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Steven, un nerd de las herramientas de diseño, trabajó en InVision Studio y ahora se centra en LiveBlocks, proporcionando APIs y herramientas para la colaboración multijugador. Herramientas de diseño colaborativo como Figma, Canva, Mural, Notion, Mirror, Linear y Pitch utilizan algoritmos de resolución de conflictos como OTs y CRDTs. La migración de datos y los patrones de colaboración son consideraciones importantes para la construcción de aplicaciones de producción. Figma destaca por su montaje sin fisuras de características de colaboración. LiveBlocks permite a los desarrolladores de front-end construir experiencias colaborativas sin una infraestructura de backend compleja, utilizando indexación fraccional para un ordenamiento consistente.

1. Introducción a las Herramientas de Diseño y Experiencia

Short description:

Hola a todos. Mi nombre es Steven y he vivido en muchos lugares. Soy un gran nerd de las herramientas de diseño. Trabajé en Facebook Messenger y Campaign Monitor. Creé Easy y me uní a InVision. En InVision, trabajé en InVision Studio, una herramienta de diseño de interfaz de usuario.

Hola a todos. Mi nombre es Steven y he vivido en muchos lugares. Así que, estoy dando esta charla desde París hoy, pero he vivido en muchos lugares diferentes. Pasé, ya sabes, 7 ½ años en Australia, en Sydney, incluso viví en Quebec antes de eso por un poco, y también pasé unos años en la ciudad de Nueva York. Así que, sí, es genial estar aquí hoy. Y lo que quiero decirles es que soy un gran nerd de las herramientas de design. Me encanta construir. Me encanta diseñar herramientas de design. Me encanta crear aplicaciones y cosas que la gente usa a cambio y crea algo con esa herramienta que ayudé a hacer. Y entonces, este es el ángulo de mi charla. Soy un gran nerd de las herramientas de design y me encanta hacer este tipo de herramientas creativas. Así que, trabajé en Facebook Messenger por un tiempo en el equipo de sistema de design / Messenger para ayudarles con sus necesidades de tooling internamente. También pasé algún tiempo en una empresa llamada Campaign Monitor en Australia cuando estaba en Sydney. Y, mi principal proyecto allí fue trabajar en este constructor de correos electrónicos. Así que, era una herramienta de arrastrar y soltar donde podías design hermosos correos electrónicos que eran como responsivos, así que funcionaban en móvil y escritorio. Y ayudamos a las marcas a crear esos correos electrónicos de una manera muy fácil de arrastrar y soltar. Esa fue realmente la primera vez que me introdujeron a las herramientas creativas. Eso eventualmente me llevó a crear Easy. Y Easy, no sé si algunos de ustedes han oído hablar de él, es bastante antiguo ahora, era una herramienta para ayudar a los diseñadores a crear animations para la web, y luego hacer eso sin tener que codificar. Y luego solo podías hacer clic en eso y obtener el CSS de ello. Fue bastante genial. Disfruté trabajando en eso. Y eso eventualmente me llevó a unirme a InVision. Y así en InVision trabajé en el equipo responsable de crear InVision Studio. Trabajé en eso durante cuatro años y medio. Y no sé si ustedes están familiarizados con InVision Studio. Pero eso era esencialmente una herramienta de design de interfaz de usuario donde podías, ya sabes, obviamente design aplicaciones, sitios web, pero también crear animations para ellos y prototiparlos, hacerlos muy interactivos. Y esto suena bastante obvio, pero en aquellos días no había muchas herramientas que pudieran hacer ese tipo de cosas. Y realmente, esa experiencia realmente me llevó al camino en el que estoy hoy. Teníamos, ya sabes, era una aplicación de escritorio que trabajaba en el sistema de archivos, y Figma era esta increíble herramienta basada en el navegador para hacer design de interfaz de usuario y ese tipo de cosas estaba empezando a ser realmente popular.

2. Desafíos de Construir Productos Colaborativos

Short description:

La función multijugador de Figma y los desafíos de convertir InVision Studio en una herramienta colaborativa basada en el navegador me llevaron a iniciar LiveBlocks. En LiveBlocks, proporcionamos APIs y herramientas para que los desarrolladores construyan experiencias multijugador y colaborativas. Construir un producto colaborativo implica más que solo funcionalidad multijugador. Incluye características como comentarios, anotaciones, diálogos compartidos, navegación de documentos y capacidades de audio/video. Google Docs jugó un papel significativo en la configuración del panorama de SaaS colaborativo con sus capacidades de edición de documentos basadas en el navegador.

Y una cosa que Figma hizo realmente bien es que, como dije, el producto funcionaba en el navegador, lo que significa que no tienes que descargar una aplicación para que funcione, y era lo que ellos llamaban multijugador. Y entonces, eventualmente tuvimos este proyecto en InVision para convertir InVision Studio de una aplicación basada en archivos de escritorio, disculpa me, a una aplicación que era basada en el navegador y colaborativa por defecto. Y entonces lideré el design para el proyecto, y esta es la primera vez que realmente me expuse al problema de, maldita sea, esto es muy difícil de hacer. Teníamos un escuadrón dedicado de, creo, en el pico, siete ingenieros, un gerente de punto, y yo era el diseñador que encabezaba esa iniciativa. Y tomó más de un año y medio antes de que pudiéramos tener una versión funcional de esa aplicación multijugador basada en el navegador, un año y medio. Eso es mucho tiempo. Y, sí, eventualmente estaba un poco frustrado con esto porque era como esto, simplemente no entiendo cómo esto podría llevar tanto tiempo. Pero eso es así. Como que lleva mucho tiempo construir ese tipo de experiencias cuando haces todo eso tú mismo. Y al estar expuesto a eso no me di cuenta, pero eso eventualmente me llevó al camino en el que estoy hoy. Dirijo una empresa llamada LiveBlocks y en LiveBlocks lo que hacemos, proporcionamos APIs y herramientas a desarrolladores como ustedes para construir experiencias multijugador, pero también más ampliamente experiencias colaborativas como comentarios y prácticamente cualquier cosa que quieras hacer que sea colaborativa y requiera que varias personas trabajen juntas en algún tipo de experiencia digital. Pero no te preocupes. Esto no es un discurso de ventas. Prometo que solo estoy aquí para compartir mis aprendizajes y profundizar en los entresijos de esas infraestructuras, el tipo de infraestructura necesaria para construir ese tipo de experiencias. Pero sí, solo para mostrar que este problema que enfrenté personalmente con mi co-fundador Guillaume en InVision se ha convertido, quiero decir, siempre ha sido un problema, pero más en los últimos años ha habido muchas tecnologías y frameworks para trabajar en este problema. Y entonces muchos de esos frameworks y herramientas cuando hablan de esto a menudo se refieren a multijugador. Pero en el mundo de la colaboración, cuando construyes un producto SaaS colaborativo, el multijugador es solo la punta del iceberg. Hay muchas más cosas en las que pensar al construir un producto colaborativo, ¿verdad? Necesitas pensar en, bueno, cuando mis usuarios están en mi producto, ¿cómo pueden dejar comentarios? ¿Cómo pueden mencionar a sus compañeros de trabajo o colaboradores en comentarios, en anotaciones específicas dentro del documento, para que esas personas terminen colaborando de manera asincrónica y puedan unirse al documento y ser notificados en otro lugar? También hay diálogos compartidos, como ¿cómo compartes un artefacto o algo con alguien más? ¿Cómo agregas a esas personas? ¿Cómo te encargas de los permisos para esas personas? Y luego, obviamente, una vez que tienes esos documentos y esos artefactos colaborativos funcionando, ¿cómo los navegas? ¿Cómo los encuentras? ¿Cómo encuentras todos esos documentos? ¿Cómo compartes ese conjunto de documentos? ¿Cómo los pones en una carpeta y ese tipo de cosas? Así que la navegación de documentos es una gran parte de eso. Y luego, obviamente, cosas como audio y video se están volviendo cada vez más presentes. Así que si quieres hacer una reunión de audio, puedes hacer ese tipo de cosas. Compartir como un video mientras trabajas en algo. Tener esa experiencia directamente en la herramienta se está volviendo cada vez más relevante para una experiencia colaborativa. Y entonces, si retrocedemos y pensamos en cómo llegamos al estado en el que estamos hoy en términos de productos SaaS colaborativos. Para mí, realmente comenzó con Google Docs. Creo que fue hace 15 o 20 años en este punto. Introdujeron esto no es la captura de pantalla. Ves, esto es mucho más reciente, pero introdujeron Google Docs, un documento basado en el navegador o similar a Microsoft Word. Y fue alucinante. Como que podrías abrir una URL y esa URL era prácticamente un documento de Word. Y podrías editarlo.

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 2023React Advanced 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.
Depuración Web Moderna
JSNation 2023JSNation 2023
29 min
Depuración Web Moderna
Top Content
This Talk discusses modern web debugging and the latest updates in Chrome DevTools. It highlights new features that help pinpoint issues quicker, improved file visibility and source mapping, and ignoring and configuring files. The Breakpoints panel in DevTools has been redesigned for easier access and management. The Talk also covers the challenges of debugging with source maps and the efforts to standardize the source map format. Lastly, it provides tips for improving productivity with DevTools and emphasizes the importance of reporting bugs and using source maps for debugging production code.
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.
Entendiendo la Arquitectura Fiber de React
React Advanced 2022React Advanced 2022
29 min
Entendiendo la Arquitectura Fiber de React
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.

Workshops on related topic

Aventuras de Renderizado Concurrente en React 18
React Advanced 2021React Advanced 2021
132 min
Aventuras de Renderizado Concurrente en React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
Con el lanzamiento de React 18 finalmente obtenemos el tan esperado renderizado concurrente. Pero, ¿cómo va a afectar eso a tu aplicación? ¿Cuáles son los beneficios del renderizado concurrente en React? ¿Qué necesitas hacer para cambiar al renderizado concurrente cuando actualices a React 18? ¿Y qué pasa si no quieres o no puedes usar el renderizado concurrente todavía?

¡Hay algunos cambios de comportamiento de los que debes estar al tanto! En esta masterclass cubriremos todos esos temas y más.

Acompáñame con tu portátil en esta masterclass interactiva. Verás lo fácil que es cambiar al renderizado concurrente en tu aplicación React. Aprenderás todo sobre el renderizado concurrente, SuspenseList, la API startTransition y más.
React, TypeScript y TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Dominando conceptos avanzados en TypeScript
React Summit US 2023React Summit US 2023
132 min
Dominando conceptos avanzados en TypeScript
Top Content
Featured WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
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.
De Todo App a B2B SaaS con Next.js y Clerk
React Summit US 2023React Summit US 2023
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.
Práctica con la Rejilla de Datos React de AG Grid
React Summit 2022React Summit 2022
147 min
Práctica con la Rejilla de Datos React de AG Grid
Top Content
WorkshopFree
Sean Landsman
Sean Landsman
Comienza con la Rejilla de Datos React de AG Grid con un tutorial práctico del equipo central que te llevará a través de los pasos para crear tu primera rejilla, incluyendo cómo configurar la rejilla con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la rejilla y diferentes formas de agregar renderizado personalizado a la rejilla. Al final de la masterclass, habrás creado una Rejilla de Datos React de AG Grid y personalizado con componentes React funcionales.- Comenzando e instalando AG Grid- Configurando ordenación, filtrado, paginación- Cargando datos en la rejilla- La API de la rejilla- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la rejilla con Componentes React