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.

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.

Available in English

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

React Compiler - Understanding Idiomatic React (React Forget)
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
Top Content
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
Modern Web Debugging
JSNation 2023JSNation 2023
29 min
Modern Web Debugging
Top Content
Few developers enjoy debugging, and debugging can be complex for modern web apps because of the multiple frameworks, languages, and libraries used. But, developer tools have come a long way in making the process easier. In this talk, Jecelyn will dig into the modern state of debugging, improvements in DevTools, and how you can use them to reliably debug your apps.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.
SolidJS: Why All the Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: Why All the Suspense?
Top Content
Solid caught the eye of the frontend community by re-popularizing reactive programming with its compelling use of Signals to render without re-renders. We've seen them adopted in the past year in everything from Preact to Angular. Signals offer a powerful set of primitives that ensure that your UI is in sync with your state independent of components. A universal language for the frontend user interface.
But what about Async? How do we manage to orchestrate data loading and mutation, server rendering, and streaming? Ryan Carniato, creator of SolidJS, takes a look at a different primitive. One that is often misunderstood but is as powerful in its use. Join him as he shows what all the Suspense is about.
From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
Our understanding of performance & user-experience has heavily evolved over the years. Web Developer Tooling needs to similarly evolve to make sure it is user-centric, actionable and contextual where modern experiences are concerned. In this talk, Addy will walk you through Chrome and others have been thinking about this problem and what updates they've been making to performance tools to lower the friction for building great experiences on the web.

Workshops on related topic

Concurrent Rendering Adventures in React 18
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
Maurice de Beijer
Maurice de Beijer
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Getting Started with Suspense and Concurrent Rendering in React
React Summit 2020React Summit 2020
125 min
Getting Started with Suspense and Concurrent Rendering in React
Featured Workshop
Maurice de Beijer
Maurice de Beijer
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `<Suspense />` component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using <Suspense />, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the <SuspenseList /> component.
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.
Hands-on with AG Grid's React Data Grid
React Summit 2022React Summit 2022
147 min
Hands-on with AG Grid's React Data Grid
WorkshopFree
Sean Landsman
Sean Landsman
Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components