Name: React Day Berlin 2022
Start: 2022-12-02T07:00:00.000Z
End: 2022-12-05T20:00:00.000Z

Sophie Kolbe

  Neha  Seth

Rafael Piazdecki

Shivay Lamba

Manuel Bieh

Petra vos

Irina Baeva

Lera

Stefan Wille

Aleksei Podgaev

Varun

Michele Bonazza

Harshil Agrawal

Johannes Goslar

Daniel Rios Pavia

Daishi Kato

Dimitris Kiriakakis

David Pugh

Ricardo Machado

Michael Seifarth

Gido Manders

Robert

Andriy Tevelyev

Megan Wilke

Michal Przybys

Oscar Pagani

Nils BUntenbeck

Žiga Šinko

Charles

Mathieu Habegger

Lukas

Myron Davis

Mel Moe

Denis Radin

Jotai es una biblioteca de gestión de estado. La hemos estado desarrollando principalmente para React, pero conceptualmente no está vinculada a React. En esta charla, veremos cómo funcionan los átomos de Jotai y aprenderemos sobre el modelo mental que deberíamos tener. Los átomos son una abstracción agnóstica del marco para representar estados, y básicamente son solo funciones. Comprender la abstracción de átomo ayudará a diseñar e implementar estados en sus aplicaciones con Jotai

Los Átomos de Jotai Son Simplemente Funciones

State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.

Jotai is a state management library. We have been developing it primarily for React, but it's conceptually not tied to React. It this talk, we will see how Jotai atoms work and learn about the mental model we should have. Atoms are framework-agnostic abstraction to represent states, and they are basically just functions. Understanding the atom abstraction will help designing and implementing states in your applications with Jotai

Jotai Atoms Are Just Functions

Problemas de renderización condicional en JSX, forwardRef, varias formas de crear refs, render props (sí, todavía existen), componentes de orden superior (¿todavía existen?), act, clases no extensibles, SuspenseList (bueno, tal vez en 10 años), React.FC y por supuesto nuestro buen viejo amigo useEffect. Todas estas cosas raras son parte de nuestra biblioteca favorita (no un framework™) y aún así la usamos y la amamos. ¿Por qué realmente? Hablemos de eso. Descargo de responsabilidad: Esta no es una charla muy seria, principalmente … <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

Las Cosas Raras de React

React has some weird and undocumented features like using the key attribute to remount components. The new beta docs and RFCs provide valuable insights into React's thinking and allow for proposing changes. React's composition story has evolved from mixins to higher order components to hooks. The upgrade to React 18 fixed TypeScript types but introduced issues with optional children. React warnings can be helpful but also annoying, and a library called React Reduce Stress can suppress them. React strict mode helps identify issues and supports new features, but it can cause double rendering in React 18. Overall, React is an interesting journey with its flaws and learning opportunities.

Conditional rendering issues in JSX, forwardRef, serveral ways to create refs, render props (yeah they still exist), higher-order components (do they still exist?), act, non-extendable classes, SuspenseList (well, maybe in 10 years), React.FC and of course our good old friend useEffect. All these weird things are part of our favourite library (not a framework™) and yet we still use and love it. Why actually? Let's talk about. Disclaimer: This is not a very serious talk, mostly … <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The Weird Things About React

Nik Graf

Afrontémoslo: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de Frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica. En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Luchando contra la Deuda Técnica con la Refactorización Continua

This Talk discusses the importance of refactoring in software development and engineering. It introduces a framework called the three pillars of refactoring: practices, inventory, and process. The Talk emphasizes the need for clear practices, understanding of technical debt, and a well-defined process for successful refactoring. It also highlights the importance of visibility, reward, and resilience in the refactoring process. The Talk concludes by discussing the role of ownership, management, and prioritization in managing technical debt and refactoring efforts.

Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt. In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

Fighting Technical Debt With Continuous Refactoring

Alex Moldovan

Turbopack. ¿Por qué? ¿Cómo? ¿Cuándo? y la Visión...

The Talk discusses TurboPack, a successor to Webpack, aiming to create a framework-independent, flexible, and extensible tool for the open-source community. It addresses performance challenges by integrating SWC into Next.js. The challenges with Next.js and Webpack include orchestration issues, backward compatibility constraints, and cache invalidation problems. TurboEngine and TurboPack provide constant performance in incremental builds, leveraging Rust's predictable performance and parallelism. The Talk also covers topics like dependency tracking, task graphs, cache invalidation, lazy asset graphs, and the integration of TurboPack with Next.js. The future plans involve reconfiguring Webpack and TurboEngine, moving computations to the cloud, providing insights into builds, and facilitating migration and integration with JavaScript projects.

Turbopack. Why? How? When? and the Vision...

Tobias Koppers

Todo lo que hacemos, desde la forma en que escribimos nuestros correos electrónicos, hasta el método en que proporcionamos retroalimentación negativa y evaluamos el rendimiento, rige el rendimiento de nuestros equipos. Y entender cómo la cultura impacta nuestra eficacia como equipo puede mejorar drásticamente nuestra colaboración diaria. En esta sesión aprenderás: Cómo diferentes culturas se comunican, Cómo diferentes culturas evalúan el rendimiento y dan críticas constructivas, Cómo diferentes culturas toman decisiones, Cómo diferentes culturas confían, Cómo diferentes culturas perciben el tiempo.

Construyendo Equipos Multiculturales de Alto Rendimiento

The Talk discusses the importance of effective communication and collaboration in cross-cultural teams. It emphasizes the impact of culture on communication and performance evaluation. The speaker highlights the differences between low-context and high-context communication styles and the need to understand cultural nuances. It also explores the challenges of giving feedback in multicultural teams and suggests ways to improve communication and create a feedback culture. The influence of language on communication and the importance of transparency and honesty in feedback are also discussed.

Everything we do, from the way in which we write our emails, to the method in which we provide negative feedback and evaluate performance, governs the performance of our teams. And understanding how culture impacts our efficacy as a team can drastically improve our day-to-day collaboration. In this session you'll learn: How different cultures communicate, How different cultures evaluate performance and give constructive criticism, How different cultures make decisions, How different cultures trust, How different cultures perceive time.

Building High-Performing Cross-Cultural Teams

Emma Bostian

¿Sabes que podemos reemplazar los esquemas de API con una biblioteca ligera y segura en cuanto a tipos? Con tRPC puedes reemplazar fácilmente GraphQL o REST con formas inferidas sin esquemas ni generación de código. En esta charla entenderemos el beneficio de tRPC y cómo aplicarlo en una aplicación NextJs. Si quieres reducir la complejidad de tu proyecto, no puedes perderte esta charla.

Get rid of your API schemas with tRPC

Today's Talk introduces TRPC, a library that eliminates the need for code generation and provides type safety and better collaboration between front-end and back-end. TRPC is demonstrated in a Next JS application integrated with Prisma, allowing for easy implementation and interaction with the database. The library allows for seamless usage in the client, with automatic procedure renaming and the ability to call methods without generating types. TRPC's client-server interaction is based on HTTP requests and allows for easy debugging and tracing. The library also provides runtime type check and validation using Zod.

Do you know we can replace API schemas with a lightweight and type-safe library? With tRPC you can easily replace GraphQL or REST with inferred shapes without schemas or code generation. In this talk we will understand the benefit of tRPC and how apply it in a NextJs application. If you want reduce your project complexity you can't miss this talk.

Giorgio Boa

El transpilador JSX incorporado de Bun, las recargas en caliente en el servidor, el punning de propiedades JSX, la API de macros, las instalaciones automáticas de paquetes, el soporte de console.log JSX, el renderizado en el servidor 4 veces más rápido y más hacen de Bun el mejor entorno de ejecución para construir aplicaciones React

Cómo Bun hace que la construcción de aplicaciones React sea más simple y rápida

BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.

Bun’s builtin JSX transpiler, hot reloads on the server, JSX prop punning, macro api, automatic package installs, console.log JSX support, 4x faster serverside rendering and more make Bun the best runtime for building React apps

How Bun Makes Building React Apps Simpler & Faster

Jarred Sumner

Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.

Emotional & Functional UI Animations in React

Elizabet Oliveira

Ya sabemos, ""si alguna tarea lleva tiempo, ¡promisifícala!"". Pero algunas tareas pueden ser pesadas en términos de cálculo y pueden llevar tiempo para completarse, por lo que hacerlas asíncronas no tiene utilidad ya que de todos modos tienen que ser recogidas. ¿Solución? Simple, ¡multihilo! Sí, ya sé que React y, a su vez, javascript es de un solo hilo, pero ¿qué pasaría si te dijera que nuestra vida fue una mentira desde siempre? ¡Entren los trabajadores web! Puntos clave de la charla: 1. Un ejemplo de una simple búsqueda de productos mostrando por qué el js asíncrono o el modo concurrente no pueden funcionar. 2. Desmitificando a los trabajadores web. 3. ¿Cómo hacen que esta magia suceda bajo el capó? 4. La pregunta de la vida - ¿No son lo mismo que el modo concurrente? 5. Comparando la misma aplicación de lista de productos utilizando trabajadores web, profundizando en el rendimiento. 6. Cómo uno puede abusar fácilmente de los trabajadores web y cómo evitarlo.

Espera, ¿React es Multi-Hilo?

This Talk explores the use of web workers in React to improve user experience and performance. It discusses the limitations of JavaScript rendering and how web workers can offload tasks to separate threads. The Talk also highlights the benefits of using concurrent mode in React and introduces the UseWebWorkerHook library for simplifying the creation of web workers. It emphasizes the considerations when using web workers and concludes with a mention of Postman's hiring and new feature release.

We already know, ""if some task takes time, promisify it!"". But some tasks can be computation heavy and can take time to complete, so making them async is of no use since those have to be anyway get picked. Solution? Simple, multithreading! Yeah I know that React and in turn javascript is single-threaded but what if I told you that our life was a lie ever since? Enter web workers! Key takeaways of the talk: 1. An example of a simple product search showing why async js or concurrent mode cannot work. 2. Demystifying web workers. 3. How they make this magic happen under the hood? 4. The Question of life - Aren't they same as concurrent mode? 5. Comparing the same Product list app using web workers, diving deep into the performance. 6. How one can easily misuse web workers and how to avoid it.

Wait, React Is Multi-Threaded?

Nikhil Sharma

Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres? En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.

Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado

This Workshop covers various topics related to software development, including using the CodeMirror library to create custom editors, exploring CodeMirror setup and themes, adding multiple editors and custom themes, implementing linting and autocomplete features, and adding custom autocompletion in CodeMirror. It also discusses the Hydrogen and Oxygen tools for creating custom storefronts in Shopify, introduces the Polaris Viz UI library, and shares experiences and backgrounds of team members. The Workshop emphasizes the complexity of React code, the challenges and benefits of using TypeScript, and the importance of collaboration and communication with maintainers in open source projects.

Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want? In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.

Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete

Hussien Khayoon

Kahvi Patel

- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión

Next.js 13: Estrategias de Obtención de Datos

This workshop at React Day Berlin covered fetching strategies for the new App Directory, including server components, client components, and dynamic fetching. Next.js introduced powerful fetching strategies like ISR and on-demand ISR, along with other enhancements in Next 13. The workshop emphasized the importance of setting up a development environment and creating a production build for testing. It also discussed the benefits of using caching and revalidating strategies in Next.js for efficient data fetching. The workshop concluded with a focus on streaming with suspense for independent streaming of UI components and enhancing interactivity for users.

- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up

Next.js 13: Data Fetching Strategies

Alice De Mauro

Combinando lo mejor de dos marcos de trabajo multiplataforma para construir la experiencia de desarrollo multiplataforma definitiva.

Herramienta Multiplataforma de React Native Kotlin

The Talk discusses the combination of React Native and Kotlin Multiplatform for cross-platform app development. Challenges with native modules in React Native are addressed, and the potential improvements of using Kotlin Multiplatform Mobile are explored. The integration of Kotlin Multiplatform with React Native streamlines native implementation and eliminates boilerplate code. Questions about architecture and compatibility, as well as the possibility of supporting React Native Web, are discussed. The React Native toolkit works with native animations and has potential for open-source development.

Combining the best of two cross-platform frameworks to build the ultimate multiplatform development experience.

React Native Kotlin Multiplatform Toolkit

Erik Ziegler

A lo largo de los últimos años, el número de frameworks web disponibles para nosotros ha explotado. En cierto modo, la amplitud de elección es una clara victoria para nuestro ecosistema. Sin embargo, para muchos de nosotros, también viene con severas desventajas: - ¿Alguna vez has usado un componente de código abierto popular construido para el framework A, y deseaste que existiera en el framework B? ¿Qué tal una biblioteca de sistema de diseño? - ¿Tu empresa tiene frontends construidos en diferentes frameworks, y tus equipos web están frustrados por las horas perdidas necesarias para lograr un sistema de diseño consistente? - ¿Tu equipo construye SDKs para frameworks web, y debe reescribirlos manualmente para cada framework? La solución a estos 3 problemas existe hoy. Para entenderla completamente, primero debemos examinar los frameworks web de hoy, repensar cómo debería ser un componente, e introducir una nueva Representación Intermedia de nuestros componentes. Esto es lo que hemos hecho en Builder.io cuando creamos Mitosis, y estamos emocionados de compartirlo con todos.

Es hora de desfragmentar la web

Today's Talk introduces Mitosis, an open source project that solves the problem of building framework agnostic components. It supports JSX and Svelte syntax and outputs human-readable code for various web frameworks. Mitosis is already being used by enterprise customers and can be easily integrated with React, Svelte, and other frameworks. It saves time, allows for easy handling of framework version migrations, and enables efficient unit and integration testing.

Over the past few years, the number of web frameworks available to us has exploded. In some ways, the breadth of choice is a clear win for our ecosystem. However, for many of us, it also comes with harsh drawbacks: - Have you ever used a popular open-sourced component built for framework A, and wished it existed in framework B? What about a design system library? - Does your company have frontends built in different frameworks, and your web teams are frustrated about the wasted hours needed to achieve a consistent design system? - Does your team build SDKs for web frameworks, and must manually re-write them for each framework? The solution to all 3 of these problems exists today. To fully understand it, we must first examine today’s web frameworks, re-think what a component should look like, and introduce a new Intermediate Representation of our components. This is what we have done at Builder.io when we created Mitosis, and we’re excited to share it with everyone.

It's Time to De-Fragment the Web

Sami Jaber

En esta charla veremos cómo podemos conectar la aplicación React Native con el motor de juegos comúnmente utilizado Unity3d para una interacción bidireccional entre el juego y la aplicación React Native

Ejecuta Juegos Dentro de Tus Aplicaciones React Native

Today's Talk discusses integrating Unity into React Native apps for game development. Unity provides a wide range of capabilities and can be seamlessly integrated with React Native. The integration involves using the Unity View component and the Unity Message callback to enable communication between the two platforms. Native plugins are created to facilitate communication between Unity and React Native. The performance of Unity in React Native apps is comparable to regular React Native apps, and the decision to use Unity or React Native depends on the app's use case and need for advanced UI and gaming capabilities.

In this talk we will see how we can bridge React Native app with commonly used game engine Unity3d for two way interaction between the game and React Native app

Run Games Within Your React Native Apps

Vladimir Novick

Monorepos es un tema candente en la comunidad TypeScript/JavaScript en estos días, pero conseguir una configuración de monorepo de alto rendimiento desde cero puede ser un desafío. En esta charla, veremos cómo Turborepo puede ayudarte a mover tus tareas de monorepo a la velocidad de la luz.

Potenciando Tu Experiencia de Desarrollo Con Turborepo

This Talk explores the benefits of using TuberApple, a tool for supercharging the development experience. It highlights the advantages of monorepos, such as code reuse, shared standards, improved team collaboration, and atomic changes. TuberApple, specifically Tuburepo, offers efficient task execution through caching and optimized scheduling. It simplifies monorepo development by allowing parallel execution of tasks and seamless coordination of changes. Tubo, another tool within TuberApple, enables smart task execution, declaring task dependencies, and efficient caching in monorepos.

Monorepos is a hot topic in the TypeScript/JavaScript community these days, but getting a high performing monorepo setup from the ground up can be challenging. In this talk, we will see how Turborepo can help you to move your monorepo tasks at light speed.

Supercharging Your Dev Experience With Turborepo

Bruno Paulino

Nextra 2.0: Crea un sitio de documentación completo en 5 minutos

Next.js and Nextra are powerful tools for generating full-featured documentation websites with ease. Nextra offers features like dark mode, full-text search, and React code integration. Next.js provides image optimization, SSG, SSR, and other powerful features. Nextra is highly customizable and supports localization, collaboration, and API integration. The future vision includes combining documentation and live views, adding social card generation and advanced search functionality.

Nextra 2.0: Create a Full-Featured Documentation Site in 5 Minutes

Shu Ding

Hay herramientas increíbles disponibles que te brindan una excelente seguridad de tipos. Pero cuando llegas a la obtención del lado del cliente, las cosas se vuelven locas. Incluso si tienes un backend perfectamente tipado, pierdes la información de tipos durante la comunicación del lado del cliente. Sí, puedes usar GraphQL o protobuf y generar tipos, pero... ¿qué tal si te digo que hay una forma más fácil? ¡Una forma que te permite desarrollar tus aplicaciones de manera más fluida que con REST o GraphQL? ¿Cómo? ¡RPC! Saluda a la máxima productividad con una experiencia de desarrollo fantástica.

Descansa de REST (y GraphQL)

This Talk explores the evolution of RPC and its relevance in modern full stack development. It discusses the limitations of SOAP and REST and introduces GraphQL as a solution. The focus is on RPC frameworks like tRPC and BlitzRPC, which provide end-to-end type safety and improved developer experience. The Talk also highlights the advantages of RPC in the context of full stack development with frameworks like Next.js. Future improvements for RPC libraries are discussed, including enabling server APIs for multiple clients and creating a developer experience tool combining the best features of BlitzRPC and tRPC.

There are amazing tools out there providing you with excellent type safety. But when you get to the client-side fetching, things go wild. Even if you have perfectly typed backed, you lose the type information during the client-side communication. Yes, you can use GraphQL or protobuf and generate types, but... what if I told you there's an easier way? A way that lets you develop your apps smoother than with REST or GraphQL? How? RPC! Say hi to maximum productivity with fantastic developer experience.

Take a Rest From REST (And GraphQL)

Aleksandra Sikora

Cuando queremos construir una aplicación móvil "multiplataforma", la respuesta siempre es React Native, pero ¿qué pasa si quieres construir una aplicación "multiplataforma" que se ejecute en dispositivos móviles y navegadores? Aquí es donde React Native se queda corto. react-native-web intenta cerrar esta brecha hasta cierto punto, pero el requisito principal es escribir tu código en React Native, que se convierte en código web, pero esto tiene varias desventajas y la más grande es obligar a los desarrolladores de aplicaciones móviles a entender cómo funcionan los navegadores. En esta charla, compartiré cómo estamos construyendo una arquitectura verdaderamente multiplataforma sin usar react-native-web para nuestro sistema de diseño en Razorpay.

La magia de construir una arquitectura de sistema de diseño multiplataforma

This Talk discusses the development of a cross-platform design system architecture. It explores different approaches and proposes a unified API that works across web and native platforms. The Talk covers techniques for resolving files and declarations, configuring bundlers, and testing for both web and native platforms. It also highlights the bundling of TypeScript types and handling accessibility for different platforms.

When we want to build a “cross-platform mobile app” the answer always is React Native but what if you want to build a “cross-platform app” that runs across mobile and browser? Here’s where React Native falls short. react-native-web is trying to bridge this gap to some extent but the primary requirement is to write your code in React Native which gets converted to the web, but that itself has a bunch of downsides and the biggest one being - forcing mobile app developers to understand how browsers work. In this talk, I’ll share how we are building a true cross-platform architecture without using react-native-web for our design system at Razorpay.

The Sorcery of Building a Cross Platform Design System Architecture

Kamlesh Chandnani

¿Alguna vez te has preguntado cómo funciona React?¿Cómo sería crear las líneas mágicas que componen la herramienta que todos aprendimos y amamos?Acompáñanos en nuestro viaje para implementar React desde cero, haciendo que un proyecto React simple funcione con tu propia biblioteca my-react.js. Qué incluye- Introducción- Renderizando nuestro primer componente- Ciclo de actualización y el VDOM- Conoce los hooks Requisitos previos- Algunos conocimientos de React.

Construye tu propio (Simple) React desde cero!

This Workshop focuses on creating a React app from scratch and covers topics such as rendering components, handling state, and optimizing rendering. It provides step-by-step instructions and a GitHub repository with a test case and boilerplate code. The workshop also explores the use of hooks, such as useState and useEffect, for state management and handling side effects. The implementation includes a diff module to optimize rendering by identifying specific elements that require updates. Overall, the Workshop offers a comprehensive understanding of React development and provides practical examples for building a React app.

Have you ever wondered how React works?What would it feel like to create the magical lines that make up the tool we all grew to learn and love?Come along on our journey to implement React from scratch, making a simple React project work with your own my-react.js library. What's included- Introduction- Rendering our first component- Update cycle and the VDOM- Meet the hooks Prerequisites- Some knowledge of React.

Build Your Own (Simple) React From Scratch! 

Sean Blundell

Jean Duthon

Existen herramientas increíbles que te brindan una excelente seguridad de tipos. Pero cuando llegas a la obtención del lado del cliente, las cosas se vuelven salvajes. Incluso si tienes un backend perfectamente tipado, pierdes la información de tipos durante la comunicación del lado del cliente. Sí, puedes usar GraphQL o protobuf y generar tipos, pero... ¿qué tal si te digo que hay una manera más fácil? ¡Una forma que te permite desarrollar tus aplicaciones de manera más fluida que con REST o GraphQL? ¿Cómo? ¡RPC! Saluda a la máxima productividad con una experiencia de desarrollo fantástica.

Detectando estáticamente errores en aplicaciones de React con TypeScript y ESLint

This Talk explores static analysis tooling for JavaScript and TypeScript, focusing on detecting bugs with TypeScript and ESLint. The importance of type checking and extending recommended rules is emphasized. The Talk also delves into specific ESLint rules and provides code samples to demonstrate their usage. The insights provided by ESLint powered by TypeScript are highlighted. Floating promises and misused promises are discussed, along with recommendations for handling exceptions and resources. The Talk concludes by offering resources and support for further exploration and development.

Statically Detecting React App Bugs with TypeScript and ESLint

Josh Goldberg

¿Qué es un componente genérico? ¿Cómo se escriben? ¿Cuándo se utilizan?

Componentes Genéricos con TS y React

Ilya, a Staff Engineer in ArtSecurity, gives a talk on using generic components with React and TypeScript. He demonstrates how to pass generics to React components and addresses syntax limitations. Generics allow components to operate on data without a defined shape and are commonly used in form field components and component libraries.

What is a generic component? How to write them? When to use it?

Generic Components with TS and React

Illia Kibalnyi

Si tienes datos GraphQL que crees que se beneficiarían del almacenamiento en caché de CDN en el borde, en realidad es muy simple hacer que todo funcione bien. Esta charla te guiará a través de la interacción entre varias herramientas: * Automatic Persisted Queries con Apollo Link permite que las consultas utilicen GET mientras que las mutaciones aún utilizan POST * Apollo Cache Control te permite especificar información de control de caché de manera orientada a esquemas * Apollo Engine genera identificadores de consulta pequeños que puedes usar en esas solicitudes GET para limitar el tamaño de la clave de caché y establece el encabezado Cache-Control para el CDN. Luego, cuando lo juntamos todo, puedes ver esos resultados almacenados en caché en tu servicio de CDN favorito, ¡tada!

Potencia tus aplicaciones GraphQL con CDNs

This Talk discusses how to grow GraphQL apps with CDNs by exploring concepts like caching, freshness, and validation. It explains how CDNs cache content closer to end users, improving delivery speed. The use of persistent queries and cache control headers in GraphQL is explored as a solution to caching challenges. The talk also highlights the interplay between automatic persistent queries, Apollo cache control, and Apollo Engine for efficient CDN caching.

If you have some GraphQL data that you think would benefit from CDN caching at the edge, it’s actually really simple to get everything working well. This talk will walk you through the interplay between several tools: * Automatic Persisted Queries with Apollo Link lets queries use GET while mutations still use POST * Apollo Cache Control lets you specify cache control information in a fine-grained, schema oriented way * Apollo Engine generates small query IDs you can use in those GET requests to limit the cache key size, and sets the Cache-Control header for the CDN Then, when we put it all together, you can see those results getting cached in your favorite CDN service, tada!!

Power Up your GraphQL Apps with CDNs

Naz Delam

Cómo automatizar cambios de código para 100 repositorios: Introducción a los Codemods

This Talk discusses automating code changes for Android repositories, utilizing tools like JSCodeShift and Abstract Syntax Tree. The speaker shares a real use case example of maintaining a design system library and making changes to a component. The talk emphasizes the importance of automating repetitive tasks and using the power of abstract syntax tree for code changes. The Q&A session covers topics like source code formatting, TypeScript support, and cultural embedding of code mods. The talk concludes with insights on when automation is worth it and the limitations of code mods for monorepo changes.

How I Automated Code Changes for 100 Repositories: Getting Started With Codemods

Konstantin Klimashevich

Es posible que ya hayas leído sobre Jamstack. Probablemente ya hayas utilizado Next.js y recientemente hayas escuchado mucho sobre los CMS sin cabeza. Este curso rápido pondrá todas las piezas juntas y te mostrará por qué Storyblok, combinado con Next.js, es la mejor combinación para tu próximo proyecto. ¡Ven y pruébalo tú mismo! - Conocimiento profundo de Jamstack. Cómo ha cambiado desde los tiempos antiguos hasta el mundo moderno. Aprende cómo se creó Jamstack comparando los sitios estáticos y los sitios dinámicos.- Cómo Next.js sirve contenido y cómo se sirve el contenido con la generación de sitios estáticos (SSG).- Metodología de diseño atómico y cómo se aplica al sistema de gestión de contenido.- Experiencia práctica en proyectos construyendo un proyecto Jamstack con Next.js y Storyblok. Requisitos previos- <a href="https://code.visualstudio.com/">Cualquier editor de texto. Se recomienda Visual Studio Code</a>- <a href="https://nodejs.org/en/download/">Node.js LTS</a>- <a href="https://yarnpkg.com/">NPM o Yarn</a>- <a href="https://github.com/">Cuenta de GitHub</a>- <a href="https://vercel.com/">Cuenta de Vercel</a>- Familiaridad con JavaScript, React y Git. Haber trabajado con Next.js antes es una ventaja Lo que se incluye1. Introducción y descripción general del curso2. Introducción a Jamstack3. Introducción al diseño atómico4. Descripción general de los CMS sin cabeza5. Introducción a Storyblok6. Creación de una aplicación Next.js7. Creación de un espacio Storyblok8. Conexión de Next.js y Storyblok9. Creación de componentes personalizados10. Creación de la primera página11. Introducción a Visual12. Adición de páginas dinámicas13. Creación de la sección de blogs14. Implementación en Vercel

Curso intensivo sobre Jamstack con Next.js y Storyblok

This Workshop on Web Development covers topics like static and dynamic web pages, the Jamstack approach, content management systems, and the usage of Storyblock. It emphasizes the benefits of having a system, the integration of Storyblock with Next.js, and the creation of dynamic components. The Workshop also discusses configuring Storyblock, connecting it with Next.js, and deploying the application on Vercel. It concludes with a focus on the preview environment, creating blog components, and the deployment process.

You might have read already about Jamstack. You probably already used Next.js, and recently you may be hearing a lot about the headless CMSs. This quick course will put all the pieces together and show you why Storyblok, combined with Next.js, is the best combo for your next project. Stop by and try it yourself! - In-depth Jamstack knowledge. How it changed from old times to the modern world. Learn how Jamstack was created by comparing Static Sites and Dynamic Sites.- How Next.js serves content, and how content is served with Static Site Generation (SSG).- Atomic design methodology, and how this is applied to the content management system.- Hands-on project experience by building a Jamstack project with Next.js and Storyblok. Prerequisites- <a href="https://code.visualstudio.com/">Any Text . Visual Studio Code recommended</a>- <a href="https://nodejs.org/en/download/">Node.js LTS</a>- <a href="https://yarnpkg.com/">NPM or Yarn</a>- <a href="https://github.com/">GitHub account</a>- <a href="https://vercel.com/">Vercel account</a>- Familiarity with JavaScript, React, and Git. Having worked with Next.js before is a plus What's included1. Introduction and overview of the workshop2. Introduction to Jamstack3. Introduction to Atomic Design4. Overview of Headless CMS5. Introduction to Storyblok6. Next.js app creation7. Storyblok space creation8. Next.js and Storyblok connection9. Custom components creation10.First-page creation11. Introduction to Visual 12. Dynamic pages addition13. Blog section creation14. Deployment on Vercel

Crash Course into the Jamstack with Next.js & Storyblok

Arisa Fukuzaki

Chakit Arora

¿Eres un desarrollador de React que intenta obtener los mayores beneficios de TypeScript? Entonces este es el masterclass para ti. En este masterclass interactivo, comenzaremos desde lo básico y examinaremos los pros y los contras de las diferentes formas en que puedes declarar componentes de React utilizando TypeScript. Después de eso, nos moveremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guards y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapeo de tipos. Y comenzaremos a programar en el sistema de tipos de TypeScript utilizando tipos condicionales e inferencia de tipos.

Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React

This workshop covers various TypeScript and React-related topics, including TypeScript compilation and type checking, prop definitions, data validation, and type inference. It explores the use of generics, type mappings, and read-only types to ensure type safety. The workshop also highlights the importance of validating data at the boundary of the application and handling undefined values. It concludes with gratitude for attending and encourages further exploration of TypeScript and React.

Are you a React developer trying to get the most benefits from TypeScript? Then this is the workshop for you. In this interactive workshop, we will start at the basics and examine the pros and cons of different ways you can declare React components using TypeScript. After that we will move to more advanced concepts where we will go beyond the strict setting of TypeScript. You will learn when to use types like any, unknown and never. We will explore the use of type predicates, guards and exhaustive checking. You will learn about the built-in mapped types as well as how to create your own new type map utilities. And we will start programming in the TypeScript type system using conditional types and type inferring.

Best Practices and Advanced TypeScript Tips for React Developers

Maurice de Beijer

¿Alguna vez has deseado tener un enfoque flexible para localizar tu contenido y escalar fácilmente? Únete a mi charla y te mostraré múltiples estrategias para traducir y localizar tu contenido con Remix. Compartiré contigo opciones flexibles de rutas dinámicas desde Remix para generar contenido localizado de manera práctica, incluyendo una demostración de enfoque sin cabeza y cómo escalar tu solución en el futuro. ¡Vamos a "Remix" para localizar tu contenido!

¡Vamos a Remix para Localizar el Contenido!

This Talk explores Remix and internationalization, discussing the impact and logic of internationalization and the challenges developers face. It highlights the global usage of the internet and the importance of localizing content. The fundamental logic of internationalization is explained, including location-based, header-based, and URL-based approaches. The implementation of internationalization in Remix is demonstrated using Remix IAT Next package and a Content Management System. The Talk also covers client-side and server-side configuration, importing and wrapping translation files, and implementing dynamic routes with Remix.

Have you ever wished to have a flexible approach to localize your content to scale easily? Join my talk, and I'll show you multiple strategies to translate and localize your content with Remix. I'll share with you flexible dynamic route options from Remix to generate localized content in a practical way, including a headless approach demo and how to scale your solution in the future. Let’s “Remix” to localize your content!

Let’s Remix to Localize Content!

React Flow es una biblioteca de código abierto utilizada por miles de desarrolladores y cientos de empresas. ¿Cómo nos aseguramos de que se mantenga viva y también sea gratuita? Compartiré algunas ideas a lo largo de nuestro viaje desde la liberación de React Flow como código abierto hasta alcanzar el "cero negro", incluyendo los hallazgos de nuestra investigación de usuarios donde hablamos con algunas de las personas que nos apoyan cada mes.

Haciendo que una biblioteca de código abierto sea financieramente sostenible

The Talk discusses how an open source library, ReactFlow, was made financially sustainable. Various methods were tried, including Github sponsoring and cross financing, but a price tag was eventually added to the library. Building trust and clear expectations through ongoing support and communication with subscribers was key to gaining financial support. The issue of people not knowing how much to contribute was addressed by providing a clear pricing structure. Additional features like one-on-one support and Pro examples were added to combat the paradox of choice and encourage financial support.

React Flow is an open source library used by thousands of developers and hundreds of companies. How do we make sure it stays alive, and also free? I’ll share some insights along our journey from open sourcing React Flow to passing the “black zero,” including findings from our user research where we spoke to some of the people who support us every month.

Making an Open Source Library Financially Sustainable

John Robb

React Testing Library es un gran marco de trabajo para pruebas de componentes de React porque responde a muchas preguntas por ti, por lo que no tienes que preocuparte por esas preguntas. Pero eso no significa que las pruebas sean fáciles. Aún hay muchas preguntas que debes resolver por ti mismo: ¿Cuántas pruebas de componentes debes escribir en comparación con pruebas de extremo a extremo o pruebas de unidad de nivel inferior? ¿Cómo puedes probar una línea de código específica que es difícil de probar? ¿Y qué diablos debes hacer con esa advertencia persistente de act()? En este masterclass de tres horas, presentaremos React Testing Library junto con un modelo mental sobre cómo pensar en el diseño de tus pruebas de componentes. Este modelo mental te ayudará a ver cómo probar cada parte de la lógica, si debes o no simular dependencias, y mejorará el diseño de tus componentes. Saldrás con las herramientas, técnicas y principios que necesitas para implementar pruebas de componentes de bajo costo y alto valor. Prerrequisitos:- Familiaridad con la construcción de aplicaciones con React- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro marco de pruebas unitarias- No necesitas experiencia previa con React Testing Library- Configuración de la máquina: Node LTS, Yarn

Diseño de Pruebas Efectivas con React Testing Library

This workshop on designing effective tests with React Testing Library covers topics such as testing the contract and rendered UI, using the Screen API for text assertions, testing environment and accessibility, the benefits of test-driven development, choosing the right query method, confirming presence and absence of elements, testing external functions and mock functions, organizing tests and testing effects, mocking web service requests, testing asynchronous code, and testing the contract and conclusion.

React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning? In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests. Prerequisites:- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn

Designing Effective Tests with React Testing Library

Josh Justice

¿Has construido aplicaciones con frameworks frontend antes? - Entonces seguramente te has encontrado con los términos "declarativo" y "reactivo". Desde que React fue lanzado en 2013, la mayoría de los frameworks o bibliotecas de UI modernos quieren ser como él, pero ¿qué significan realmente estos términos? ¿Y cuál es la diferencia entre el código "declarativo" e "imperativo"? Me llevó mucho tiempo comprender estos conceptos, pero cuando finalmente lo hice, vi los frameworks frontend de una manera totalmente nueva. Y espero que sientas lo mismo después de esta charla. En este taller muy interactivo, profundizaremos en muchos ejemplos de código para comprender profundamente los términos, con ejemplos utilizando JavaScript puro, React y Svelte. Pero los conocimientos serán universales. Después de esta charla, podrás unirte con confianza a discusiones sobre la naturaleza "declarativa" y "reactiva" de cualquier nuevo paquete o biblioteca.

¿Qué demonios significan "declarativo" y "reactivo" en realidad?

This workshop explores the concepts of declarativeness and reactiveness in front-end frameworks like React and Svelte. It discusses the challenges of working with the imperative approach and the benefits of moving to a declarative approach. The workshop also covers the implementation of derived values and conditional logic in both React and Svelte. It concludes with a discussion on Flutter and the advantages of declarative and reactive code in modern UI frameworks.

You’ve built apps with frontend frameworks before? - Then you surely came across the terms ""declarative"" and “reactive”. Since React got released in 2013, most modern UI frameworks or libraries want to be it, but what do these terms actually mean? And what’s the difference between “declarative” and “imperative” code? It took me a long time to grasp these concepts - but when I finally did, I saw frontend frameworks in a totally new light! And I hope you will feel the same after this talk. In this very interactive workshop, we’ll delve into a lot of code examples to deeply understand the terms - with examples using vanilla JavaScript, React and Svelte. But the learnings will be universal. After this talk you’ll be able to confidently join discussions about the ""declarative"" and ""reactive"" nature of any new package or library.

What the Heck Do "Declarative" and "Reactive" Actually Mean?

Andre Kovac

Las herramientas de construcción emergentes como Bun, ESBuild, SWC y Rome transformarán la forma en que trabajamos con React en el futuro. Veamos su estado actual, lo que se necesita para adoptarlas y predigamos cómo evolucionará el panorama.

El Estado de las Herramientas de React

The Talk discusses over 20 JavaScript tools commonly used by developers, including transpilers and bundlers. It highlights the pros and cons of various tools such as Sucrase, Babel, SWC, and ESBuild. The importance of TypeScript, linters like eslint, and the emergence of new tools like Rome are also mentioned. The Talk delves into the future of JavaScript, the challenges of bundling UI libraries, and the corporate era of JavaScript libraries with the backing of companies.

Emerging build tools such as Bun, ESBuild, SWC and Rome will transform how we work with React in the future. Let's take a look at their current state, look at what's needed to adopt them and predict how the landscape will evolve.

React Day Berlin 2022

Build apps, not walls