October 14 - 15, 2020
React Summit
Online

React Summit 2020

La conferencia de React más grande del mundo



Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
Repensando el Estado del Servidor con React Query
96 min
Repensando el Estado del Servidor con React Query
Top Content
Workshop
Tanner Linsley
Tanner Linsley
La distinción entre el estado del servidor y el estado del cliente en nuestras aplicaciones puede ser un concepto nuevo para algunos, pero es muy importante entenderlo cuando se entrega una experiencia de usuario de primera calidad. El estado del servidor viene con problemas únicos que a menudo se cuelan en nuestras aplicaciones sorpresa como:
- Compartir datos entre aplicaciones- Caché y Persistencia- Deduplicación de Solicitudes- Actualizaciones en segundo plano- Gestión de Datos "Obsoletos"- Paginación y Recuperación Incremental- Memoria y Recolección de Basura- Actualizaciones Optimistas
Los gestores tradicionales de "Estado Global" pretenden que estos desafíos no existen y esto finalmente resulta en que los desarrolladores construyan sus propios intentos sobre la marcha para mitigarlos.
En esta masterclass, construiremos una aplicación que expone estos problemas, nos permite entenderlos mejor, y finalmente los convierte de desafíos a características usando una biblioteca diseñada para gestionar el estado del servidor llamada React Query.
Al final de la masterclass, tendrás una mejor comprensión del estado del servidor, el estado del cliente, la sincronización de datos asíncronos (un bocado, lo sé), y React Query.
Comenzando con Suspense y Renderizado Concurrente en React
125 min
Comenzando con Suspense y Renderizado Concurrente en React
Workshop
Maurice de Beijer
Maurice de Beijer
React sigue evolucionando y haciendo que las cosas difíciles sean más fáciles para el desarrollador promedio.
Un caso en el que React no era particularmente difícil pero muy repetitivo, es trabajar con solicitudes AJAX. Siempre hay una trinidad de estados de carga, éxito y posibles errores que deben manejarse cada vez. Pero ya no, ya que el componente `<Suspense />` facilita mucho la vida.
Otro caso es el rendimiento de aplicaciones más grandes y complejas. Por lo general, React es lo suficientemente rápido, pero con una aplicación grande, la renderización de componentes puede entrar en conflicto con las interacciones del usuario. El renderizado concurrente se encargará de esto, en su mayoría de forma automática.
Aprenderás todo sobre cómo usar <Suspense />, mostrar indicadores de carga y manejar errores. Verás lo fácil que es comenzar con el renderizado concurrente. Harás que el suspense sea aún más capaz combinándolo con el renderizado concurrente, el gancho `useTransition()` y el componente <SuspenseList />.
TypeScript + React = ❤️
30 min
TypeScript + React = ❤️
Welcome to TypeScript plus React equals love. TypeScript features can prevent bugs in React apps. TypeScript gives confidence to remove unused props. TypeScript ensures accurate prop definitions and prevents laziness. TypeScript provides type safety and advanced patterns for better developer experience. TypeScript is a good candidate for projects, especially larger ones.
Nx + Next.js = ❤
9 min
Nx + Next.js = ❤
Hey everybody, my name is Adam Ellibert, aka Big AB, and I am a core contributor on a project called NX. Today, I'm going to go through a whirlwind tour of a really cool way to do web development using NX. NX is a suite of dev tools to improve developer experience, and it's extensible, plugin-based, and open-source. I'll show you some of the commands that NX provides, such as creating an NX workspace, generating schematics, serving as a dev server, building applications, and running tests. NX also has a variety of plugins, including the Next.js plugin. And if you're not comfortable with command-line interfaces, there's a GUI available for you. I'm going to create an NX workspace and choose Next.js as my first application. Then I'll create another app called Uber for Star and add a dashboard page. I'll also create a shared components library and configure storybook for it. Finally, I'll use NxServe to serve my Uber 4 app. This setup includes a splash page, a dashboard page, and a design system using storybook. We've got shared components for our marketing website and Uber 4 app. We also have end-to-end directories for Cypress tests and jest for unit tests. Our Uber 4 app is similar to any other Next.js app with pages and a nested dashboard page. We import shared components by prefixing them with the org name and library name. NX handles dependencies, ensuring everyone is on the same version and allows scoping imports to the org. Computation caching optimizes test and build runs by caching results that are unaffected by code changes. NX brings easy application creation with consistent commands and shared library extraction. Generators save time and enforce best practices. NX provides modern tools like Cypress, Storybook, Prettier, ESLint, and Next.js. The Next.js plugin creates and configures Next.js applications, serving them in dev mode and building production-ready and static apps. Visit nx.dev for more information.
Visualización de Cuellos de Botella de Rendimiento Front-End
34 min
Visualización de Cuellos de Botella de Rendimiento Front-End
React's web-based tools allow for independent learning. Dazzone, a sports streaming service, faces challenges with low memory and CPU targets. Measuring, analyzing, and fixing performance issues is crucial. Virtualization improves rendering efficiency and performance. The application is now much faster with significantly less jank.
Construyendo APIs GraphQL sin servidor en tiempo real en AWS con TypeScript y CDK
25 min
Construyendo APIs GraphQL sin servidor en tiempo real en AWS con TypeScript y CDK
This Talk provides an introduction to JavaScript and React, as well as insights into building real-time serverless GraphQL APIs with TypeScript, AppSync, and CDK. It covers the concepts of GraphQL schema, data sources, and resolvers, as well as the use of GraphQL subscriptions for real-time communication. The Talk also highlights the features of AppSync and CDK for building APIs and infrastructure. It concludes with a demonstration of creating an API with CDK and AppSync, including the creation of Lambda functions and DynamoDB tables.
De cero a producción con GraphQL y React de extremo a extremo con el equipo de Hasura
162 min
De cero a producción con GraphQL y React de extremo a extremo con el equipo de Hasura
Workshop
Allison Kunz
Allison Kunz
Hasura es un motor de GraphQL de código abierto y gratuito que puede ayudar a potenciar su adopción de GraphQL, ya sea para una aplicación nueva o existente. El masterclass cubrirá:
- Una introducción básica a GraphQL- Uso de GraphQL para realizar operaciones CRUD desde una aplicación React- Configuración de controles de acceso a los datos- Creación de componentes en tiempo real en React utilizando suscripciones de GraphQL- Envolver las API REST existentes con servidores GraphQL que se pueden implementar en plataformas sin servidor, y luego fusionarlos en un único punto final utilizando Esquemas Remotos- Activación de funciones sin servidor en eventos de la base de datos- En resumen, veremos cómo los desarrolladores de React pueden adoptar GraphQL en tiempo real y sin servidor.
Blitz.js - El marco de trabajo React Fullstack
32 min
Blitz.js - El marco de trabajo React Fullstack
Blitz is a framework for building full stack React apps with a monolithic architecture and no API layer. It uses Next.js and Prisma 2 and follows convention over configuration. Authentication and authorization are set up by default, and adding social login is easy. The Blitz community emphasizes inclusivity and welcomes contributions. The future of Blitz includes a stable release cycle and the vision of bringing the Zero API experience to mobile.
Explorando la manipulación de video y el lienzo HTML5
16 min
Explorando la manipulación de video y el lienzo HTML5
Today's Talk at React Summit focused on the Canvas and HTML5 video APIs, showcasing the capabilities and possibilities they offer for video manipulation and interactivity. The speaker demonstrated how to use the HTML5 video element and canvas to manipulate and draw images, apply filters, and add real-time text overlays. They also showcased real-time object detection on video frames using machine learning. The Talk concluded with an example of enhancing a marketing website with interactive video using the canvas element. Overall, the Talk highlighted the power and potential of these APIs for video development.
Los efectos psicológicos de useEffect
26 min
Los efectos psicológicos de useEffect
The Talk at React Summit explores the use of useEffect in React and its psychological effects. It delves into the concept of component life cycles and the flexibility of useEffect. The Talk also discusses the use of refs for mounting and unmounting components, as well as the cleanup effects of the return function. It highlights the importance of understanding when and how useEffect runs, and provides examples of using useEffect in different scenarios.
Flipper: La Plataforma de Herramientas de Desarrollo Extensible para React Native
32 min
Flipper: La Plataforma de Herramientas de Desarrollo Extensible para React Native
Flipper is an extensible dev tool platform for React Native, developed at Facebook, that allows inspection of the React development tree and native elements. It offers plugins for image cache inspection, preference modification, and network requests. Flipper can be used to build application-specific plugins and integrates with Redux and ReactorTron. The tool is undergoing a major redesign with new features like dark mode and a standardized component library. Maintainers can debug plugins within plugins and there are plans to integrate with GraphQL.
Consume ➡️ Build ➡️ Teach
29 min
Consume ➡️ Build ➡️ Teach
Kent C. Dodds discusses the consume, build, and teach approach to learning and upgrading oneself in a software development career. He emphasizes the importance of consuming curated content, learning from others, and applying different learning methods. Kent shares his experiences in creating personal projects, building projects to understand technologies, and learning through projects. He highlights the power of teaching, the benefits of learning clubs, and the importance of balancing personal life and learning. Kent also introduces Epic React, his workshop-focused approach to teaching React.
Haciendo que tus aplicaciones React sean más eficientes a gran escala
21 min
Haciendo que tus aplicaciones React sean más eficientes a gran escala
This Talk discusses making React apps more performant by analyzing their complexity, running performance tests, using tools like Lighthouse and the Profiler, and optimizing components and API calls. It also covers techniques for cleaning up existing apps, such as code splitting and tree-shaking. The main focus is on improving app performance by virtualizing lists, lazy loading, caching data, minimizing code and assets, and handling rendering errors.
El Lenguaje de las Formas: Entendiendo el Elemento SVG Path
32 min
El Lenguaje de las Formas: Entendiendo el Elemento SVG Path
This Talk introduces the SVG Path element, exploring its commands and potential. The speaker simplifies the language of shapes by grouping commands together and finding alternative ways to define arcs. They also present a path editing tool that allows for easy manipulation and visualization of path data. The Talk concludes with discussions on performance, limitations, recommended resources, SVG morphing, and the FlubberJS library for path interpolation.
Bugs Fantásticos y Dónde Encontrarlos
34 min
Bugs Fantásticos y Dónde Encontrarlos
TypeScript is a JavaScript-based language used for mobile apps. Testing rules include ensuring tests fail when something goes wrong and only fail when necessary. Integration testing can be done using tools like Cypress and Netflix PolyJS. Visual regression testing compares screenshots of changes and helps prevent visual bugs. Starting with end-to-end tests and writing tests for bugs encountered are recommended for beginners.
Construye una aplicación frontend completa con Svelte
192 min
Construye una aplicación frontend completa con Svelte
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Svelte es un nuevo y prominente framework de JS que expone la filosofía de "escribir menos, hacer más". Durante este masterclass, adquirirás habilidades como desarrollador de Svelte.Estaremos construyendo una aplicación que imita al famoso sitio web de preguntas y respuestas stackoverflow.com. Comenzaremos desarrollando componentes simples de frontend, luego los conectaremos a un backend en funcionamiento real y finalmente los probaremos y optimizaremos para producción.Asistir a un masterclass es la forma más rápida de adquirir un conjunto de conocimientos sobre la construcción de aplicaciones web con Svelte.
Accesibilidad como un Ciudadano de Primera Clase
24 min
Accesibilidad como un Ciudadano de Primera Clase
TypeScript and React are popular languages for software development. Accessibility is important for inclusivity and preventing lawsuits. Building accessibility from the start is crucial, considering design and engineering aspects. Tooling for React Native accessibility is limited. Setting the accessible prop and role in components is essential for screen reader users. The React Native documentation is helpful, but some accessibility needs may require additional attention.
GraphQL y React: Dos Grandes Sabores que Combinan Perfectamente
9 min
GraphQL y React: Dos Grandes Sabores que Combinan Perfectamente
React's JavaScript extension allows you to write JavaScript in the JavaScript editor, providing flexibility for any type of application. The use of React and GraphQL in enterprise applications resulted in improved code maintenance, design acumen, and code reuse. Building teams of passionate individuals interested in React and GraphQL solidified the argument for using these libraries. The integration of React and GraphQL with modern development paradigms like Reactive and event-based programming was seamless. Existing reference materials and community-based resources facilitated the quick onboarding of new team members.
Accesibilidad en React: Más allá de lo básico
32 min
Accesibilidad en React: Más allá de lo básico
Today's Talk on React Accessibility covers the importance of manual testing, the challenges faced in addressing accessibility, the impact of accessibility on user experience, and the use of subtitles and user settings for accessibility. It emphasizes the need for manual testing in addition to automated testing, the role of empathy training in understanding accessibility challenges, and the significance of addressing accessibility issues for all users. The Talk also highlights the benefits of implementing accessibility features, such as increasing website accessibility for disabled markets and improving user experience for all.
Presentando React View
30 min
Presentando React View
ReactJS is a JavaScript-based framework that emphasizes the importance of building amazing documentation to reduce questions. The speaker discusses the custom website built using Next.js and MDX, and the challenges of dealing with JSX and the compilation process. The talk also covers interacting with NAPs, extracting information from code using AST, and the benefits of using Babel and AST Explorer. The process of building and generating code with AST is explained, along with the importance of documentation and ReactVue. The speaker also provides insights on getting started with documentation, building custom documentation, and keeping it in sync with the code.
¡Deja respirar al hilo principal!
35 min
¡Deja respirar al hilo principal!
Let's explore how to improve web application performance by offloading tasks from the main thread to other threads. We need to ensure compatibility with all devices and users to avoid frustrating experiences. Web Workers and Web Assembly can help improve performance by offloading tasks, but there are trade-offs to consider. Converting existing codebases to WebAssembly can be done gradually, and it's important to measure performance before making the conversion.
La X en MDX
9 min
La X en MDX
Markdown is extended by MDX to support more content and layouts. MDX allows for customization of rendering and extraction of data. It is often used for embedding interactive components. MDX can be used to create custom layouts and synchronize steps with media. Codehike is a project focused on code wall tools and explaining code.
Componentes de React y cómo estilizarlos
8 min
Componentes de React y cómo estilizarlos
This lightning talk explores different methods of styling React components, including inline styling, CSS stylesheets, and CSS in JS. The speaker highlights the benefits of using Style Components and Emotion, such as access to pseudo selectors, global styling, and themed elements. They also discuss the concept of polymorphism in Style Components. The speaker recommends using style components for their power and accessibility. The choice of styling method depends on project scale and personal preference.
Los juegos son más inteligentes que nosotros
26 min
Los juegos son más inteligentes que nosotros
Today's Talk explores game development using JavaScript, including building games in the browser, using game engines, and utilizing the BitMellow framework. It also delves into the concept of using AI to make computers play games, discussing reinforcement learning and implementing it in games like Flappy Bird. The Talk highlights the process of teaching the agent to learn, modifying rewards to improve performance, and the journey of game development from initial stages to advanced AI integration.
Por qué los componentes de UI pagados no son malos
8 min
Por qué los componentes de UI pagados no son malos
Paid UI components are not evil and offer benefits such as guaranteed support and long-term peace of mind. They solve harder problems and provide features and guarantees that free controls may not have. Paid components also establish a direct financial relationship with the authors, eliminating the need for sponsorship or donation models.
Mejora tu SEO
8 min
Mejora tu SEO
We're introducing our new release and livestream, explaining mobile-first indexing and its impact on SEO. Teachers Pay Teachers faced challenges with Google's move to mobile-first indexing, prompting them to optimize their mobile pages. They combined teams, tested performance, increased page speed, fixed structured data issues, and showed hidden content to improve search ranking. To optimize mobile pages for Googlebot, it is important to update mobile content, increase page speed, and test performance and SEO.
Utilizando React Hooks + Capacitor para acceder a las API nativas móviles
7 min
Utilizando React Hooks + Capacitor para acceder a las API nativas móviles
Capacitor is a powerful tool built by Ionic that allows web applications to be compiled into native iOS and Android projects. It comes with a set of plugins, including the camera plugin, and has a React hooks package for seamless integration with React applications. The Talk includes a demo showcasing the camera hook button and the rendering of selected photos. The presenter emphasizes the use of useEffect and useState for additional functionality. The Talk concludes with a mention of the Capacitor community and gratitude for attending.
Todos somos Hemingway
22 min
Todos somos Hemingway
This Talk covers important tips for software development, focusing on React. Starting with what you know and building on it is emphasized. Asking the right questions and simplifying components demonstrates seniority. Reading code and asking questions are crucial for finding better solutions. The connect function in React Red Hook's library and the function-as-child component pattern are highlighted. Writing code that is easy for others to understand and maintain is emphasized. The importance of retrying on the server and refactoring for the ecosystem is mentioned.
Documentación de la biblioteca de componentes inclusiva y sin problemas
18 min
Documentación de la biblioteca de componentes inclusiva y sin problemas
This Talk discusses how Gatsby and MDX can improve component library documentation. The speaker shares their experience with a previous design system and the challenges they faced with documentation. They explain how Gatsby was chosen as a solution and the benefits it provided. The use of MDX is highlighted as a way to enhance component documentation. The addition of editable code blocks is also mentioned as a means to make the documentation more interactive and intuitive.
Crear Entorno de Realidad Virtual Colaborativo en el Navegador con React y GraphQL
26 min
Crear Entorno de Realidad Virtual Colaborativo en el Navegador con React y GraphQL
This Talk explores creating VR experiences with A-Frame and React 360, using coordinate systems and rendering different surfaces. It also discusses bringing data into VR with GraphQL and architecting collaborative systems with Hasura. The Talk demonstrates how to add VR and A-Frame to React 360, and concludes with a focus on rendering and wrapping components. Overall, the Talk encourages exploration and experimentation in VR and AR development.
Tematizando aplicaciones Gatsby con Theme UI
6 min
Tematizando aplicaciones Gatsby con Theme UI
Welcome to Theming Gatsby apps with Theme UI. Gatsby is a React-based framework for building static websites and applications. Theme UI is a styling library that allows developers to configure designs for components using predefined values. In Theme UI, you can easily refer to your theme object throughout your project. Variants allow you to define styles for common components like buttons.