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

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.

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.

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 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.

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.

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.

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. 

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

React Summit Remote Edition 2020

The biggest React conference in the cloud

Available in other languages: