Name: React Summit Remote Edition 2020
Start: 2020-04-16T08:00:00.000Z
End: 2020-04-16T21:59:59.000Z

Vlad Dumitrica

Manuel Bieh

Andreas Roth

Pieter Bos

Davide

Stivi Ndoni

Matej

Tim Bakkum

Arne Claerebout

Lorenzo Greco

Arslaan Qadus

Tenice

Hakob Sukiasyan

Yan Li

Luke Hammond

Sander Laarhoven

ckomop0x

Wilson Mália

kevin egstorf

Jonáš

Jose Ramirez

Attila Balla

Maria Amado

Ruddy

Benedikt Bauer

Gintaras Volkvicius

Makenna Smutz

Dejan

Laurens De Graeve

Vladimir Ivanov

Gerardas Butkevičius

Jeroen Siffels

Una cantidad creciente de datos en nuestras aplicaciones React proviene de fuentes remotas y asíncronas y, aún peor, continúa disfrazándose como "estado global". En esta charla, obtendrás información sobre por qué la mayoría de tu "estado global" en realidad no es un estado en absoluto y cómo React Query puede ayudarte a buscar, almacenar en caché y gestionar tus datos asíncronos con una fracción del esfuerzo y el código al que estás acostumbrado.<a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

React Query: ¡Es hora de romper con tu "Estado Global"!

Global state management and the challenges of placing server state in global state are discussed. React Query is introduced as a solution for handling asynchronous server state. The Talk demonstrates the process of extracting logic into custom hooks and fixing issues with state and fetching logic. Optimistic updates with mutation are showcased, along with the benefits of using React Query for data fetching and mutations. The future of global state management is discussed, along with user feedback on React Query. The Talk concludes with an invitation to explore React Query for server state management.

An increasing amount of data in our React applications is coming from remote and asynchronous sources and, even worse, continues to masquerade as "global state". In this talk, you'll get the lowdown on why most of your "global state" isn't really state at all and how React Query can help you fetch, cache and manage your asynchronous data with a fraction of the effort and code that you're used to.<a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

React Query: It’s Time to Break up with your "Global State”!

Tanner Linsley

¿Eres el tipo de programador que prefiere no ver el mismo código en dos lugares, o haces uso liberal de copiar/pegar? Muchos desarrolladores juran por la filosofía de No Repetirte (DRY) mientras que otros prefieren Escribir Todo Dos Veces (WET). Pero, ¿cuál de estos produce bases de código más mantenibles? He visto cómo ambos enfoques arruinan las bases de código y tengo una nueva ideología que me gustaría proponerte: Evitar Abstracciones Precipitadas (AHA). En esta masterclass, hablaremos sobre la abstracción y cómo puedes mejorar una base de código aplicando y creando abstracciones de manera más reflexiva, así como cómo salir de un lío de sobre o sub-abstracción.

Programación AHA

The Talk discusses the concept of AHA programming, which emphasizes thoughtful abstractions. It presents a live-coded example of the life-cycle of an abstraction and demonstrates how to fix bugs and enhance abstractions. The importance of avoiding complex abstractions and the value of duplication over the wrong abstraction are highlighted. The Talk also provides insights on building the right abstractions and offers resources for further learning.

Are you the kind of programmer who prefers to never see the same code in two places, or do you make liberal use of copy/paste? Many developers swear the Don't Repeat Yourself (DRY) philosophy while others prefer to Write Everything Twice (WET). But which of these produces more maintainable codebases? I've seen both of these approaches lay waste to codebases and I have a new ideology I would like to propose to you: Avoid Hasty Abstractions (AHA). In this keynote, we'll talk about abstraction and how you can improve a codebase applying and creating abstractions more thoughtfully as well as how to get yourself out of a mess of over or under-abstraction.

AHA Programming

Kent C. Dodds

Haris está hablando sobre la recién liberada biblioteca Restyle (<a href="https://github.com/Shopify/restyle">https://github.com/Shopify/restyle</a>); cómo aborda muchos problemas y puntos de dolor que los desarrolladores experimentan al gestionar estilos en evolución y soporte de temas (¡debe tener modo oscuro!) en una aplicación React Native.

Estilos y Tematización con Restyle en React Native

Today's Talk focuses on styles and theming in React Native, specifically from the perspective of the arrive app. The challenges faced with managing colors and font styles are addressed by Restyle, which provides a type-enforced system for building UI components with themability. The implementation of color palettes, spacing, and dark mode is discussed, along with the benefits of using Restyle's predefined components. TypeScript's autocompletion and other advantages are highlighted, and listeners are encouraged to explore the project on GitHub for more features.

Haris is talking about the newly open-sourced library Restyle (<a href="https://github.com/Shopify/restyle">https://github.com/Shopify/restyle</a>); how it addresses many problems and pain points developers experience when managing evolving styles and theme support (gotta have dark mode!) in a React Native app.

Styles and Theming with Restyle in React Native

Haris Mahmood

La integración de GraphQL (y la obtención de datos de la API en general) se vuelve bastante repetitiva y compleja a medida que nuestra aplicación crece. Se deben construir nuevas características que son similares a las características que ya existían, pero no está claro qué partes se pueden reutilizar (por ejemplo, la paginación). Nuevos miembros se unen al equipo y nos gustaría que trabajen en sus componentes de interfaz de usuario sin preocuparse por la lógica de obtención de datos del resto del árbol de componentes. Relay adopta una postura concreta para resolver algunos de estos problemas que vale la pena entender y aprender de ellos.
En esta charla, voy a motivar las características principales de Relay desde cero. Haré demostraciones prácticas para explicar los desafíos comunes a los que se enfrentan los clientes de GraphQL, cómo se podrían solucionar sin Relay y luego solucionarlos con Relay. También hablaré brevemente sobre cómo funciona Relay y su diseño, y cómo el objetivo de diseño de Relay no es solo ser un cliente de GraphQL de alto rendimiento, sino también aumentar la productividad y la felicidad de los desarrolladores. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Cómo pasé de ser escéptico sobre Relay a enamorarme de él

This Talk discusses the use of Relay and fragments in data fetching for React applications. It explores the challenges of fetching data from components and the optimization of data fetching. The Talk also covers the use of fragments for component data fetching and the challenges and potential errors that can arise. It highlights the design decisions of Relay that make data access easier and the use of variables in fragments. The Talk concludes with a discussion on refetching fragment data and the combination of fragments and queries in Relay.

GraphQL integration (and API/data fetching in general) becomes quite repetitive and complex as our app scales. New features need to be built that are sort of similar to features that already existed, but what bits they can reuse is not clear (eg: pagination). New members join the team and we’d like them to work on their UI components without worrying about the data fetching logic of the rest of the component tree. Relay takes an opinionated stance to solve some of these problems that are worth understanding and learning from.
In this talk, I'm going to motivate the core features in Relay from the ground-up. I'll do hands-on demos to explain the common challenges GraphQL clients run into, how one would fix them without Relay and then fix them with Relay. I'll also touch upon how Relay works and its design briefly and how Relay’s design goal is not just being a high-performance GraphQL client, but also increasing developer productivity and happiness. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

How I Went from Being Skeptical about Relay to Falling in Love with It

Tanmai Gopal

Escalar el desarrollo de React en múltiples equipos puede ser increíblemente difícil. Los equipos necesitan compartir funcionalidades centrales mientras se mantienen autónomos. Los cambios deben propagarse a través de muchos proyectos mientras se prueban. Nx es un conjunto de herramientas de código abierto que permite a las organizaciones escalar el desarrollo de manera más fácil que antes. ¡Nx facilita la configuración de Cypress, Prettier, Storybook, Next.js y Gats más rápido que nunca! También puedes desarrollar aplicaciones full-stack utilizando frameworks de Node como Apollo y Nest.js y compartir código entre el frontend y el backend. En esta charla aprenderás cómo grandes organizaciones como Facebook, Microsoft y Google pueden escalar con éxito a través de múltiples equipos, unidades de negocio y productos.

Desarrollo escalable de React para proyectos grandes

Scalable React development made easy by NX, a monorepo-based approach used by large tech companies. Challenges of sharing code in multiple repos include duplicate tooling, separate workflows, and version conflicts. Benefits of a monorepo include unified tooling, single version of dependencies, and simplified development. NX enables monorepo workflows with intelligent build systems and easy code sharing. It also supports custom code generation, enforces standards and dependencies, improves build times, and provides modern tools and plugins.

Scaling React development across multiple teams can be incredibly difficult. Teams need to share core functionality while staying autonomous. Changes need to propagate through many projects while being tested. Nx is an open-source toolkit that allows organizations to scale development more easily than before! Nx makes setting up Cypress, Prettier, Storybook, Next.js, and Gats faster than ever. You can also develop full-stack using Node frameworks like Apollo and Nest.js and share code between frontend and backend. In this talk you’ll learn how large organizations like Facebook, Microsoft, and Google are able to successfully scale across multiple teams, business units, and products.

Scalable React Development for Large Projects

Jason Jean

Cuando los desarrolladores piensan en transmitir en vivo desde el navegador, la suposición inmediata es utilizar WebRTC. Si bien WebRTC es una tecnología increíble, las implementaciones del lado del servidor son... deficientes en este momento. Hablaremos sobre una forma (totalmente chapucera) de obtener video desde el navegador a través de la tecnología que estás utilizando hoy. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Realizar transmisiones en vivo desde tu navegador sin WebRTC

Mux provides an API for live streaming and aims to keep users in their own applications. Live broadcast and live chat are different, with live chat using WebRTC and live broadcast using RTMP and HLS. WebRTC can be implemented using headless Chrome or the getUserMedia process. Mux targets developers building platforms and suggests using semantic HTML. Ionic supports native apps and custom native views.

When developers think about broadcasting live from the browser, the immediate assumption is to use WebRTC. While WebRTC is amazing technology, server-side implementations are...lacking right now. We'll talk about a (totally hacky) way to get video from the browser via technology you're using today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Going Live from your Browser without WebRTC

Matt McClure

Los defensores de la accesibilidad suelen decir "usa la plataforma", pero ¿por qué? En esta charla relámpago, te mostraré las diferencias de implementación entre el comportamiento de los elementos HTML nativos y sus contrapartes DIV.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Botón vs Div: ¿Qué es tan importante de todos modos?

Today's Talk discussed the preference of accessibility advocates for using the platform over divs, highlighting the ease of converting divs into buttons. The CSS for making divs look like buttons was also discussed, but it was concluded that using the platform is easier and more accessible. The Q&A session covered topics such as target market and using divs as buttons for specific cases. The Talk also briefly mentioned the tapping feature of Match and the support for native apps in Ionic. The closing remarks concluded the Talk. 

Accessibility advocates often say "use the platform," but why? In this lightning talk, I'll be showing you implementation differences between the behavior of native HTML elements and their DIV counterparts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Button vs Div: What's the Big Deal Anyway?

Jen Luker

En esta charla demostraré <a href="https://twitter.com/UriGoldshtein/status/1242118500795236353?s=20">la nueva biblioteca GraphQL Mesh</a> que fue anunciada recientemente. GraphQL Mesh cambia muchas de las ideas tradicionales sobre GraphQL y su relación con otros protocolos de API.Puede generar automáticamente una API GraphQL a partir de openapi/Swagger, gRPC, SOAP, oData y otros sin cambiar la fuente y fusionar todos los esquemas en un solo esquema: ¡unión de esquemas para cualquier fuente!En esta charla compartiré algunas de las ideas originales detrás de ella y mis opiniones sobre cómo se ve el futuro para el consumo y la exposición de API.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL Mesh: Consulta cualquier cosa, ejecútala en cualquier lugar

The speaker introduces GraphQL Mesh, a library that extracts schemas from existing services and merges them into a single GraphQL endpoint. This allows for type safety and the ability to add federated metadata to existing services. GraphQL Mesh can run as a central gateway or a distributed source. The speaker also mentions the use of platforms for streaming and the accessibility benefits of using semantic HTML content. Additionally, there is a mention of Ionic's support for native apps. Overall, the Talk covers the benefits and capabilities of GraphQL Mesh and its applications in different scenarios.

In this talk I will demonstrate <a href="https://twitter.com/UriGoldshtein/status/1242118500795236353?s=20">the new GraphQL Mesh library </a>that was recently announced. GraphQL Mesh changes a lot of the traditional ideas about GraphQL and its relationship with other API protocols.It can automatically generate a GraphQL API from openapi/Swagger, gRPC, SOAP, oData and others without changing the source and merge them all schemas into a single schema - Schema Stitching for any source!In this talk I will share some of the original ideas behind it and my opinions on how the future looks for API consumption and exposure. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL Mesh – Query Anything, Run Anywhere

Uri Goldshtein

Realidad Virtual con React

The Talk provides an introduction to React 360, a JavaScript framework created by Facebook for building 3D and VR user interfaces on top of React. It simplifies the creation of complex UI and leverages the familiar concepts and tools of React and React Native. The folder structure includes a static assets folder for media files, a client.js file for creating locations and surfaces, and an index file as the main file. The code structure is similar to React Native and React, using Flexbox for styling. The application can be run on a web browser or any VR device, and includes features like slides, video layer, and customizable background image.

Virtual Reality with React

Hamza Haoui 

Explorando React a mi manera

The Talk provides an introduction to React and discusses the speaker's journey of learning React effectively. It emphasizes the importance of understanding the purpose of learning React and following a step-by-step process. The Talk also highlights the need to learn React independently before diving into other tech stacks. Practical learning, tracking coding activity, and learning in public are recommended approaches. The speaker mentions working with technologies like Node.js, ExpressJS, React, EmberJS, VueJS, Nuxt, and Next. The Talk concludes with the speaker's contact information and availability for discussions on operating systems and full stack development.

Exploring React My Own Way

Tathagat Thapliyal

Durante años he sido un diseñador que programa y creo que diseñar con código o con una mentalidad de programación puede ayudar a tu equipo a ser más productivo. En esta charla, exploraré este concepto y mostraré mi flujo de trabajo diario que probablemente pueda ayudar a cerrar la brecha entre los desarrolladores y los diseñadores.

Diseñando con la Mente de Programación

Welcome to Designing with Coding Minds. Having a designer who codes in your team can help work faster and bridge the gap between developers and designers. Designers who can code can improve design systems and create components for design tools. GitHub is used at Elastic for collaboration between designers and developers. At Elastic, the code is prioritized over the final design, allowing the code to go live first.

For years I've been a designer who codes and I believe that designing with code or with a coding mindset can help your team to be more productive. In this talk, I'm exploring this concept and showing my daily workflow that can probably help to bridge the gap between devs and designers.

Designing with Code in Mind

Elizabet Oliveira

En un mundo donde los desarrolladores perpetuamente confundidos no pueden hacer que sus entornos de desarrollo de React Native funcionen, surgen nuevas bibliotecas de las cenizas de la productividad perdida: envinfo y Solidarity. Escapa de la complejidad y forma parte de la ola de equipos que abrazan el cambio para salvar sus proyectos de sí mismos. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Acaba con tus pesadillas de desarrollo con envinfo y Solidarity

Envinfo and Solidarity are tools that help developers manage their development environment more efficiently. Envinfo conglomerates information about the development environment, saving developers from having to type multiple commands. Solidarity provides more control on a per-project basis, allowing developers to check files, variables, and handle custom plug-ins. It also offers neat tricks like paint it red mode for giving warnings without disrupting the workflow. Solidarity is useful for pre-commit hooks and git config checks.

In a world where perpetually confused developers can't quite get their React Native development environments working, new libraries emerge from the ashes of lost productivity: envinfo and Solidarity. Escape the complexity and be part of the wave of teams embracing change to save their projects from themselves.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

End Your Development Nightmares with envinfo and Solidarity

Trevor Brindle

Diseñando Juegos de Mesa y Cómo la Tecnología (y React) Puede Ayudar

In these weird times, we all have one question: what to do with that much time at home? The answer is to invent more board games and potentially use React. Modifying existing games and adding AI can bring new possibilities and challenges. The BoardGame.IO library provides a simple interface for creating playable versions of board games on a computer and adding AI. Computer simulations cannot capture the social interaction and dynamics of board games played on a table.

Designing Boardgames and How Tech (and React) Can Help

Johannes Goslar

¿Cuál es el futuro de las interacciones de usuario? ¿Seguiremos utilizando la web y el móvil o nos cambiaremos completamente a la realidad virtual y aumentada? ¿Cuál es nuestra experiencia de usuario actual en la web y el móvil y cómo cambiará cuando el mundo digital se conecte con nuevas dimensiones? ¿Seguiremos utilizando el teclado y el ratón o los gestos o utilizaremos algo diferente? En esta charla, echaremos un vistazo al futuro donde controlaremos aplicaciones con nuestros pensamientos. Literalmente. No es un experimento mental, sino un viaje a través de nuestras ondas cerebrales con un casco EEG de consumo. Exploraremos cómo podemos utilizarlos y la inteligencia artificial para crear experiencias futuristas, que sentarán las bases de nuestras interacciones futuras con el mundo digital.

Controlando aplicaciones con tu mente y AI

This Talk explores controlling apps with the mind and the future of UI and UX. It discusses the integration of VR and AR into UI and UX, the understanding of neurons and EEG headsets, connecting to Muse via Bluetooth, measuring brain waves and blink detection, feeding data to machine learning, and mind control with AR. The speaker emphasizes the importance of learning React Native, AR, React, Bluetooth, and drones for those interested in exploring these topics.

What is the future of user interactions? Will we continue using web and mobile or will we switch into VR and AR completely? What is our UX today on web and mobile and how it will change when the digital world will bridge into new dimensions. Would we still use keyboard and mouse or gestures or will we use something else? In this talk we will get a glimpse into the future where we will control apps with our thoughts. Literally. It’s not a thought experiment, but a journey into our brainwaves with consumer EEG headset. We will explore how we can use them and AI to create futuristic experiences, which will lay a foundation stone to our future interactions with the digital world.

Controlling Apps with Your Mind and AI

Vladimir Novick

Ionic es un framework para construir aplicaciones móviles, de escritorio y web rápidas y potentes con tecnología web. Tradicionalmente, Ionic se ha construido sobre un solo framework: Angular. Pero recientemente, Ionic agregó soporte para React y tiene como objetivo llevar la misma gran experiencia de desarrollo al ecosistema de React. En esta charla, veremos cómo funciona una aplicación Ionic React y cómo esto cambia el ecosistema de React (sorpresa, es gracias a los Componentes Web). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Llevando Ionic (y Componentes Web) a React

Ionic React is a framework for building cross-platform apps using HTML, CSS, and JavaScript. It has hit its stable release and brings Ionic to even more developers. The Q&A session covers topics like the target market for Mux and the use of div as a button in React Native web. Ionic supports native apps and allows for a mix of web UI and custom native views.

Ionic is a framework for building fast and powerful mobile, desktop, and web apps with web technology. Traditionally, Ionic has been built on top of one framework: Angular. But recently, Ionic added support for React, and aims to bring the same great development experience to the React ecosystem. In this talk, we’ll look at how an Ionic React app works and how this changes the React ecosystem (surprise, it's because of Web Components). <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Bringing Ionic (and Web Components) to React

Mike Hartington

Cuando se habla de trabajar con React Native, la versión y el ciclo de lanzamiento suelen surgir como uno de los puntos problemáticos. Pero, ¿por qué es eso? ¿Qué tan complicado es crear una nueva versión de React Native? Seguramente se ve similar al proceso de lanzamiento que estás utilizando... o tal vez no. En esta charla te guiaré a través de los muchos pasos y complejidades involucrados en la publicación de una nueva versión de React Native, y desafiaré una idea fundamental: que el 1.0 es la solución a todos los problemas. ¡Espero que estés listo, va a ser salvaje! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

La mentira del 1.0

Welcome to a talk on React Native releases, where the speaker shares their experience and perspective. The complexities of React Native releases are discussed, including the challenges of manual testing and conflicts with dependencies. The involvement of the community and improved communication with Facebook are highlighted. The speaker also mentions the incremental automation of the release process. React Native 1.0 is seen as a promise of a finalized product with long-term support. The long-term plan for React Native's new architecture is mentioned, with a focus on minimizing breaking changes.

Whenever there's a conversation about working on React Native, versioning and release cycle usually arise as one of the pain points. But why is that the case? How complicated is it to create a new release of React Native? Surely it looks similar to the release process you are using... or not!
During this talk I'll walk you through the many steps and complexities involved in publishing a new version or React Native, and I'll challenge one fundamental idea – that 1.0 is the solution to all problems.
I hope you're ready, it's going to be wild! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The 1.0 is a Lie

See how Microsoft is using React Native to solve some of their cross-platform problems, how they're working with Facebook to help make React Native for Windows and Mac great experiences, and learn how to get started building a Windows and Mac app.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Apps for both Windows and Mac

Eloy Durán

Kiki Saintonge

El mundo está lleno de miles de millones de teléfonos inteligentes pequeños, conectados, inteligentes y eficientes en el cálculo. ¿Qué pasaría si pudiéramos aprovechar este poder y hacer más en el edge? Resulta que el aprendizaje automático encaja perfectamente aquí. Vamos a explorar la biblioteca MLKit para incorporar inteligencia en aplicaciones de react-native. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

ML en el Edge

This Talk discusses machine learning on the edge and its benefits for mobile applications. ML on the edge utilizes the computing power of mobile devices for secure, real-time processing and offline capabilities. ML Kit, Google's SDK, provides easy integration of ML solutions in mobile apps without extensive ML expertise. The Talk covers the setup of Firebase and ML Kit integration in React Native projects, showcasing the possibilities of applying filters and generating avatars with ML on the edge.

The world is filled with billions of small, connected, intelligent and compute-efficient smart-phones. What if we can tap into this power and do more on the edge? It turns out, ML fits perfectly here. Let us explore the MLKit library to bake in intelligence into react-native applications.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition 2020

The biggest React conference in the cloud