Name: React Summit 2020
Start: 2020-10-14T22:00:00.000Z
End: 2020-10-15T22:00:00.000Z

Daniel Afonso

Aleksei Podgaev

Lera

Anna J McDougall

Andreas Roth

Michael Seifarth

Aman Beg

Christopher McDonald

Rishi Narang

Sudhakar Kirubakaran

Arne Claerebout

Varun

Alexander Muzenhardt

Vlad Dumitrica

CHIGOZIE OGARA

Ken Korth

Alexander Varwijk

George Tymvios

Alan Plum

Angelos Koufakis

Natalie Olivo

Dan Pierce

Cristian Mocean

Flavius Papara

Azlina

Suren

Soumya

David Ten

Guilherme Santos

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

Repensando el Estado del Servidor con React Query

Welcome to my workshop on React Query, a powerful library for fetching data in React applications. We explore custom hooks and fetching data, as well as using React Query for data fetching and caching. We also learn about handling mutations, optimistic updates, and query prefetching. React Query simplifies global state management and provides a seamless user experience with instant data access and background fetching. The workshop concludes with a discussion on comparing React Query to SWR and the importance of sharing positive experiences with the library.

The distinction between server state and client state in our applications might be a new concept for some, but it is very important to understand when delivering a top-notch user experience. Server state comes with unique problems that often sneak into our applications surprise like: - Sharing Data across apps- Caching &amp; Persistence- Deduping Requests- Background Updates- Managing “Stale” Data- Pagination &amp; Incremental fetching- Memory &amp; Garbage Collection- Optimistic Updates Traditional “Global State” managers pretend these challenges don’t exist and this ultimately results in developers building their own on-the-fly attempts to mitigate them. In this workshop, we will build an application that exposes these issues, allows us to understand them better, and finally turn them from challenges into features using a library designed for managing server-state called React Query. By the end of the workshop, you will have a better understanding of server state, client state, syncing asynchronous data (mouthful, I know), and React Query. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Rethinking Server State with React Query

Tanner Linsley

Nx es una suite de herramientas de construcción de próxima generación. Next.js es un framework de última generación para construir aplicaciones web. Juntos, brindan orden al caos de construir múltiples aplicaciones web en varios equipos. Esta charla es un resumen rápido de cómo Nx puede ayudarte a mantener múltiples aplicaciones Next.js, con múltiples equipos, al mismo tiempo que compartes componentes y bibliotecas para una experiencia de usuario consistente. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Nx is a next generation suite of build tools. Next.js is state-of-the-art framework for building web applications. Together they bring order to the chaos of building multiple web applications across many teams. This talk is a quick rundown of how Nx can help you maintain multiple Next.js apps, with multiple teams, while sharing components and libraries for consistent user experience. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Adam L Barrett

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 `&lt;Suspense /&gt;` 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 &lt;Suspense /&gt;, 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 &lt;SuspenseList /&gt;. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Comenzando con Suspense y Renderizado Concurrente en React

This workshop explores suspense, lazy loading, bundle splitting, and data resources in React. It covers UI approaches to make applications appear faster and concurrent modes for more responsive applications. React.lazy is used to optimize loading and bundle size, while React Suspense is used to suspend rendering until components are loaded. Data resources can be created using the same principle as React.lazy. The workshop also discusses error handling, parallel suspense, and fetching data before rendering. Concurrent modes offer a solution to rendering delays and event handling in single-threaded JavaScript environments.

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the `&lt;Suspense /&gt;` component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using &lt;Suspense /&gt;, showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable combining it with concurrent rendering, the `useTransition()` hook and the &lt;SuspenseList /&gt; component. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Started with Suspense and Concurrent Rendering in React

Maurice de Beijer

TypeScript es un superset de JavaScript que se compila a JavaScript estándar y se ha vuelto cada vez más popular. Los defensores de TypeScript proclaman que elimina clases enteras de errores que afectan nuestras aplicaciones. Pero, ¿exactamente cuáles son esos errores? ¿Cuáles son específicos de la construcción de componentes y aplicaciones de React? ¿Vale la pena aprender TypeScript?En esta sesión dirigida a desarrolladores con experiencia previa en la construcción de aplicaciones de React, responderemos esas preguntas. Repasaremos los errores comunes que infectan nuestras aplicaciones y aprenderemos cómo el uso de tipos fuertes con TypeScript puede ayudar a prevenirlos. Después de la sesión, estarás ansioso por probarlo en tu próximo proyecto.

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.

TypeScript is a JavaScript superset that compiles down to vanilla JavaScript and has become increasingly popular. TypeScript proponents proclaim that it eliminates entire classes of bugs that affect our applications. But what exactly are those bugs? Which ones are particular to building React components and applications? Is TypeScript worth the learning curve?In this session geared towards devs with prior experience building React applications, let’s answer those questions. We’ll walk through the common bugs that infect our apps and learn how the use of strong types with TypeScript can help prevent them. After the session, you’ll be itching to try it out in your next project!

Ben Ilegbodu

Hay muchas formas de medir el rendimiento web, pero lo más importante es medir lo que realmente importa a los usuarios. Esta charla trata sobre cómo medir, analizar y solucionar el código JavaScript lento utilizando las API del navegador. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Visualising Front-End Performance Bottlenecks

Richie McColl

CDK (Cloud development kit) permite a los desarrolladores construir infraestructura en la nube utilizando lenguajes de programación populares como Python, TypeScript o JavaScript. CDK es una abstracción de nivel superior en infraestructura como código, lo que permite a los desarrolladores que tradicionalmente no estaban familiarizados con la computación en la nube construir APIs y servicios web escalables utilizando sus habilidades existentes, y hacerlo en solo unas pocas líneas de código. En esta charla, aprenderás cómo utilizar la versión de TypeScript de CDK para construir una API en tiempo real altamente escalable con GraphQL, Lambda, DynamoDB y AWS AppSync. Al final de la charla, codificaré en vivo una API desde cero en solo un par de minutos y luego probaré consultas, mutaciones y suscripciones. Al final de la charla, deberías tener una buena comprensión de GraphQL, AppSync y CDK y estar listo para construir una API en tu próximo proyecto utilizando TypeScript y CDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

CDK (Cloud development kit) enables developers to build cloud infrastructure using popular programming languages like Python, Typescript, or JavaScript. CDK is a next-level abstraction in infrastructure as code, allowing developers who were traditionally unfamiliar with cloud computing to build scalable APIs and web services using their existing skillset, and do so in only a few lines of code. In this talk, you’ll learn how to use the TypeScript flavor of CDK to build a hyper-scalable real-time API with GraphQL, Lambda, DynamoDB, and AWS AppSync . At the end of the talk, I’ll live code an API from scratch in just a couple of minutes and then test out queries, mutations, and subscriptions. By the end of the talk, you should have a good understanding of GraphQL, AppSync, and CDK and be ready to build an API in your next project using TypeScript and CDK. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Building Real-time Serverless GraphQL APIs on AWS with TypeScript and CDK

Nader Dabit

Los beneficios de SVG son vastos: estilizables, accesibles, animables. Y cuando se trata de SVG, el elemento Path es el bloque de construcción de los bloques de construcción. Durante esta presentación, profundizaremos en el lenguaje del camino SVG. No solo aprenderemos a leer datos de camino, sino que también obtendremos la capacidad de manipular caminos sobre la marcha con la ayuda de React, ¡sin necesidad de Adobe Illustrator o la ayuda de un diseñador con poco tiempo disponible!<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

The benefits of SVG are vast: style-able, accessible, animatable. And when it comes to SVG, the Path element is the building block of building blocks. During this presentation, we’ll take a deep dive into the language of the SVG path. Not only will we learn to read path data, but we'll also gain the ability to manipulate paths on the fly with the help of React - no Adobe Illustrator or help from a time-strapped designer necessary! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Language of Shapes: Understanding the SVG Path

Monica Wojciechowska

En esta charla relámpago estaremos empujando los límites de las API del navegador HTMl5 Canvas. Únete a nosotros mientras hacemos algunos experimentos con video en el navegador para ver qué es realmente posible. DESCARGO DE RESPONSABILIDAD: No se garantiza la compatibilidad entre navegadores. No apto para personas sensibles. Debes tener esta altura para subir. Asistir a esta charla relámpago puede resultar en lesiones graves o la muerte. Todos los participantes deben traer un chaleco salvavidas. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

In this lightning talk we will be pushing the boundaries of HTMl5 Canvas browser APIs. Join us while we do some experiments with video in the browser to see what’s truly possible. DISCLAIMER: No promises of cross-browser compatibility. Not for the faint of heart. Must be this tall to ride. Attending this lightning talk may result in serious injury or death. All participants must bring a life jacket. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Getting Weird with Video Manipulation and HTML5 Canvas

Dylan Jhaveri

Blitz es un marco de trabajo hiper productivo para construir aplicaciones React Fullstack. Aprenderás por qué creé Blitz, sus ventajas y desventajas, cómo te hace tan productivo y en qué casos deberías considerar usar Blitz.

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.

Blitz is a hyper productive framework for building fullstack React apps. You'll learn why I created Blitz, it's advantages and disadvantages, how it makes you so productive, and for what cases you should consider using Blitz.

Blitz.js - The Fullstack React Framework

Brandon Bayer

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

De cero a producción con GraphQL y React de extremo a extremo con el equipo de Hasura

GraphQL is being discussed as an alternative to REST APIs, offering benefits such as simplified feature updates, interconnected data management, and powerful developer tools. It provides solutions for performance issues and scalability through query compilation and caching. Hasura acts as a wrapper for non-GraphQL systems, allowing easy integration and versioning. The workshop covers setting up Hasura Cloud, migration, authentication with Auth0, and troubleshooting. Attendees are encouraged to explore additional resources and join the active Discord community.

Hasura is a free and open-source GraphQL Engine that can help supercharge your GraphQL adoption, whether it is for a new application or for an existing one. The workshop will cover: - A basic introduction to GraphQL- Using GraphQL to make CRUD operations from a React application- Setting up access controls to data- Building real-time components in React using GraphQL Subscriptions- Wrapping existing REST APIs with GraphQL servers that can be deployed on serverless platforms, and then merging them into a single endpoint using Remote Schemas- Triggering serverless functions on database events- In short, we’ll go through how React developers can adopt realtime GraphQL and serverless. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Zero to Production with Fullstack GraphQL and React with Hasura team

Allison Kunz

Hemos estado usando hooks durante un tiempo y con eso también hemos estado usando useEffect en particular y en esto hoy quiero echar un vistazo a las partes más complicadas de useEffect y por qué funcionan de esa manera para que puedas irte con una comprensión súper de cómo funciona toda esta magia. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

We have been using hooks for a while and with that we have also been using useEffect in particular and in this today I wanna take a look at the trickier parts of useEffect and why they work that way so you can leave with a super understanding of how this magic all works. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The Psycological Effects of useEffect

Sara Vieira

¿Cómo mejoras tu nivel? ¿Cómo arrancas tu aprendizaje cuando te adentras en algo nuevo? Nadie tiene más de 24 horas al día, así que ¿cómo maximizas el impacto de tu tiempo limitado? En esta presentación, te contaré un poco de mi propia historia y algunos consejos y trucos que he aprendido para que puedas ser lo más productivo posible al aprender cosas nuevas y solidificar ese conocimiento para cuando lo necesites. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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. 

How do you level up? How do you jumpstart your learning when getting into something new? Nobody has more than 24 hours a day, so how do you maximize the impact of your limited time? In this keynote, I'm going to tell you a bit of my own story, and some tips and tricks that I've learned so you can be as productive as you can be at learning new things and solidifying that knowledge so it's there when you need it. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Kent C. Dodds

¿Eres un desarrollador de React Native? ¿Siempre has deseado el rico ecosistema de herramientas de desarrollo que existe para la web en Chrome y Firefox? Flipper es la plataforma interna y extensible de herramientas de desarrollo móvil de Facebook, utilizada por los desarrolladores móviles que trabajan en Facebook, WhatsApp, Instagram y muchas otras aplicaciones. Recientemente, el equipo de React Native y Flipper ha estado trabajando arduamente para agregar soporte de primera clase para React Native. Esto significa que ahora se puede monitorear el tráfico y el rendimiento de la red, utilizar las herramientas de desarrollo de React, inspeccionar los registros del dispositivo y la aplicación, e incluso depurar JavaScript, todo ello de manera conveniente utilizando una sola herramienta coherente. Y lo mejor de todo: Flipper es extensible, ¡así que construyamos nuestro propio complemento mientras lo hacemos! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Are you a React Native developer? Have you always been longing for the rich ecosystem of developer tooling that exists for the web in e.g. Chrome and Firefox? Flipper is Facebooks internal, extensible mobile devtool platform, used the mobile devs that work on the Facebook, WhatsApp, Instagram and many more apps. Recently the React Native and Flipper team have been working hard to add first class support for React Native as well. This means that monitoring network traffic and performance, using the React Devtools, inspecting device and application logs or even debugging JavaScript can now can now be conveniently done using one coherent tool. And best of all: Flipper is extensible, so let's build our own plugin while at it! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Flipper: The Extensible DevTool Platform for React Native

Michel Weststrate

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

Construye una aplicación frontend completa con Svelte

Svelte is a compiler-based framework that eliminates complexity and improves efficiency in web development. It combines HTML, styling, and JavaScript in one file and does not require additional build tools or state management packages. Svelte's syntax is concise and handles reactivity effectively. It supports component-based architecture, event handling, conditional rendering, and stores for state management. Svelte offers additional features like routing, dynamic importing, and built-in animation capabilities.

Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&amp;A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build Full Featured Frontend App with Svelte

Mikhail Kuznetsov

A medida que agregas más componentes a tu aplicación React, comenzarás a notar problemas de rendimiento. Tal vez los datos no se carguen tan rápido o notes que las cosas suceden fuera de orden. Hay herramientas y técnicas que puedes utilizar para manejar este tipo de problemas a gran escala. En esta charla, los asistentes aprenderán cómo analizar sus aplicaciones React en busca de problemas solucionables y aprenderán algunas técnicas de gestión de estado y manejo asíncrono.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

As you add more components to your React application, you'll start to notice performance issues. Maybe data isn't loading as fast or you notice that things are happening out of order. There are tools and techniques you can use to handle these kind of issue at a large scale. In this talk, attendees will learn how to analyze their React apps for solvable issues and learn some state management and async handling techniques. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Making Your React Apps Perform At Scale

Milecia McGregor

Cada bug es diferente: Algunos acechan durante meses, otros aparecen repentinamente después de la actualización de una dependencia. Algunos son introducidos por nosotros, otros por otros equipos o sistemas. Algunos son dolorosamente obvios y afectan a todos los usuarios, otros solo ocurren en casos extremos. Y las formas de encontrarlos y, eventualmente, prevenirlos, son igual de diversas: ya sea a través de pruebas de captura de pantalla, unitarias, de integración, de extremo a extremo o pruebas visuales automatizadas, cada tipo tiene sus desafíos y oportunidades. Probar interfaces de usuario es difícil, pero al final, solo la automatización de pruebas puede brindarnos la confianza que necesitamos para avanzar rápidamente y refactorizar nuestro código implacablemente. En esta charla vamos a ver qué tipos de bugs existen, qué pruebas son más efectivas para atraparlos y cómo podemos implementarlas utilizando tecnologías modernas en el front-end.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Every bug is different: Some are lurking around for months, others appear suddenly after the upgrade of a dependency. Some are introduced us, others other teams or systems. Some are painfully obvious and affect all users, others only occur in edge (cases). And the ways of finding, and eventually, preventing them, are just as diverse: be it snapshot, unit, integration, end to end tests or automated visual tests, every kind comes with its challenges and opportunities. Testing UIs is hard, but in the end, only test automation can give us the confidence we need to move fast and refactor our code relentlessly. In this talk we are going to look at what kinds of bugs there are, which tests are most effective for catching which, and how we can implement them using modern front end technologies. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Fantastic Bugs and Where to Find Them

Iris Schaffer

La accesibilidad en React ha sido un tema candente en los últimos años, pero en esta charla iremos más allá de lo básico. Discutiremos qué significa discapacidad más allá de lo que has escuchado antes, y luego usaremos ejemplos de código para aprender por qué HTML semántico es útil y cuándo no es suficiente. Luego veremos las herramientas y hablaremos sobre cómo puedes introducir pruebas de accesibilidad en tus equipos y código existente. Saldrás con las herramientas y el conocimiento para marcar la diferencia a partir de hoy.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Accessibility in React has been a hot topic in the last few years, but in this talk, we'll be going beyond the basics. We'll discuss what disability means beyond what you've heard before, and then use code examples to learn why semantic HTML is helpful, and when it's just not enough. We'll then look into tooling, and talk about how you can introduce accessibility testing into your teams and existing code. You'll leave with the tools and knowledge to make a difference starting today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Accessibility: Beyond the Basics

Jen Luker

Como ingeniero full-stack con inclinación hacia la base de datos...y una carrera dedicada a trabajar y promover sistemas de bases de datos distribuidas...¿por qué GraphQL? En esta charla, compartiré parte de mi viaje personal con React, GraphQL, sus respectivas comunidades y mi punto de vista sobre el futuro. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

As a full-stack engineer with a bias towards the database...and a career spent working with and evangelizing database and distributed systems...why GraphQL? In this talk, I will share some of my personal journey with React, GraphQL, their respective communities, and my point-of-view on the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

GraphQL and React - Two Great Tastes that Taste Great Together 

Adron Hall

Muy a menudo, A11Y es solo una idea secundaria y se agregará a un proyecto "cuando tengamos tiempo", es decir, nunca. Pero hay muchas razones por las que deberías desarrollar teniendo en cuenta la accesibilidad desde el principio, incluyendo algunas que convencerán a los superiores. Exploraremos las herramientas que podemos usar para ayudarnos a desarrollar de manera más accesible y hablaremos sobre algunas de las peculiaridades y limitaciones que tiene React Native. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

All too often A11Y is only an afterthought and will be added to a project "when we have time" i.e. never. But there are a many reasons why you should develop with a11y in mind from the start including some that will convince The Higher-Ups. We'll explore tools we can use to help us develop more accessibly and talk about some of the quirks and limitations that React Native has. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Accessibility as a First Class Citizen

Sophie Au

¡Así que has construido una biblioteca de componentes! ¡Felicidades! Estoy seguro de que es increíble, pero ¿has puesto el mismo esfuerzo en su documentación? Las bibliotecas de componentes tienden a tener APIs gigantes, docenas de componentes, cientos de props y miles de combinaciones. Eso es mucha información para desempacar. Podríamos hacer la documentación muy extensa o... súper interactiva. Combinamos vistas previas de componentes, documentación de API, edición de props y edición de código en una experiencia única y fluida. Puedes explorar rápidamente varias configuraciones de cada componente mientras ves cómo se escribe el código. Esta charla te mostrará cómo aprovechar herramientas y conceptos comunes como Prettier, babel y transformaciones AST para construir una documentación que literalmente puede trabajar para ti. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

So you built a component library. Congrats! I am sure it is awesome but did you put the same effort into its documentation? Component libraries tend to have giant APIs, dozens of components, hundreds of props and thousands of permutations. That is a lot of information to unpack. We could make the documentation very long or... super interactive. We combined component previews, API documentation, props editing and code editing into a single seamless experience. You can quickly explore various settings of each component while watching the code write itself. This talk will show you how to leverage common tools and concepts such as Prettier, babel and AST transformations to build the documentation that can literally work for you. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Introducing React View

Vojtech Miksu

Markdown es genial para sitios impulsados por contenido. MDX es aún mejor, ya que te permite incrustar componentes interactivos directamente desde tu marcado. Por lo general, se utiliza para los mismos diseños lineales que a menudo se ven en muchos blogs, readmes y sitios de documentación. Pero no tiene que ser así. En esta charla, veremos cómo remodelar MDX para poder utilizarlo en diseños muy diferentes, como scrollytelling, presentaciones de diapositivas y más. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Markdown is great for content-driven sites. MDX is even better, letting you embed interactive components directly from your markup. It's usually used for the same linear layouts you often see on many blogs, readmes, and documentation sites. But it doesn't need to be like this. In this talk, we'll see how to reshape MDX so we can use it for very different layouts, things like scrollytelling, slide decks, and more. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

The X in MDX

Rodrigo Pombo

Un análisis comparativo entre cuatro métodos de estilizar componentes de React, desde estilos en línea hasta Styled-Components. Esta charla es más adecuada para desarrolladores principiantes. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

A comparative analysis between four methods of styling React components from inline styling to Styled-Components. This talk is best suited to beginner developers. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Components and How To Style Them

Jemima Abu

El hilo principal, en la web, tiene muchas responsabilidades. Al mismo tiempo, las aplicaciones web se están volviendo más sofisticadas cada día. Por lo tanto, el hilo principal se vuelve demasiado ocupado y decepcionará a nuestros usuarios mostrando cuadros entrecortados. La arquitectura fuera del hilo principal garantiza que las aplicaciones se ejecuten sin problemas en todos los dispositivos para todos. En esta charla, exploraremos las posibilidades en los navegadores, como WebWorker, Worklet y WebAssembly, presentando herramientas prácticas que nos permiten mejorar nuestras experiencias de usuario.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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

The main thread, on the web, has a lot of responsibilities. At the same time, web apps are getting more sophisticated every day. Therefore, the main thread gets too busy that will disappoint our user showing janky frames! The off-main-thread architecture ensures apps run smoothly on every device for everyone. In this talk, we will go through the possibilities in browsers such as WebWorker, Worklet, and WebAssembly introducing practical tools that allow us to boost our user experiences. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Let the Main Thread Breathe!

Majid Hajian

La genialidad de JS va más allá de las páginas web. Primero escribiremos un juego en 2D (en Javascript) - y luego - escribiremos código de IA (¡en Javascript!) que será capaz de ganar este juego por nosotros. ¡Oh, qué época para estar vivo! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

JS awsomeness beyond webpages. First we'll write a cool 2D game (in Javascript) - and then - write AI code (in Javascript!) that will be able to win this game for us. Oh, what a time to be alive! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Games Are Smarter Than Us

Liad Yosef

En esta charla voy a convencerte de que los componentes de UI pagados resolverán todos tus problemas, y que deberías darme todo tu dinero de inmediato. Tal vez. O quizás me basaré en mi experiencia trabajando tanto en herramientas gratuitas y de código abierto (jQuery, jQuery UI, NativeScript), como en herramientas pagadas (Kendo UI, KendoReact), y discutiré qué tipo de herramienta tiene sentido según tu equipo y necesidades. En cualquier caso, la charla será rápida porque el rayo está en el título.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

In this talk I’m going to convince you that paid UI components will solve all your problems, and that you should immediately give me all of your money. Maybe. Or perhaps I’ll draw on my experience working both on free and open source tools (jQuery, jQuery UI, NativeScript), as well as paid tools (Kendo UI, KendoReact), and discuss which type of tool makes sense depending on your team and needs. In any case the talk will go fast because lightning is in the title. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Why Paid UI Components Aren’t Evil

TJ VanToll

Panel Discussion: Testing

Introduction of panelists discussing the importance of testing in projects. Introductions and insights from panelists on the value of testing in software development. Exploring the importance of testing in existing projects and strategies for team and manager buy-in. Discussing legacy code testing challenges and advocating for quality assurance in software development. Discussing the importance of testing end results rather than internal details, advocating for Cypress as an E2E testing tool, and debating the longevity of testing tool choices. Discussing the evolution of testing tools, the importance of sticking to effective solutions, and the preference for AI-driven testing advancements. End-to-end tests may not cover all edge cases. Integrating various component interactions can be challenging. Prioritize testing effectiveness over quantity of tests to maintain code efficiently and avoid unnecessary complexity. Flakiness in end-to-end tests can be mitigated by utilizing lower-level tests for specific application parts.

Tomasz Łakomy

Usando Capacitor, puedes crear fácilmente aplicaciones móviles nativas para iOS y Android utilizando todas las herramientas web de React que conoces y amas. Pero, ¿cómo accedemos a las API nativas? ¡Con el paquete @capacitor-community/react-hooks, podemos acceder rápidamente y fácilmente a las API nativas del dispositivo, como la cámara, el sistema de archivos y la geolocalización, utilizando React Hooks!

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.

Using Capacitor, you can easily create native mobile iOS and Android applications using all of the React web tools you know and love. But how do we access the native APIs? With the @capacitor-community/react-hooks package, we can quickly and easily access native device APIs, like Camera, Filesystem, and Geolocation, using React Hooks!

Using React Hooks + Capacitor to Access Native Mobile APIs

Thomas Vidas

La Realidad Virtual nos brinda la capacidad de experimentar mundos virtuales desde la comodidad de nuestros hogares. Pero no tiene que ser una experiencia solitaria. En esta charla veremos cómo podemos utilizar React, WebVR y GraphQL para crear una experiencia de Realidad Virtual social en el navegador.<a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Virtual Reality gives us an ability to experience virtual worlds from the comfort of our homes. But it doesn't have to be experienced alone. In this talk we will see how we can use React, WebVR and GraphQL to create social VR experience in the browser. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Create Collaborative VR Environment in the Browser with React and GraphQL

Vladimir Novick

Google anunció que cambiará por completo a rastrear e indexar sitios utilizando la indexación móvil primero en marzo de 2021. Ahora, para algunas empresas, su sitio móvil se renderiza dinámicamente, lo que tiene un alto riesgo de disminuir su clasificación en Google una vez que se implemente por completo la indexación móvil primero. Esta presentación compartirá cómo evaluar qué cambios deben realizarse, las mejores prácticas para aumentar el SEO para la indexación móvil primero, cómo aumentar el rendimiento y cómo convertir partes de tu sitio de renderizado dinámico a responsive en menos de dos meses. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Google announced that they will fully switch over to crawling and indexing sites using mobile-first indexing March 2021. Now for some companies their mobile site is dynamically rendered which has a high risk of decreased ranking on google once mobile-first indexing is fully implemented. This presentation will share how to assess what changes needs to be made, best practices to increase SEO for Mobile First Indexing, how to increase performance, and how to turn parts of your site from dynamic rendering to mobile responsive in less than two months. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Improve Your SEO

Ruth Mesfun

¿Es su configuración de documentación compleja una pesadilla de mantenimiento y ahuyenta a posibles colaboradores? En esta charla, aprenderá cómo hacer que la documentación de su biblioteca de componentes React sea más amigable para los usuarios y colaboradores con Gatsby y MDX. Combine esto con las mejores prácticas de accesibilidad y su documentación será inclusivamente fluida. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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.

Is your complex documentation setup a maintenance nightmare and chasing away potential contributors? In this talk, you will learn how to make your React component library documentation more user and contributor-friendly with Gats and MDX. Pair this with accessibility best practices, and your documentation will be inclusively smooth. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2020

The biggest React conference worldwide