Name: React Summit 2022
Start: 2022-06-17T09:00:00.000Z
End: 2022-06-21T22:00:00.000Z

Vlad Dumitrica

Manuel Bieh

Petra vos

Lera

Aleksei Podgaev

Bruno Sampaio

JSNation Conference 🗓 June 1-5, 2023

Daria Shabala

Tanner Linsley

Stephen Cooper

Tobbe Lundberg

Varun

Thibault Van den Broecke

Batuhan NARCI

Michele Bonazza

Bart Zaalberg

Harshil Agrawal

Daishi Kato

Nadia Makarevich

Alexandre Moureaux

Tobias Koppers

Matheus Albuquerque

Mike Hartington

Nikolay Advolodkin

Kevin

David Pugh

Ricardo Machado

Gido Manders

Barbara Ferreira

David Pertiller

David Barry

Christian  Bayer

Bernie Green

Charles

Convertirse en un ingeniero web no es fácil, pero hay toneladas de recursos disponibles para ayudarte en tu viaje. ¿Pero a dónde vas desde allí? ¿Qué haces para seguir creciendo y para seguir expandiendo el valor que aportas a tu empresa? En esta charla, examinaremos los diferentes tipos de impacto que puedes tener como ingeniero web. Analizaremos lo que significa asumir proyectos más grandes y complejos, y cómo escalar a ti mismo y hacer crecer la comunidad a tu alrededor. Al impulsar nuestro propio desarrollo, todos podemos aumentar nuestro impacto, y en esta charla, discutiremos cómo hacerlo.

Impacto: Creciendo como Ingeniero

This Talk explores the concepts of impact and growth in software engineering. It emphasizes the importance of finding ways to make the impossible possible and the role of mastery in expanding one's sphere of impact. The Talk also highlights the significance of understanding business problems and fostering a culture of collaboration and innovation. Effective communication, accountability, and decision-making are essential skills for engineers, and setting goals and finding sponsors can help drive career growth. Feedback, goal setting, and stepping outside of comfort zones are crucial for personal development and growth. Taking responsibility for one's own growth and finding opportunities for impact are key themes discussed in the Talk.

Becoming a web engineer is not easy, but there are tons of resources out there to help you on your journey. But where do you go from there? What do you do to keep growing, and to keep expanding the value you bring to your company? In this talk we’ll look at the different kinds of impact you can have as a web engineer. We’ll walk through what it means to take on bigger, more complex projects, and how to scale yourself, and grow the community around you. By driving our own development we can all grow our impact, and in this talk, we’ll discuss how to go about this.

Impact: Growing as an Engineer

Iris Schaffer

Concurrent React y Server Components están cambiando la forma en que pensamos sobre el enrutamiento, la renderización y la obtención de datos en las aplicaciones web. Next.js recientemente compartió parte de su visión para ayudar a los desarrolladores a adoptar estas nuevas características de React y aprovechar los beneficios que desbloquean.En esta charla, exploraremos el pasado, presente y futuro del enrutamiento en las aplicaciones de front-end y discutiremos cómo las nuevas características en React y Next.js pueden ayudarnos a arquitectar aplicaciones más eficientes y con más funciones.

Enrutamiento en React 18 y más allá

Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.

Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.

Routing in React 18 and Beyond

Delba de Oliveira

Quiero ofrecer una visión en profundidad de los conceptos importantes detrás de la reconciliación. Luego exploraremos cómo React utiliza el algoritmo y repasaremos algunas palabras mágicas que escuchamos mucho, como coroutines, continuations, fibers, generators, efectos algebraicos y veremos cómo todos se relacionan con React.js.

Inside Fiber: la visión en profundidad que querías un TLDR para

This Talk explores the internals of React Fiber and its implications. It covers topics such as fibres and units of work, inspecting elements and parent matching, pattern matching and coroutines, and the influence of coroutines on concurrent React. The Talk also discusses effect handlers in React, handling side effects in components, and the history of effect handlers in React. It concludes by emphasizing the importance of understanding React internals and provides learning resources for further exploration.

I want to provide an in-depth overview of the important concepts behind reconciliation. We'll then explore how React uses the algorithm and go through a few magic words we hear a lot, like coroutines, continuations, fibers, generators, algebraic effects and see how they all relate to React.js.

Inside Fiber: the in-depth overview you wanted a TLDR for

React es una herramienta fantástica para implementar aplicaciones complicadas rápidamente, todos lo sabemos. Pero, ¿van a ser rápidas cuando se implementan rápidamente? Hablemos de re-renderizados y su peligro en react: lo fácil que es cometer un error, por qué algunos errores pequeños pueden tener un efecto enorme aguas abajo, y cómo evitarlos y prevenirlos.Este es un tipo de charla de inmersión profunda, que se centra en por qué los componentes de React se re-renderizan, qué tipo de impacto de rendimiento puede tener, y qué hacer al respecto

Hablemos de Re-renderizados

This Talk discusses React performance and how re-renders can affect it. It highlights common mistakes and misconceptions, such as the overuse of useMemo and useCallback hooks. The importance of React.memo in preventing unnecessary child component re-renders is emphasized. Creating components in render functions is identified as a major performance killer, and the benefits of moving state down and wrapping state around children are explained. The Talk also covers optimizing component rendering through memoization and provides a recap of the key points.

React is a fantastic tool to implement complicated applications fast, we all know it. But are they going to be fast when implemented fast? Let’s talk about re-renders and their danger in react: how easy it is to make a mistake, why some small mistakes can have a huge downstream effect, and how to avoid and prevent them.This is a deep-dive type of talk, that focuses on why React components re-render, what kind of performance impact it can have, and what to do about it

Let’s Talk about Re-renders

En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.

Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL

Let's get started with the workshop on building a Headless WordPress app with Next.js and WP GraphQL. We'll cover the benefits and drawbacks of a headless approach, explore the finished application and blog page, and implement features like search and single blog post pages. We'll also learn how to turn WordPress into a GraphQL server, set up Apollo Client, compose GraphQL queries, and use fragments. The workshop discusses caching, cache invalidation, and the use of Next.js as a static site generator. Various CMS options are compared, including WordPress, Contentful, Sanity, Prismic, and Strapi.

In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

Build a Headless WordPress App with Next.js and WPGraphQL

Kellen Mace

Tailwind CSS, con su enfoque de utilidad primero, es conocido por acelerar el proceso de desarrollo. Combinándolo con el poder de React, veamos cómo puedes construir un sistema de diseño personalizado para tu proyecto para acelerarlo aún más, hacerlo escalable y también fácil de mantener.

Construir un Sistema de Diseño con React y Tailwind CSS

This Talk discusses design systems and how to build one using React and Tailwind CSS. Tailwind CSS provides utility classes for building complex layouts without writing CSS rules. Custom colors can be added to the Tailwind CSS config file, and font styles and text sizes can be customized. The entire Tailwind CSS configuration can be customized to meet specific requirements. Base styles can be added to the config file itself using a plugin. Reusable components can be created with Tailwind CSS, allowing for easy customization of size and color.

Tailwind CSS, with its utility-first approach is known for speeding up the development process. Combining it with the power of React, let’s see how you can build a custom design system for your project to further speed it up, make it scalable and also easy to maintain.

Build a Design System with React and Tailwind CSS

Shruti Balasa

Existen muchas formas de autorizar componentes en React, y hacerlo correctamente puede no ser tan fácil, especialmente cuando los componentes se vuelven más complejos. En esta charla, aprenderás cómo construir componentes React a prueba de futuro. Cubriremos dos enfoques diferentes para construir componentes - Composición y Configuración, para construir el mismo componente utilizando ambos enfoques y explorar sus ventajas y desventajas.

Composición vs Configuración: Cómo Construir Componentes Flexibles, Resilientes y a Prueba de Futuro

Today's Talk discusses building flexible, resilient, and future-proof React components using composition and configuration approaches. The composition approach allows for flexibility without excessive conditional logic by using multiple components and passing props. The context API can be used for variant styling, allowing for appropriate styling and class specification. Adding variants and icons is made easy by consuming the variant context. The composition and configuration approaches can be combined for the best of both worlds.

There are many ways of authoring components in React, and doing it right might not be that easy, especially when components get more complex. In this talk, you will learn how to build future-proof React components. We will cover two different approaches to building components - Composition and Configuration, to build the same component using both approaches and explore their advantages and disadvantages.

Composition vs Configuration: How to Build Flexible, Resilient and Future-proof Components

Thomas Findlay

A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles. Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador. Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y <a href="https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/package.json#L155">utilizado por React Native en sí</a> como su herramienta de pruebas E2E. Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes. Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- <a href="https://github.com/evgeniyaglovatskaya/detox-workshop/blob/master/Workshop_Cheatsheets/0-START-PROJECT.md">Instalar antes de la masterclass</a>

Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

Detox is a cross-platform framework for writing stable, end-to-end tests for React Native applications. It synchronizes with your application, waits for it to go idle, and prevents tests from failing due to ongoing processes or animations. Detox allows you to write unified tests that work for both iOS and Android, while still supporting platform-specific code. The workshop covers the installation and configuration of Detox, writing tests with Detox using measures, actions, and expectations, and debugging test failures. Test isolation and best practices are also emphasized.

Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications. Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity. Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and <a href="https://github.com/facebook/react-native/blob/9a532edaaf6b80b10ce73eb8815e7f75a8c94bec/package.json#L155">used by React Native itself</a> as its E2E testing tool. Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock. Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- <a href="https://github.com/evgeniyaglovatskaya/detox-workshop/blob/master/Workshop_Cheatsheets/0-START-PROJECT.md">Install before the workshop</a>

Detox 101: How to write stable end-to-end tests for your React Native application

Yevheniia Hlovatska

Si no tienes tiempo para construirlo bien, ¿cuándo tendrás tiempo para construirlo dos veces? En las startups de crecimiento hiperactivo, el viejo adagio se desmorona. Obtienes un horizonte de tiempo en expansión, SI puedes hacer que se envíe. Una característica imperfecta la próxima semana supera a la característica perfecta dentro de 2 meses. Tu código no importará si estás muerto. No creí esto hasta que lo vi yo mismo. Una startup al borde del hockeystick me contrató para reescribir su aplicación jQuery en React. Su tecnología probó la idea y luego se convirtió en una carga. Durante el próximo año reescribimos toda la aplicación desde cero, formamos un equipo de expertos en React, creamos un código base que es un placer trabajar con él, y llevamos a la empresa a una Serie B de $100,000,000. Todo porque los primeros ingenieros sabían que si la versión de mala calidad funciona, habrá tiempo y recursos para arreglarlo más tarde. Esta charla es sobre lo que he aprendido mientras reescribía una aplicación con usuarios golpeando la puerta.

Tienes Tiempo para Construirlo Dos Veces

Today's Talk focuses on software rewrites, specifically the transition from jQuery to React. The speaker shares their experience of rewriting a jQuery app to React, highlighting the benefits of the rewrite in terms of improved user experience and increased conversions. Approaches to software rewrites are discussed, including the page-by-page approach which allows for product innovation. The speaker emphasizes the importance of prioritizing rewrites or refactors for startups. The Talk concludes with insights on testing, server-side functionality, and the overall value of the rewrite.

If you don’t have time to build it right, when will you have time to build it twice? In hyper growth startups the old adage breaks down. You get an expanding time horizon – IF you can get it shipped. An imperfect feature next week beats the perfect feature 2 months from now. Your code won’t matter if you’re dead. I didn’t believe this until I saw it myself. A startup on the cusp of hockeystick hired me to rewrite their jQuery app in React. Their tech proved the idea then became a burden. Over the next year we rewrote the whole app from scratch, grew a team of React experts, created a codebase that’s a joy to work with, and got the company to a $100,000,000 Series B. All because the early engineers knew that if the crappy version works out, there’s going to be time and resources to fix it later. This talk is about what I’ve learned while rewriting an app with users banging down the door.

You Do Have Time to Build it Twice

Swizec Teller

Next.js es un marco de trabajo fantástico; ofrece muchas características únicas, ayudándote a construir cualquier aplicación web sin esfuerzo. Pero cuando se trata de elegir la estrategia de renderizado correcta para tus páginas, puedes enfrentarte a un problema; ¿cómo debería renderizarlas? ¿Debería generarlas estáticamente en el momento de la construcción? ¿Debería renderizarlas en el servidor en tiempo de ejecución? Bueno, la respuesta es sorprendente. La renderización en el servidor rara vez es la mejor opción, y vamos a explorar por qué (¡y cómo resolver este problema!)

No querrás renderizar en el servidor tu aplicación Next.js

Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.

Next.js is a fantastic framework; it provides many unique features, helping you build any web application effortlessly. But when it comes to choosing the right rendering strategy for your pages, you may face a problem; how should I render them? Should I statically generate them at build time? Should I server-side render them at run-time? Well, the answer is surprising. server-side rendering is rarely the best option, and let's explore why (and how to solve this problem!)

You don't want to Server-side Render your Next.js App

Michele Riva

Únete a mí mientras me sumerjo en la historia de React Table y discuto todo lo que me ha enseñado (¡tanto éxitos como fracasos!) desde que construí la primera versión basada en componentes hace 5 años. Cubriremos toneladas de subtemas incluyendo, pero no limitado a: .... toma un respiro ... Headless UI, React Hooks, Advanced TypeScript, Branding &amp; Naming-Things, Build Pipelines, Open Source Software, API Design, React/JavaScript performance y hasta Framework Agnostic Tooling!

5 Años de Construir React Table

React Table is a popular table library that started with HTML5 tables and transitioned to React. It faced challenges with integration and user requests, leading to the development of React Table. The introduction of the Headless UI pattern and TypeScript support improved the library's capabilities and quality. Generics and TypeScript played a significant role in reducing the code size and improving development. React Table is now going framework agnostic and partnering with AG Grid.

Join me as a I dive into the history of React Table and discuss everything it’s taught me (both successes and failures!) since I built the first component-based version 5 years ago. We’ll cover tons of sub-topics including, but not limited to: .... takes a breath ... Headless UI, React Hooks, Advanced TypeScript, Branding &amp; Naming-Things, Build Pipelines, Open Source Software, API Design, React/JavaScript performance and even Framework Agnostic Tooling!

5 Years of Building React Table

Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas ¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™? Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida? Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones

Fundamentos de Remix

Remix simplifies state management and data loading in web applications, combining modern web development with the simplicity of managing state in the backend. It supports nested routing and provides a convenient way to associate parent and child components based on URL segments. Remix handles data fetching, mutations, and error states automatically. It offers flexibility in accessing loader data and allows for multiple instances of loader data in a component. Remix also provides seamless handling of form updates, error handling, and redirects.

Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™? Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster? At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions

Remix Fundamentals

Kent C. Dodds

React tiene un gran estándar de seguridad por defecto, pero si no prestas mucha atención a los detalles, podrías quemarte con algunas de las APIs de escape hatches, o incluso simplemente pasando props de manera insegura a los componentes. Te enseñaré cómo evitar estos escollos.

Cómo se hackean las aplicaciones React en el mundo real

How to hack a RealWorld live React application in seven minutes. Tips, best practices, and pitfalls when writing React code. XSS and cross-site scripting in React. React's secure by default, but not always. The first thing to discover: adding a link to a React application. React code vulnerability: cross-site scripting with Twitter link. React doesn't sanitize or output H ref attributes. Fix attempts: detect JavaScript, use dummy hashtag, transition to lowercase. Control corrector exploit. Best practices: avoid denialist approach, sanitize user inputs. React's lack of sanitization and output encoding for user inputs. Exploring XSS vulnerabilities and the need to pretty print JSON. The React JSON pretty package and its potential XSS risks. The importance of context encoding and secure coding practices.

React has a great security standard as default, but if you don’t pay close attention to the details you could get burned by some of the escape hatches APIs, or even by just passing props insecurely to components. I’ll teach you how to avoid these pitfalls.

How React Applications Get Hacked in the Real-World

Liran Tal

La arquitectura de micro frontends es extremadamente poderosa cuando se trata de dividir grandes monolitos frontend en bloques más pequeños, individualmente desplegables, cada uno es propiedad de un equipo autónomo y se centra en un dominio empresarial. Pero, ¿qué pasa con el Estado? A menudo se nos dice que los micro frontends no deberían compartir estado, ya que esto los haría acoplados entre sí. Sin embargo, cuando se trata de interfaces de usuario complejas, no es raro encontrar escenarios donde la gestión del estado entre micro frontends es necesaria. Esta charla es sobre encontrar el punto dulce: ¿En qué escenarios es razonable que los micro frontends compartan Estado? y ¿cómo deberían los micro frontends compartir Estado mientras permanecen desacoplados entre sí? Discutimos y comparamos diferentes soluciones en React.

Compartir es Cuidar: ¿Cómo Deberían los Micro Frontends Compartir Estado?

Micro-frontends allow development teams to work autonomously and with less friction and limitations. Organizing teams around business concerns, in alignment with subdomains, rather than technical concerns, can lead to software that is split nicely and user stories falling under the responsibility of a single team. Having a logical backup or reference point is important for implementing microfrontends without breaking their isolation. Microfrontends can communicate with each other using the window object and custom events. Microfrontends should be kept isolated while maintaining communication through various approaches.

Micro frontends architecture is extremely powerful when it comes to splitting large frontend monoliths into smaller, individually deployable blocks, each is owned by an autonomous team and is focused on a business domain. But what about State? We are often told that micro frontends shouldn't share state, as this would make them coupled to each other. However, when it comes to complex UIs, it is not rare to encounter scenarios where state management between micro frontends is necessary. This talk is about finding the sweet spot — In which scenarios it is reasonable for micro frontends to share State? and how should micro frontends share State while remaining decoupled of each other? We discuss &amp; compare different solutions in React.

Sharing is Caring: (How) Should Micro Frontends Share State?

Eliran Natan

Comienza con la Rejilla de Datos React de AG Grid con un tutorial práctico del equipo central que te llevará a través de los pasos para crear tu primera rejilla, incluyendo cómo configurar la rejilla con propiedades simples y componentes personalizados. La edición comunitaria de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar inmediatamente a tus proyectos. También descubrirás cómo cargar datos en la rejilla y diferentes formas de agregar renderizado personalizado a la rejilla. Al final de la masterclass, habrás creado una Rejilla de Datos React de AG Grid y personalizado con componentes React funcionales.- Comenzando e instalando AG Grid- Configurando ordenación, filtrado, paginación- Cargando datos en la rejilla- La API de la rejilla- Usando hooks y componentes funcionales con AG Grid- Capacidades de la edición comunitaria gratuita de AG Grid- Personalizando la rejilla con Componentes React

Práctica con la Rejilla de Datos React de AG Grid

The Workshop covered various topics related to AG Grid and React. It included installing dependencies, pulling data from remote sources, adding sorting and filtering capabilities, exploring grid properties and events, using Aggrid Enterprise for advanced functionality, and creating custom renderers and filters. The Workshop also discussed TypeScript support, server-side row model, and applying filters. Overall, the Workshop provided a comprehensive overview of AG Grid and React integration with a focus on practical usage and customization.

Get started with AG Grid React Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you'll learn a powerful tool that you can immediately add to your projects. You'll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created an AG Grid React Data Grid and customized with functional React components.- Getting started and installing AG Grid- Configuring sorting, filtering, pagination- Loading data into the grid- The grid API- Using hooks and functional components with AG Grid- Capabilities of the free community edition of AG Grid- Customizing the grid with React Components

Hands-on with AG Grid's React Data Grid

Sean Landsman

La Programación Funcional (FP), un paradigma en el cual los programas están compuestos por funciones puras y sin estado, es adorado por muchos programadores por lo fácil que hace predecir, probar y depurar el comportamiento del código que escribimos. Aunque la FP tiene una reputación desafortunada como un dominio de torres de marfil lleno de jerga oscura comprensible solo para aquellos con doctorados en teoría de categorías, los conceptos fundamentales son ideas sencillas que todos podemos entender, ¡e incluso divertirnos aprendiendo! En esta charla, crearemos arte SVG generativo como una forma de explorar conceptos fundamentales de FP como la recursión y la composición de funciones, y abordaremos los desafíos prácticos de la FP en el mundo real, como lidiar con las partes complicadas como los efectos secundarios y la aleatoriedad que no encajan en el mundo seguro y estéril de las funciones puras. ¡Al final de la charla, no solo tendremos los conceptos clave y las técnicas que necesitamos para comenzar a escribir nuestros propios programas funcionales, sino que también tendremos arte funcional bastante para admirar!

El Arte de la Programación Funcional

Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.

Functional Programming (FP), a paradigm in which programs are made up of pure, stateless functions, is adored by many programmers for how easy it makes it to predict, test, and debug the behavior of the code we write. Although FP has an unfortunate reputation as an ivory-tower domain full of obscure jargon comprehensible only to those with PhDs in category theory, the core concepts are straightforward ideas all of us can understand, and even have fun learning! In this talk, we’ll create generative SVG art as a way to explore fundamental FP concepts such as recursion and function composition, and tackle the practical challenges of FP in the real world, such as dealing with the tricky parts like side effects and randomness which don’t fit into the safe, sterile world of pure functions. By the end of the talk we’ll not only have the key concepts &amp; techniques we need to start writing our own functional programs, we’ll have some pretty functional art to look at too!

The Art of Functional Programming

Anjana Vakil

Los formularios son una parte fundamental de muchas aplicaciones y a menudo las acciones complejas se dividen en múltiples formularios como pasos en este flujo de trabajo. Usando el API de Contexto de React y una máquina de estados convencional, podemos construir un sistema reutilizable para construir estos magos y hacer que la web sea un poco más mágica.

Convirtiéndose en un Maestro de Formularios: Flujos de Trabajo Intuitivos de Múltiples Pasos

This Talk explores the concept of form wizards and their role in creating intuitive, multi-step workflows. It discusses the use of state machines and various implementation options, including Formic and the Dream API. The process of building a form wizard using React context, reducers, and custom hooks is explained. Integrating state machines and the introduction of the Robo Wizard library are also covered, highlighting its flexibility and compatibility with different UI frameworks.

Forms are a core part of many applications and complex actions are often broken up into multiple forms as steps in this workflow. Using React’s Context API and a conventional state machine, we can build a reusable system for building these wizards and make the web a bit more magical.

Becoming a Form Wizard: Intuitive Multi-Step Workflows

Nick Hehr

Los sistemas de diseño tienen como objetivo brindar consistencia al diseño de una marca y hacer que el desarrollo de la interfaz de usuario sea productivo. Las bibliotecas de componentes con una API bien pensada pueden hacer que esto sea muy fácil. Pero, ¡a veces una elección de API puede sobrepasarse accidentalmente y ralentizar al equipo! Hay un equilibrio ahí... en algún lugar. Vamos a explorar algunos de los problemas y posibles soluciones creativas.

Caminando en la línea entre la flexibilidad y la consistencia en las bibliotecas de componentes

This Talk discusses the comparison between Polaris and Material UI component libraries in terms of consistency and flexibility. It highlights the use of the action list pattern and the customization options available for the action list component. The Talk also emphasizes the introduction of a composite component to improve API flexibility. Additionally, it mentions the importance of finding the right balance between flexibility and consistency and the use of types to enforce specific child components.

Design systems aim to bring consistency to a brand's design and make the UI development productive. Component libraries with well thought API can make this a breeze. But, sometimes an API choice can accidentally overstep and slow the team down! There's a balance there... somewhere. Let's explore some of the problems and possible creative solutions.

Walking the Line Between Flexibility and Consistency in Component Libraries

Siddharth Kshetrapal

A medida que tu equipo crece y se convierte en múltiples equipos, el tamaño de tu base de código también crece. Llegas a las 100k líneas de código y el tiempo de compilación se acerca peligrosamente a los 10 minutos 😱 Pero eso no es todo, tus verificaciones estáticas de CI (linting, cobertura de tipos, código muerto) y pruebas también están tardando cada vez más...¿Cómo puedes mantener a tus equipos avanzando rápidamente y enviando funciones a los usuarios de manera regular si tus PRs tardan una eternidad en ser probados y desplegados?Después de explorar algunas opciones, decidimos seguir el camino de Nx. ¡Veamos cómo migrar una gran base de código a Nx y aprovechar sus compilaciones incrementales!

Escala tu aplicación de React sin micro-frontends

This Talk discusses scaling a React app without micro-frontend and the challenges of a growing codebase. Annex is introduced as a tool for smart rebuilds and computation caching. The importance of libraries in organizing code and promoting clean architecture is emphasized. The use of caching, NxCloud, and incremental build for optimization is explored. Updating dependencies and utilizing profiling tools are suggested for further performance improvements. Splitting the app into libraries and the benefits of a build system like NX are highlighted.

As your team grows and becomes multiple teams, the size of your codebase follows. You get to 100k lines of code and your build time dangerously approaches the 10min mark 😱 But that’s not all, your static CI checks (linting, type coverage, dead code) and tests are also taking longer and longer...How do you keep your teams moving fast and shipping features to users regularly if your PRs take forever to be tested and deployed?After exploring a few options we decided to go down the Nx route. Let’s look at how to migrate a large codebase to Nx and take advantage of its incremental builds!

Scale Your React App without Micro-frontends

Jonathan Wagner

DAZN es el servicio de transmisión de deportes de más rápido crecimiento y durante esta charla, consideraremos nuestra experiencia en la construcción de aplicaciones de TV (para ps5, xbox, LG, Samsung y otros objetivos) con arquitectura de micro frontend. Puedes esperar viajar en el tiempo para ver cómo comenzó y qué tenemos en este momento, qué hace que el desarrollo de TV sea diferente en comparación con la web, al igual que las técnicas que nos permiten compartir código entre objetivos. Aprenderás cómo probamos nuestra aplicación con un laboratorio de pruebas remoto interno, así como nuestro proceso de implementación y lanzamiento.

Aplicaciones de React Microfrontend para TVs y Consolas de Juegos

This Talk discusses the architecture journey of a sports engagement platform, transitioning from a monolith to a microfrontend architecture. The ALEP microfrontend architecture is introduced to manage the complexity of a complex catalog and enable efficient deployment and version management. The deployment and release process involves using AliB and updating metadata in the deployment dashboard. The integration to React and TV development process involves using the AliB package and having independent lifecycles for packages. Shared code is used across different targets, and testing is done in a remote virtual lab. Focus management and key moments detection in sports are also addressed.

DAZN is the fastest-growing sports streaming service and during this talk, we will consider our experience building tv applications (for ps5, xbox, LG, Samsung and other targets) with micro frontend architecture. You may expect time travel to see how it started and what we have at the moment, what makes tv development different compared to the web, same as techniques that allow us to share code between targets. You will learn how we test our application with an in-house remote testing lab as well as our deployment and release process.

React Microfrontend Applications for TVs and Game Consoles

Denis Artyuhovich

Construir un sistema de diseño no es suficiente. Tu equipo de desarrollo debe preferirlo sobre los componentes individuales y las bibliotecas de terceros. De lo contrario, todo el esfuerzo es una pérdida de tiempo. Aprende cómo utilizar el análisis de código estático para medir si tu sistema de diseño supera a la competencia interna y formas basadas en datos para mejorar tu posición.

Descubre si tu sistema de diseño es mejor que nada

Building a design system without adoption is a waste of time. Grafana UI's adoption is growing consistently over time. The factors affecting design system adoption include the source mix changing, displacement of Homebrew components by Grafana UI, and the limitations of Grafana UI's current state. Measuring adoption is important to determine the success of a design system. The analysis of code through static code analysis tools is valuable in detecting and tracking component usage.

Building a design system is not enough. Your dev team has to prefer it over one-off components and third-party libraries. Otherwise, the whole effort is a waste of time. Learn how to use static code analysis to measure if your design system wins over the internal competition and data-driven ways to improve your position.

Find Out If Your Design System Is Better Than Nothing

Arseny Smoogly

Una de las principales ventajas de la arquitectura headless o desacoplada de WordPress es que podemos mezclar infinitamente el CMS de WordPress que los creadores de contenido aman con lo último y mejor de la tecnología web. Esta presentación demostrará lo rápido que un desarrollador puede comenzar a trabajar con el desarrollo de WordPress headless utilizando el framework completo de Remix. Utilizando herramientas de código abierto como WPGraphQL y Atlas Content Modeler, puedes transformar tu sitio de WordPress en un potente CMS headless que sirve datos a través de GraphQL. Veremos cómo podemos consultar y utilizar esos datos en una aplicación de Remix, y también discutiremos cómo el enfoque del framework en los fundamentos web puede beneficiar tanto al desarrollador como a los visitantes que utilizan nuestros sitios.

Remixando WordPress: Construyendo un Sitio Headless con Remix, WPGraphQL y Fundamentos Web

In this Talk, the concept of headless WordPress and its benefits for developers are discussed. The use of front-end frameworks like Remix, Nuxt, Next, or SvelteKit to interact with WordPress through REST or GraphQL APIs is highlighted. The process of creating content models, adding data, and querying the GraphQL schema is explained. The setup of a basic Remix app with Apollo Client and the loading of data into route components using Remix are covered. The handling of dynamic routing with Remix and WordPress is also explored.

One of the largest draws of headless or decoupled WordPress architecture is that we can endlessly remix the WordPress CMS that content creators love with the latest and greatest of web technology. This presentation will demonstrate how quickly a developer can get up and running with headless WordPress development using the Remix full stack framework. Using open source tools like WPGraphQL and Atlas Content Modeler, you can transform your WordPress site into a powerful headless CMS that serves data via GraphQL. We’ll see how we can query for and use that data in a Remix app, and also discuss how the framework’s focus on web fundamentals can benefit both the developer and the visitors who use our sites.

Remixing WordPress: Building a Headless Site with Remix, WPGraphQL, and Web Fundamentals

Jeff Everhart

Cuanto más grande se vuelve una base de código, más difícil se vuelve mantenerla. Todos los procesos informales de un equipo pequeño deben ser sistematizados y respaldados con herramientas a medida que el equipo crece. Ven y aprende cómo Nx permite a los desarrolladores centrarse más en el código de la aplicación y menos en las herramientas. Construiremos un monorepo desde cero, creando una aplicación cliente y una aplicación de servidor que comparten una biblioteca de tipos de API. Aprenderemos cómo Nx utiliza ejecutores y generadores para hacer que la experiencia del desarrollador sea más consistente en todos los proyectos. Luego crearemos nuestros propios ejecutores y generadores para procesos que son únicos en nuestra organización. También exploraremos el creciente ecosistema de complementos que permiten la integración fluida de frameworks y bibliotecas.

React a gran escala con Nx

Welcome to React at Scale with NX. NX provides benefits such as faster command execution, controlled code sharing, consistent coding practices, and an accurate architecture diagram. The workshop covers various topics including workspace setup, library creation, code splitting, API integration, and testing with Storybook and Cypress. NX offers functionality such as caching, Nx console, and Nx cloud, and provides a dependency graph for visualizing project dependencies. Troubleshooting tips and workspace generator creation are also discussed.

The larger a codebase grows, the more difficult it becomes to maintain. All the informal processes of a small team need to be systematized and supported with tooling as the team grows. Come learn how Nx allows developers to focus their attention more on application code and less on tooling. We’ll build up a monorepo from scratch, creating a client app and server app that share an API type library. We’ll learn how Nx uses executors and generators to make the developer experience more consistent across projects. We’ll then make our own executors and generators for processes that are unique to our organization. We’ll also explore the growing ecosystem of plugins that allow for the smooth integration of frameworks and libraries.

React at Scale with Nx

Isaac Mann

Zack DeRose

Los desarrolladores de React nos intrigan con el llamado compilador React Forget [que se supone que inyecta useMemo y useCallback automáticamente en el código]. Sin embargo, todavía no podemos entender las mejores prácticas para useCallback, useMemo y React.memo cuando lo escribimos por nuestra cuenta. El peor escenario es si seguimos colocándolo en todas partes sin entenderlo. Como resultado, puede causar un daño notable al rendimiento de nuestra aplicación. En esta charla, en casos de uso reales, verás soluciones al problema de usar hooks de manera incorrecta o abusar de ellos.

No olvides React Memo

The Talk covers topics such as React memo compiler, use memo and use callback, building custom hooks, and the benefits of using use ref. It also explores the similarities between use memo and use ref, and the use of React Memo for preventing re-renders and optimizing expensive calculations. The speaker also shares personal information and contact details.

React developers intrigue us with the so-called React Forget compiler [that’s supposed to inject useMemo and useCallback into code automatically]. However, we still can't figure out best practices for useCallback, useMemo, and React.memo when we write it on our own. The worst scenario is if we continue to put it everywhere without understanding. As a result, it can bring noticeable harm to the performance of our application. In this talk, on real-life use cases, you will see solutions to the problem of using hooks wrong or overusing them!

Don't Forget React Memo

Khrystyna Landvytovych

Usar CSS en esta era de componentes es difícil. Se han creado muchas herramientas para ayudarnos con este problema, pero todas fallan en el único problema que las herramientas nunca pueden resolver: ¿Qué componente debería encargarse de qué estilos? En esta charla, repasaremos estrategias sobre cómo construir diseños de manera componible.

Cómo lograr la composición de diseño en React

This talk discusses achieving layout composition in React using Bedrock Layout Primitives. By componentizing CSS layout, complex layouts can be achieved and reused across different components. The talk also covers the challenges of achieving complex layouts, such as card lineups, and provides solutions for maintaining alignment and responsiveness. The BedrockLayout primitive library simplifies web layouts and offers flexibility in composing layouts.

Using CSS in this age of components is difficult. Many tools have been created to help us with this problem, but they all fall short in the one problem that tooling can never solve: Which component should be in charge of which styles? In this talk, we will go over strategies on how to build layouts in a composable way.

How to achieve layout composition in React

Travis Waith-Mair

Primero hubo LAMP, luego MEAN y JAM. Pero ahora estamos en 2022 y los tiempos han cambiado... ¿Cómo se ve el stack completo moderno? Está construido completamente con tecnologías gratuitas y de código abierto, es escalable más allá de la imaginación, puede ejecutarse en las instalaciones o en la nube, no debe generar dependencia de proveedores y, lo más importante, debe funcionar sin problemas. Hay tantas herramientas para elegir. Elegir el stack correcto desde el primer día puede marcar la diferencia entre el éxito del proyecto y un montón de cenizas de software. Usando fastify, mercurius, urql y react, podemos construir aplicaciones full-stack de alto rendimiento utilizando todas las tecnologías de JavaScript.

Full-stack JS hoy: Fastify, GraphQL y React

The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.

First there was LAMP, then there was MEAN and JAM. But now it’s 2022 and times have changed… What does the modern full stack look like? It’s built entirely from free and open source technologies, it’s scalable beyond imagination, it can run on premise or in the cloud, it should get out of the way and not lead to vendor lock-in, and most importantly it should “just work.” There are so many tools to choose from. Choosing the right stack from day one can be the difference from project success to smoldering pile of software ashes. Using fastify, mercurius, urql, and react we can build high performance full-stack applications using all javascript technologies.

Full-stack JS today: Fastify, GraphQL and React

Cody Zuschlag

Por lo general, crear aplicaciones web y móviles requiere diferentes conjuntos de tecnologías, y es bastante difícil compartir código. Esta charla mostrará cómo agregué una aplicación web de React y una aplicación móvil de React Native en el mismo monorepo utilizando Nx, y cómo optimicé el intercambio de código entre la aplicación web de React y la aplicación móvil de React Native.

Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo

This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.

Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.

How to Share Code between React Web App and React Native Mobile App in Monorepo

Emily Xiong

Es muy difícil escalar aplicaciones web modernas a millones de usuarios concurrentes. A menudo, tenemos que aprovisionar y considerar almacenes de clave/valor en memoria, motores de búsqueda, motores de análisis y bases de datos, todo ello manteniendo la trazabilidad a través de las capas. Esta charla amplía los detalles técnicos de las aplicaciones web a esta escala y ofrece una forma más sencilla de lograr el mismo efecto sin las complicaciones técnicas.

Manejo de datos a gran escala para desarrolladores de React

This Talk discusses handling data at scale for React developers, including scaling databases and the need for search. It explores different ways to fetch data in React, such as using useEffect, fetch, and setState. The Talk also introduces Suspense for data fetching and how it improves user experience. It covers controlling React Suspense, handling search, and using render-as-you-fetch. The Talk concludes with a discussion on the RFC status and fetching in event handlers.

It is very difficult to scale modern web applications to millions of concurrent users. Oftentimes, we've got to provision and consider in-memory Key/Value stores, search engines, analytics engines, and databases, all while preserving traceability through the layers. This talk expands on the technical details of web apps at this scale, and offers a simpler way to achieve the same effect without the technical hassle.

Handling Data at Scale for React Developers

Tejas Kumar

Next.js es un marco convincente que facilita muchas tareas al proporcionar muchas soluciones listas para usar. Pero tan pronto como nuestra aplicación necesita escalar, es esencial mantener un alto rendimiento sin comprometer el mantenimiento y los costos del servidor. En este masterclass, veremos cómo analizar el rendimiento de Next.js, el uso de recursos, cómo escalarlo y cómo tomar las decisiones correctas al escribir la arquitectura de la aplicación.

Masterclass de alto rendimiento Next.js

Welcome to High Performance Next.js. Next.js solves the problem of slow loading times and bad SEO performance. Client-side rendering allows for lazy loading, positive UIs, and smooth user experiences. Server-side rendering provides a cheaper option with better SEO and initial page load time. Server-side rendering has benefits such as improved SEO and the ability to create dynamic experiences. Caching is the secret to making Next.js fast, and it can be achieved through static site generation or using a CDN.

Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.

React Summit 2022

The biggest React conference worldwide