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 Conference 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 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.
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.
El Futuro de las Herramientas de Rendimiento
JSNation 2022JSNation 2022
21 min
El Futuro de las Herramientas de Rendimiento
Top Content
Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

Workshops on related topic

Aventuras de Renderizado Concurrente en React 18
React Advanced Conference 2021React Advanced Conference 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 Conference 2021React Advanced Conference 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.
Comenzando con Suspense y Renderizado Concurrente en React
React Summit 2020React Summit 2020
125 min
Comenzando con Suspense y Renderizado Concurrente en React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React sigue evolucionando y haciendo que las cosas difíciles sean más fáciles para el desarrollador promedio.
Un caso en el que React no era particularmente difícil pero muy repetitivo, es trabajar con solicitudes AJAX. Siempre hay una trinidad de estados de carga, éxito y posibles errores que deben manejarse cada vez. Pero ya no, ya que el componente `<Suspense />` facilita mucho la vida.
Otro caso es el rendimiento de aplicaciones más grandes y complejas. Por lo general, React es lo suficientemente rápido, pero con una aplicación grande, la renderización de componentes puede entrar en conflicto con las interacciones del usuario. El renderizado concurrente se encargará de esto, en su mayoría de forma automática.
Aprenderás todo sobre cómo usar <Suspense />, mostrar indicadores de carga y manejar errores. Verás lo fácil que es comenzar con el renderizado concurrente. Harás que el suspense sea aún más capaz combinándolo con el renderizado concurrente, el gancho `useTransition()` y el componente <SuspenseList />.
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.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.