Name: React Advanced 2021
Start: 2021-10-22T08:00:00.000Z
End: 2021-10-25T21:59:00.000Z

Lera

Daria Shabala

Debbie O'Brien

David Pugh

Károly Török

David Barry

Bret Little 

Nikolay Advolodkin

Ricardo Machado

Petra vos

Robert

Beth Swingler

Victor 

Ian Sutherland

Christopher McDonald

Hannah Vivian Shaw

Aman Beg

Myron Davis

Vitor Barbosa

Denis Radin

Rishi Narang

Agata Swistowska

Rahul Rana

Antwan Sherif

Christian Rodriguez

Varun

Iandra Bedin

Alexandra Moore

Andrey Grunev

Marissa McDonnell

Sachit

Los humanos son solucionadores de problemas naturales y somos lo suficientemente buenos en eso que hemos sobrevivido a lo largo de los siglos y nos hemos convertido en la especie dominante del planeta. Debido a que somos tan buenos en eso, a veces también nos convertimos en buscadores de problemas, buscando problemas que podemos resolver. Aquellos que logran sus objetivos de la manera más exitosa son los eliminadores de problemas. Hablemos de la distinción entre resolver y eliminar problemas con ejemplos de dentro y fuera del mundo de la codificación. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

No resuelvas problemas, elimínalos

Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.

Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Don't Solve Problems, Eliminate Them

Kent C. Dodds

Los sistemas de diseño buscan aportar consistencia al diseño de una marca y hacer que el desarrollo de la interfaz de usuario sea productivo. Las bibliotecas de componentes con una API bien pensada pueden facilitar esto. Pero, ¡a veces una elección de API puede accidentalmente sobrepasar y ralentizar al equipo! Hay un equilibrio allí... en algún lugar. Exploremos algunos de los problemas y posibles soluciones creativas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia

The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.

Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well-thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Design Systems: Walking the Line Between Flexibility and Consistency

Siddharth Kshetrapal

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.

Aventuras de Renderizado Concurrente en React 18

The workshop covers the new features of React 17 and React 18, including suspense, error handling, and concurrent mode. It emphasizes the importance of hands-on learning and typing code instead of just copying. The workshop explores using suspense and error boundaries to handle errors and improve the user experience. It also introduces new features in React 18, such as start transition and useTransition, to enhance responsiveness. The interaction between suspense and start transition is discussed, highlighting their collaboration in handling fallback UI and communication.

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.

Concurrent Rendering Adventures in React 18

Maurice de Beijer

Si estás construyendo un tablero de control, una plataforma de análisis o cualquier aplicación web donde necesites dar a tus usuarios una visión de sus datos, necesitas hermosas, personalizadas, visualizaciones de datos interactivas en tu aplicación React. Pero construir visualizaciones a mano con una biblioteca de bajo nivel como D3 puede ser un gran dolor de cabeza, que implica reinventar la rueda. En esta charla, veremos cómo el desarrollo de visualización de datos puede ser mucho más fácil gracias a herramientas como Plot, una biblioteca de dataviz de alto nivel para una rápida y fácil creación de gráficos, y Observable, un entorno de prototipado de dataviz reactivo, ambos del creador de D3. A través de ejemplos de codificación en vivo, exploraremos cómo los refs de React nos permiten delegar la manipulación del DOM para nuestras visualizaciones de datos, y cómo la funcionalidad de incrustación de Observable nos permite reutilizar fácilmente las visualizaciones construidas por la comunidad para nuestros propios datos y casos de uso. Al final de esta charla, sabremos cómo obtener una hermosa, personalizada, visualización de datos interactiva en nuestras aplicaciones con una fracción del tiempo y esfuerzo! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

(Más fácil) Visualización interactiva de datos en React

This Talk is about interactive data visualization in React using the Plot library. Plot is a high-level library that simplifies the process of visualizing data by providing key concepts and defaults for layout decisions. It can be integrated with React using hooks like useRef and useEffect. Plot allows for customization and supports features like sorting and adding additional marks. The Talk also discusses accessibility concerns, SSR support, and compares Plot to other libraries like D3 and Vega-Lite.

If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick &amp; easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data &amp; use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time &amp; effort! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

(Easier) Interactive Data Visualization in React

Anjana Vakil

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React, TypeScript y TDD

Today's workshop focuses on test-driven development in React, covering topics such as running, building, and testing React apps, using Prettier for code formatting, refactoring and creating subcomponents, implementing state and event handling in components, and project management and IDE integration. The workshop emphasizes the benefits of test-driven development, the use of IDEs, and the integration with tools like Jest and React Testing Library. TypeScript is also highlighted as a valuable tool for type checking and improving code quality. Overall, the workshop provides a comprehensive guide to developing React components test-first and following best practices in software development.

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. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React, TypeScript, and TDD

Paul Everitt

En esta masterclass, aprenderás cómo construir tu primer dapp de pila completa en la blockchain de Ethereum, leyendo y escribiendo datos en la red, y conectando una aplicación de front end al contrato que has desplegado. Al final de la masterclass, entenderás cómo configurar un entorno de desarrollo de pila completa, ejecutar un nodo local e interactuar con cualquier contrato inteligente usando React, HardHat y Ethers.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Masterclass Web3 - Construyendo Tu Primer Dapp

This workshop covers building a React dApp and programming payments in smart contracts. It explores Web3 technology, Rweave protocol, Solana network, and Metamask. Participants learn to install dependencies, set up a Hard Hat environment, and deploy contracts to a local network. They also interact with the Ethereum network, deploy token contracts, and send tokens using MetaMask. The workshop highlights the use cases of blockchain technology, the permanence of data on the blockchain, and the potential for crypto integration in gaming and social media platforms.

In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Web3 Workshop - Building Your First Dapp

Nader Dabit

Las tareas de código como linting y pruebas son partes críticas del flujo de trabajo de un desarrollador que nos ayudan a mantenernos cuerdos, como prevenir problemas de sintaxis o estilo y fortalecer nuestra lógica de negocio central. Hablaremos de cómo podemos usar GitHub Actions para automatizar estas tareas y ayudar a mantener nuestros proyectos funcionando sin problemas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automatizando Todo el Código y las Pruebas con GitHub Actions

We will learn how to automate code and testing with GitHub Actions, including linting, formatting, testing, and deployments. Automating deployments with scripts and Git hooks can help avoid mistakes. Popular CI-CD frameworks like Jenkins offer powerful orchestration but can be challenging to work with. GitHub Actions are flexible and approachable, allowing for environment setup, testing, deployment, and custom actions. A custom AppleTools Eyes GitHub action simplifies visual testing. Other examples include automating content reminders for sharing old content and tutorials.

Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Automating All the Code & Testing Things with GitHub Actions

Colby Fayock

Accesibilidad en Discord

This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.

Accessibility at Discord

Brandon Dail

Con el modo concurrente que llega en React 18, hablemos de las complejidades detrás de proporcionar APIs declarativas para el renderizado concurrente. Mientras implementaba las APIs del modo concurrente desde cero para Brahmos.js, me encontré con muchos casos de uso y variabilidad que lo hicieron uno de los problemas más interesantes de resolver, y apreciar más el esfuerzo de React en abogar por la UI Concurrente. En esta masterclass veremos qué significa el modo concurrente para una aplicación web, cuáles son las complejidades internas y cómo lo resolví para Brahmos.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cracking the Concurrent Mode

Sudhanshu Yadav discusses the incremental concurrent feature in React 18 and the need for concurrent mode to provide a better user experience. Time slicing is the key pattern enabling concurrent features. Background rendering and unit of work are used to achieve asynchronous rendering and eventual consistency. Concurrent mode introduces a new pattern called differing for immediate rendering and adjusting based on available resources. React provides APIs for deferred updates and transitions. Implementing concurrent mode APIs can be complex, but it offers benefits like avoiding update starvation and reusing work. Scheduling and slots are used to control execution and dynamic FPS control. Handling multiple transitions can be challenging, but the React 18 working group discussions provide insights into the team's efforts to improve the user experience.

With concurrent mode coming in React 18, let's talk about the complexities behind providing declarative APIs for concurrent rendering. While implementing concurrent mode APIs from scratch for Brahmos.js, I came across lot of use cases and variability which made it one of the most interesting problem to solve, and appreciate more the React's effort on advocating Concurrent UI. In this talk we will see what concurrent mode means for a web app, what are the internal complexities and how I solved it for Brahmos.js. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Sudhanshu Yadav

React 18 introduce nuevas APIs para renderizar aplicaciones de forma asíncrona en el servidor, permitiendo un modelo más simple para diseñar y enviar interfaces de usuario. Cuando se implementa en plataformas de redes en el borde como Cloudflare Workers, podemos obtener mejoras dramáticas en el rendimiento y la experiencia del usuario en nuestras aplicaciones. En esta charla, Sunil demostrará y explicará este nuevo modelo de escribir aplicaciones React, con algunas ideas sobre las implicaciones para la obtención de datos, el estilo y la dirección general del ecosistema de React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Viviendo al Límite

The Talk discusses the future of React and introduces new APIs, including streaming rendering and server components. React Suspense allows for asynchronous loading of components and data fetching. The use of serverless computing, specifically Cloudflare Workers, is explored as a way to improve performance. The Talk emphasizes the potential for simplifying the React ecosystem and the excitement about the new API.

React 18 introduces new APIs for rendering applications asynchronously on the server, enabling a simpler model for architecting and shipping user interfaces. When deployed on edge networking platforms like Cloudflare Workers, we can get dramatic performance and user experience improvements in our applications. In this talk, Sunil will demo and walk through this new model of writing React applications, with some insight into the implications for data fetching, styling, and overall direction of the React ecosystem. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Living on the Edge

Sunil Pai

React Query gestiona el estado del servidor en el cliente, y auth gestiona el inicio de sesión/registro/cierre de sesión del usuario. ¿Dónde se superponen estos dos, y cómo separas las preocupaciones? Esta charla propone un flujo de datos con hooks personalizados tanto para auth como para React Query para gestionar el estado de autenticación y las actualizaciones del perfil del usuario.

React Query y Auth: ¿Quién es responsable de qué?

This talk introduces React Query and Auth, discussing how React Query maintains server state on the client and handles mutations and data updates. The day spa app example demonstrates the use of React Query to fetch data and handle user authentication. React Query is also useful for managing user data and ensuring accurate data from the server. The talk highlights the importance of addressing the three main players in user data: React Query, Auth Functions, and persistence across sessions.

React Query manages server state on the client, and auth manages user sign in/sign up/sign out. Where do these two overlap, and how do you separate concerns? This talk proposes a data flow with custom hooks for both auth and React Query to manage authentication status and user profile updates.

React Query and Auth: Who is Responsible for What?

Bonnie Schulkin

¿Por qué estamos los desarrolladores tan obsesionados con desacoplar cosas que son de naturaleza acoplada? tRPC es una biblioteca que reemplaza la necesidad de GraphQL o REST para APIs internas. Al usarla, simplemente escribes funciones de backend cuyas formas de entrada y salida se infieren instantáneamente en tu frontend sin ninguna generación de código; haciendo que la escritura de esquemas de API sea cosa del pasado. Es ligera, no está vinculada a React, se puede almacenar en caché HTTP y se puede adoptar de forma incremental. En esta charla, daré un vistazo a la DX que puedes obtener de tRPC y cómo (y por qué) empezar.

Aplicaciones React (+Native) full-stack y seguras con tRPC.io

Alex introduces tRPC, a toolkit for making end-to-end type-safe APIs easily, with auto-completion of API endpoints and inferred data from backend to frontend. tRPC works the same way in React Native and can be adopted incrementally. The example showcases backend communication with a database using queries and validators, with types inferred to the frontend and data retrieval done using Prisma ORM.

Why are we devs so obsessed with decoupling things that are coupled nature? tRPC is a library that replaces the need for GraphQL or REST for internal APIs. When using it, you simply write backend functions whose input and output shapes are instantly inferred in your frontend without any code generation; making writing API schemas a thing of the past. It's lightweight, not tied to React, HTTP-cacheable, and can be incrementally adopted. In this talk, I'll give a glimpse of the DX you can get from tRPC and how (and why) to get started.

Full-stack & typesafe React (+Native) apps with tRPC.io

Alexander Johansson

Crear experiencias 3D en la web puede ser algo que suena muy desalentador. Estoy aquí para eliminar esta idea de tu mente y mostrarte que el mundo 3D es para todos. Para eso, obtendremos un modelo del software 3D Blender a la web, lleno de animaciones, controles de accesibilidad y optimizado para el uso web, así que únete a mí en este viaje mientras hacemos la web más impresionante.

De Blender a la Web - el Viaje de un Modelo 3D

This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.

Creating 3D experiences in the web can be something that sounds very daunting. I'm here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.

From Blender to the Web - the Journey of a 3D Model

Sara Vieira

Las aplicaciones de Frontend se están volviendo cada vez más complicadas, a menudo entregando mucho más que solo una interfaz de usuario. Con esta creciente complejidad surge una creciente necesidad de conocimiento por parte de los desarrolladores que la crean, ya que tienen que lidiar con asuntos como la gestión de estados, autorización, enrutamiento y más. En esta charla, te mostraré cómo usar GraphQL en tu aplicación Next.js para crear una capa de datos para tu aplicación, que existe entre tu frontend y tu backend. En esta capa de datos, puedes manejar asuntos complejos para ayudarte a mantener tu aplicación de frontend limpia y "estúpida".

Eliminando BFFs con GraphQL y Next.js

This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.

Frontend applications are getting more and more complicated, often delivering far more than just a UI. With this growing complexity comes a growing need for knowledge from the developers creating it, as they have to deal with matters like state-management, authorization, routing and more. In this talk, I'll show you how to use GraphQL in your Next.js application to create a data layer for your application, that exists between your frontend and your backend. In this data layer, you can handle complex matters to help you to keep your frontend application clean and "stupid".

Killing BFFs with GraphQL and Next.js

Roy Derks

Esta charla hablará brevemente sobre la historia de cómo Mojang Studios decidió usar los estándares web y React para construir la nueva pila de UI para Minecraft (Edición Bedrock), los desafíos que enfrentamos en torno al rendimiento y cómo llegamos a una solución que nos permitió seguir escribiendo UI declarativas, pero sin el DOM virtual. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Uso de React para construir interfaces de usuario de juegos eficientes en Minecraft

This Talk introduces the use of React and web technologies for building UIs in Minecraft. It discusses the challenges of onboarding new developers to the current tech and the benefits of using open standards. The speaker explains the use of Gameface, a solution for building game UIs with React and Webpack. The Talk also covers state management in a game environment and the use of facets for performance optimization. It concludes with an overview of the Oryui brand and the availability of resources on GitHub.

This talk will go briefly about the history of how Mojang Studios decided to use web standards and React to build the new UI stack for Minecraft (Bedrock Edition), the challenges we faced around performance and how we landed on a solution that allowed us to continue to write declarative UI, but without the virtual DOM. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Using React to Build Performant Game UIs in Minecraft

Paulo Ragonha

Esta charla ofrece una introducción sobre MediaPipe, que es una solución de Aprendizaje Automático de código abierto que permite ejecutar modelos de aprendizaje automático en dispositivos de baja potencia y ayuda a integrar los modelos con aplicaciones móviles. Ofrece a estos profesionales creativos una gran cantidad de herramientas dinámicas y utiliza el Aprendizaje Automático de una manera realmente fácil para crear aplicaciones poderosas e intuitivas sin tener mucho / ningún conocimiento de aprendizaje automático de antemano. Así que podemos ver cómo MediaPipe puede ser integrado con React. Proporcionando un fácil acceso para incluir casos de uso de aprendizaje automático para construir aplicaciones web con React.

Uso de MediaPipe para Crear Aplicaciones de Aprendizaje Automático Multiplataforma con React

MediaPipe is a cross-platform framework that helps build perception pipelines using machine learning models. It offers ready-to-use solutions for various applications, such as selfie segmentation, face mesh, object detection, hand tracking, and more. MediaPipe can be integrated with React using NPM modules provided by the MediaPipe team. The demonstration showcases the implementation of face mesh and selfie segmentation solutions. MediaPipe enables the creation of amazing applications without needing to understand the underlying computer vision or machine learning processes.

This talk gives an introduction about MediaPipe which is an open source Machine Learning Solutions that allows running machine learning models on low-powered devices and helps integrate the models with mobile applications. It gives these creative professionals a lot of dynamic tools and utilizes Machine learning in a really easy way to create powerful and intuitive applications without having much / no knowledge of machine learning beforehand. So we can see how MediaPipe can be integrated with React. Giving easy access to include machine learning use cases to build web applications with React.

Using MediaPipe to Create Cross Platform Machine Learning Applications with React

Shivay Lamba

En esta charla, descubrirás cómo gestionar operaciones asíncronas y cancelación de solicitudes implementando una capa de API mantenible y escalable y mejorándola con una lógica de cancelación desacoplada. También aprenderás cómo manejar diferentes estados de API de una manera limpia y flexible. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Patrones avanzados para la gestión de API en aplicaciones React a gran escala

This Talk covers advanced patterns for API management in large-scale React applications. It introduces the concept of an API layer to manage API requests in a more organized and maintainable way. The benefits of using an API layer include improved maintainability, scalability, flexibility, and code reusability. The Talk also explores how to handle API states and statuses in React, and provides examples of canceling requests with Axios and React Query. Additionally, it explains how to use the API layer with React Query for simplified API management.

In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Patterns for API Management in Large-Scale React Applications

Thomas Findlay

Todo el React que has visto se presenta de una manera: como un archivo de texto lineal. Hay una buena razón para esto. La sintaxis textual es un medio ideal para construir lógica abstracta. Es rápido de escribir, densamente informativo y infinitamente flexible. Sin embargo, la brevedad tiene sus desventajas. ¿Qué información no podemos ver en el texto estático? ¿Cómo pueden las representaciones visuales y las comparaciones metafóricas expandir nuestra comprensión de cómo funciona React? Ven a descubrir qué sucede cuando exploramos formas alternativas de ver React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualizando React: Metáforas, Modelos y Medios Espaciales

This talk explores the use of visuals in programming to make concepts more accessible and understandable. It discusses the limitations of text in programming and the benefits of visualizing programming concepts. The talk also delves into the use of visual metaphors in React and the advantages of using spatial principles and visual representations to understand program behavior over time. It concludes with suggestions for advancing visual programming efforts and leveraging existing metaphors in programming languages and frameworks.

All the React you've seen is presented one way: as a linear text file. There's good reason for this. Textual syntax is an ideal medium for constructing abstract logic. It's quick to write, informationally dense, and endlessly flexible. However, brevity has its downsides. What information can't we see in static text? How can visual representations and metaphorical comparisons expand our understanding of how React works? Come find out what happens when we explore alternate ways of seeing React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising React: Metaphors, Models, and Spatial Mediums

Maggie Appleton

Construir productos para múltiples plataformas como la web y el móvil a menudo requiere códigos base separados a pesar de que la mayoría de los componentes son idénticos en apariencia y sensación. ¿Existe una forma en la que podríamos usar la biblioteca de componentes compartidos de React en diferentes plataformas y ahorrar tiempo? En esta presentación demostraré una forma de construir una biblioteca de componentes verdaderamente multiplataforma con un enfoque único de usar React &amp; React Native en combinación. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Construyendo Bibliotecas de Componentes Multiplataforma para Web y Nativo con React

This Talk discusses building cross-platform component libraries for React and React Native, based on a successful project with a large government-owned news organization. It covers the requirements for React Native knowledge, building cross-platform components, platform-specific components, styling, and the tools used. The Talk also highlights the challenges of implementing responsive design in React Native.

Building products for multiple platforms such as web and mobile often requires separate code-based despite most of the components being identical in look and feel. Is there a way where we could use shared React component library on different platforms and save time? In this presentation I'll demonstrate one way to build truly cross-platform component library with a unique approach of using React &amp; React Native in combination. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Cross-Platform Component Libraries for Web and Native with React

Perttu Lähteenlahti

Cómo usar MDX en React-Native con gran efecto y los desafíos para los que no sabías que te habías inscrito.

¿MDX en React-Native!?

This Talk is about the development of MDX, a combination of Markdown and JSX, by a freelance full stack JavaScript developer. MDX is a powerful technology that allows for the creation of interactive content within blog posts and supports React components. The speaker developed RnMDX, a proper and polished MDX library for React Native, which can be dropped into any React Native app. RnMDX provides solutions for common issues with Markdown content in React Native and allows for the rendering of MDX content into native views. Bringing MDX into native apps is now easier, and it can be used for various purposes, such as serving the app layout from a CMS or creating interactive online magazines or blogs.

How to use MDX in React-Native to great effect and the challenges you didn't know you signed up for.

MDX in React-Native!?

Daniel Dunderfelt

"Por favor, no cierre ni abandone esta página" puede enviar escalofríos por tu espalda, pero codificar el flujo UX adecuado para async podría hacerte cuestionar tu trabajo diario. ¿Cómo podemos manejar adecuadamente el UX para el código asincrónico en aplicaciones altamente responsivas? Vamos a explorar cómo la introducción de código asincrónico crea un desafío para el UX. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

UX Asincrónico

Today's Talk covers the importance of building Asynchronous UX with React and single-page applications, providing code and UX examples. It explores data fetching, adding progress indicators, handling errors, and user-initiated actions. The Talk also discusses handling component unmounts, multiple actions, idempotency, and context loss. Finally, it touches on considerations for optimistic updates and the use of CRDT or other technologies for collaborative applications.

"Please do not close or leave this page" may send shivers down your spine, but coding the proper UX flow for async might make you question your daily job. How can we properly handle UX for asynchronous code in highly responsive applications? Let's explore how introducing asynchronous code creates a challenge for UX. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Asynchronous UX

Toni Petrina

Generalmente hay una buena comprensión de cómo renderizar grandes conjuntos de datos (digamos, 100K elementos) usando listas virtuales, ...si permanecen en gran medida estáticos. ¿Pero qué pasa si se están agregando o actualizando nuevas entradas a un ritmo de cientos por segundo? ¿Y si el usuario debería poder filtrarlos y ordenarlos libremente? ¿Cómo podemos mantenernos receptivos en tales escenarios? En esta charla discutimos cómo Flipper introdujo transformaciones FSRW inspiradas en map-reduce para manejar tales escenarios con gracia. Al aplicar las técnicas introducidas en esta charla, las tasas de cuadros de Flipper aumentaron al menos 10 veces y esperamos abrir el código de este enfoque pronto. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Más allá de las listas virtuales: Cómo renderizar 100K elementos con 100s de actualizaciones/seg en React

The Talk discusses optimizing rendering of big tables using Flipper, a new version that is ten times faster with improved user interaction and richer data. It explores optimizing rendering with React, virtualization, filtering, sorting, and windowing techniques. The introduction of the Flipper Datasource packet simplifies handling updates, inserts, and removals. The performance of the Flipper data source package is excellent, even in a debug build of React, with minimal CPU usage. The Q&A session covers incremental sorting, dynamic row height, and the potential for two-dimensional virtualization in the future.

There is generally a good understanding on how to render large (say, 100K items) datasets using virtual lists, …if they remain largely static. But what if new entries are being added or updated at a rate of hundreds per second? And what if the user should be able to filter and sort them freely? How can we stay responsive in such scenarios? In this talk we discuss how Flipper introduced map-reduce inspired FSRW transformations to handle such scenarios gracefully. By applying the techniques introduced in this talk Flipper frame rates increased at least 10-fold and we hope to open-source this approach soon. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Beyond Virtual Lists: How to Render 100K Items with 100s of Updates/sec in React

Michel Weststrate

Los marcos de trabajo frontend modernos como React están bien considerados en su diseño de seguridad de aplicaciones y eso es genial. Sin embargo, todavía hay mucho espacio para que los desarrolladores cometan errores y utilicen APIs inseguras, componentes vulnerables, o en general hagan lo incorrecto que convierte la entrada del usuario en una vulnerabilidad de Cross-site Scripting (XSS). Permíteme mostrarte cómo las aplicaciones de React son hackeadas en el mundo real. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Permíteme mostrarte cómo las aplicaciones de React son hackeadas en el mundo real

React's default security against XSS vulnerabilities, exploring and fixing XSS vulnerabilities in React, exploring control characters and security issues, exploring an alternative solution for JSON parsing, and exploring JSON input and third-party dependencies.

Modern frontend frameworks like React are well thought-of in their application security design and that’s great. However, there is still plenty of room for developers to make mistakes and use insecure APIs, vulnerable components, or generally do the wrong thing that turns user input into a Cross-site Scripting vulnerability (XSS). Let me show you how React applications get hacked in the real-world. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let Me Show You How React Applications Get Hacked in the Real-World

Liran Tal

Estructurar tu contenido con Sanity.io significa que puedes consultar contenido basado en señales de tus visitantes, como su ubicación. La personalización es un problema complicado con sitios estáticos y el jamstack, esta demostración te mostrará cómo se puede hacer con Sanity.io, Next.js y Vercel. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo Localizar y Personalizar Contenido con Sanity.io y Next.js

Sanity.io provides a content platform for structured content that replaces traditional CMS. Their solution allows businesses to structure and query content anywhere using the Sanity studio and open source React application. The talk focuses on solving the challenge of sending personalized data to users in a static website environment using Next.js Vercel for hosting and Sanity for content querying and delivery. The Sanity studio allows for modeling pages, articles, and banners, with banners being shown to visitors based on their country. The solution involves using Grok queries to fetch the right banner based on country information, demonstrating personalization based on localization and dynamic content querying.

Structuring your content with Sanity.io means you can query content based on signals from your visitors, such as their location. Personalisation is a tricky problem with static sites and the jamstack, this demo will show you how it can be done with Sanity.io, Next.js, and Vercel. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How do Localise and Personalize Content with Sanity.io and Next.js

Simeon Griggs

Necesitamos dejar de construir componentes de React costosos, componentes que prometen el mundo pero son imposibles de mantener. Luchemos contra la apropcylpse y dejemos de lado nuestras perforaciones de prop con esta propuesta para una forma de trabajo más productiva en React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

El componente de React más caro del mundo y cómo dejar de escribirlo

Today's Talk discusses expensive React components and API design, with a focus on the cost of coordination and overcoming imposter syndrome. The speaker shares a story about a cat trying to fix salted coffee, highlighting the importance of finding simple solutions. The billion dollar component on ReactJS.org is examined as an example of an expensive component. Techniques for customizing messages, improving accessibility, and using polymorphic props are discussed. The Talk concludes by emphasizing the cost of communication and the need to evaluate if props and components are the right tools for the job.

We need to stop building expensive React components — components that promise the world but are impossible to maintain. Let's fight the apropcylpse and set aside our prop drills with this proposal for a more productive way working in React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Worlds Most Expensive React Component and How to Stop Writing It

Michael Chan

Los mitos comunes sobre los Micro-Frontends sostienen que son malos para el rendimiento o que los desarrolladores que implementan este estilo arquitectónico no se preocupan por las implicaciones de rendimiento porque se están enfocando en mejorar la experiencia del desarrollador y los problemas organizacionales en lugar de centrarse en la experiencia del usuario, sin embargo, la realidad es completamente diferente. Los Micro-Frontends no son inherentemente malos para el rendimiento y, como suele ser el caso en el desarrollo de software, hacer el mejor uso de la tecnología depende de una implementación correcta. Esta charla demostrará cómo los Micro-Frontends pueden hacer que tus aplicaciones sean más rápidas y más resilientes mientras se mantienen los beneficios de los despliegues independientes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Rendimiento de Micro-Frontends y Caché de Datos Centralizada

Micro front-end architecture, like microphone tents, can help scale applications by applying microservices principles to the front-end. Microphone tents can be beneficial for performance, depending on the implementation. They can reduce bundle sizes, avoid duplicated dependencies, and ensure independent deployments. The shared API and module federation are powerful features that allow for dependency management. Micro front-ends can improve developer experience and user experience while addressing organizational and scaling issues.

Common myths about Micro-Frontends hold that they are bad for performance or that developers implementing this architectural style don’t care about the performance implications because they are focusing on fixing the developer experience and organizational issues rather than focusing on the user experience, however, the reality is altogether different. Micro-Frontends are not inheritably bad for performance and, as is often the case in software development, making best use of the technology depends on correct implementation. This talk will demonstrate how Micro-Frontends can make your applications faster and more resilient while keeping the benefits of independent deployments. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Micro-Frontends Performance and Centralised Data Caching

Ruben Casas

Un vistazo detrás de escena de cómo funcionan los componentes del servidor de React.En esta sesión echaremos un vistazo a los componentes del servidor de React, analizando:<ul><li>- los conceptos básicos detrás de ellos</li><li>- el tipo de datos comunicados entre el cliente y el servidor</li><li>- cómo se construyen estos datos</li><li>- una mirada a lo que se está ejecutando en el lado del servidor</li><li>- lo que esto podría significar para proyectos futuros</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Server Components - Bajo el Capó

This talk provides an overview of React Server Components. It explores rendering the root element, using react-read-in-a-tree to read the webpack manifest, and performing work and JSON serialization. The talk also discusses the drain handler and client-side components, as well as challenges and future improvements in React Server Components.

A look behind the scenes of how React server components work.In this session we'll take a look at React server components looking at:<ul><li>- the basic concepts behind them</li><li>- the type of data communicated between the client and server</li><li>- how this data is built</li><li>- a look at what's running on the server side</li><li>- what this might mean for future projects</li></ul> <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Server Components - Under the Hood

Lee Rowlands

Desarrollar aplicaciones es difícil, React y Expo lo hacen fácil!Nunca ha sido tan sencillo construir y desplegar potentes aplicaciones móviles con características increíbles para usuarios de Android e iOS en todo el mundo.Discutiremos la construcción y el despliegue de aplicaciones móviles de forma transparente desde la nube utilizando EAS, creando potentes clientes de desarrollo (como navegadores pero para el desarrollo de aplicaciones móviles) para probar tu aplicación, enviar actualizaciones OTA instantáneamente a los usuarios y mucho más, ¡sin necesidad de experiencia nativa! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Desarrollo de aplicaciones ilimitadas con Expo y React Native

Today's Talk discussed building cross-platform apps with React Native and Expo, addressing challenges such as setting up the native runtime and managing dependencies. Expo provides a pre-built runtime, native APIs, fast iteration speed, and integrated cloud services. EAS build simplifies app deployment by handling native code signing and validation. Over-the-air updates allow instant updates to JS and assets. Custom native code can be added using auto-linking and config plugins, and Expo supports both Managed and Bare workflows.

App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Limitless App Development with Expo and React Native

Evan Bacon

Si has trabajado con el gancho useState de React antes, es posible que te hayas preguntado por qué la gestión del estado global no puede ser igual de fácil. ¿Por qué todavía necesitamos tanto código repetitivo para gestionar el estado con la API de Contexto? ¿Y si no queremos estar limitados a herramientas con opiniones como Redux Toolkit o ser obligados a usar acciones y reductores en nuestras aplicaciones de React? Aquí es donde entra en juego Hookstate. Hookstate no es solo otra solución de gestión del estado. Además de ser rica en funciones, rápida y flexible, la biblioteca lleva la idea de simplificar la gestión del estado en las aplicaciones de React a un nivel completamente nuevo. En esta charla, presentaré Hookstate como una solución simple y eficiente de gestión del estado para aplicaciones de React. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Gestión eficiente del estado con Hookstate

This Talk introduces hook state as a flexible and simple state management solution for React. It demonstrates how hook state can be used for global state management, as well as for managing state within individual components. The speaker highlights the ease of using hook state for tasks such as adding, updating, and removing tasks. The conclusion encourages further exploration of hook state for efficient state management in React applications.

If you’ve worked with the React useState hook before, you might have wondered why global state management can’t be just as easy. Why do we still need so much boilerplate to manage state with the Context API? What if we don’t want to be constrained opinionated tools like Redux Toolkit or forced to use actions and reducers in our React applications? This is where Hookstate comes in. Hookstate is not just another state management solution. Apart from being feature-rich, fast, and flexible, the library takes the idea of simplifying state management in React apps to a whole new level. In this talk, I’ll introduce Hookstate as a simple and efficient state management solution for React applications. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Advanced 2021

We will be diving deep