Name: React Summit 2023
Start: 2023-06-02T07:00:00.000Z
End: 2023-06-06T19:00:00.000Z

La autenticación sin contraseña puede parecer compleja, pero es simple de agregar a cualquier aplicación utilizando la herramienta adecuada. Hay múltiples alternativas que son mucho mejores que las contraseñas para identificar y autenticar a tus usuarios, incluyendo SSO, SAML, OAuth, Magic Links, One-Time Passwords y Authenticator Apps. Mientras abordamos los aspectos de seguridad y evitamos errores comunes, mejoraremos una aplicación JS de pila completa (backend Node.js + frontend React) para autenticar a los usuarios con OAuth (inicio de sesión social) y One Time Passwords (correo electrónico), incluyendo:- Autenticación de usuarios - Gestión de interacciones de usuarios, devolviendo JWTs de sesión / actualización- Gestión y validación de sesiones - Almacenamiento seguro de la sesión para solicitudes de cliente posteriores, validación / actualización de sesiones- Autorización básica - extracción y validación de reclamaciones del token JWT de sesión y manejo de autorización en flujos del backend Al final del masterclass, también exploraremos otros enfoques de implementación de autenticación con Descope, utilizando SDKs de frontend o backend.

De 0 a Autenticación en una hora con ReactJS

This is a React Node.js workshop that covers implementing Dscope authentication in a React project. It explains how to set up a Dscope account and customize authentication flows using the Dscope console. The workshop also covers using React Hooks and the Dscope provider, adding dynamic login and logout functionality, protecting data with session tokens, and validating sessions with Node.js middleware. Additionally, it demonstrates how to customize authentication flows in the Dscope console.

Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps. While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.

0 to Auth in an hour with ReactJS

Kevin Gao

El contenido localizado te ayuda a conectarte con tu audiencia en su idioma preferido. No solo te ayuda a hacer crecer tu negocio, sino que también ayuda a tu audiencia a comprender mejor tus ofertas. En este masterclass, obtendrás una introducción a la localización y aprenderás cómo implementar la localización en tu sitio web de Remix alimentado por Contentful. Tabla de contenidos:- Introducción a la localización- Introducción a Contentful- Localización en Contentful- Introducción a Remix- Configuración de un nuevo proyecto de Remix- Renderización de contenido en el sitio web- Implementación de la localización en el sitio web de Remix- Recapitulación- Próximos pasos

Localizando tu sitio web de Remix

The Workshop covered various topics such as introduction to localization and Remix, project setup, creating components, implementing content and internationalization, differences between Remix and Next.js, configuring internationalization, updating titles and navigation, introduction to Contentful, content model and localization, and dynamic routing. Key points include the importance of localization for target regions, the capabilities of Remix as a framework, the process of setting up a Remix project and configuring internationalization, the use of Contentful for managing content, and the implementation of dynamic routing in Remix.

Localized content helps you connect with your audience in their preferred language. It not only helps you grow your business but helps your audience understand your offerings better. In this workshop, you will get an introduction to localization and will learn how to implement localization to your Contentful-powered Remix website. Table of contents:- Introduction to Localization- Introduction to Contentful- Localization in Contentful- Introduction to Remix- Setting up a new Remix project- Rendering content on the website- Implementing Localization in Remix Website- Recap- Next Steps

Localizing Your Remix Website

Harshil Agrawal

Vamos a utilizar Nx y algunos de sus plugins para acelerar el desarrollo de esta aplicación. Algunas de las cosas que aprenderás:- Generar un espacio de trabajo Nx prístino- Generar aplicaciones frontend React y APIs backend dentro de tu espacio de trabajo, con proxies preconfigurados- Crear librerías compartidas para reutilizar código- Generar nuevos componentes enrutados con todas las rutas preconfiguradas por Nx y listas para usar- Cómo organizar el código en un monorepositorio- Mover fácilmente las librerías alrededor de tu estructura de carpetas- Crear historias de Storybook y pruebas e2e de Cypress para tus componentes Tabla de contenidos: - Lab 1 - Generar un espacio de trabajo vacío- Lab 2 - Generar una aplicación React- Lab 3 - Ejecutores- Lab 3.1 - Migraciones- Lab 4 - Generar una librería de componentes- Lab 5 - Generar una librería de utilidades- Lab 6 - Generar una librería de rutas- Lab 7 - Añadir una API de Express- Lab 8 - Mostrar un juego completo en el componente de detalle de juego enrutado- Lab 9 - Generar una librería de tipos que la API y el frontend pueden compartir- Lab 10 - Generar historias de Storybook para el componente de interfaz de usuario compartido- Lab 11 - Prueba E2E del componente compartido

React a Escala con Nx

We discuss developing at scale with NxMonoRepos, which provide the benefits of a monorepo without the drawbacks of code collocation. Nx helps with code consistency and automation through plugins and generators. The workshop covers folder structure, workspace creation, using plugins, updating files, using executors, libraries and migrations, running generators and migration scripts, connecting APIs, creating type libraries, and using generators for Storybook configuration. It also covers configuring Storybook, enforcing module boundaries, setting up CI, using workspaces, and the trade-offs of libraries and applications.

We're going to be using Nx and some its plugins to accelerate the development of this app. Some of the things you'll learn:- Generating a pristine Nx workspace- Generating frontend React apps and backend APIs inside your workspace, with pre-configured proxies- Creating shared libs for re-using code- Generating new routed components with all the routes pre-configured by Nx and ready to go- How to organize code in a monorepo- Easily move libs around your folder structure- Creating Storybook stories and e2e Cypress tests for your components Table of contents: - Lab 1 - Generate an empty workspace- Lab 2 - Generate a React app- Lab 3 - Executors- Lab 3.1 - Migrations- Lab 4 - Generate a component lib- Lab 5 - Generate a utility lib- Lab 6 - Generate a route lib- Lab 7 - Add an Express API- Lab 8 - Displaying a full game in the routed game-detail component- Lab 9 - Generate a type lib that the API and frontend can share- Lab 10 - Generate Storybook stories for the shared ui component- Lab 11 - E2E test the shared component

React at Scale with Nx

Isaac Mann

- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados

Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico

React Bricks is a CMS with visual editing based on React components that allows for visually editable content blocks called Brics. It offers flexibility for various media types and supports features like side edit props, validation, and collaboration. React Bricks also provides advanced features like data bindings, custom page types, and the ability to consume external data. It is compatible with any framework, offers enterprise-level features, and has future developments in progress.

- React Bricks: why we built it, what it is and how it works- Create a free account- Create a new project with Next.js and Tailwind- Explore the directory structure- Anatomy of a Brick- Create a new Brick (Text-Image)- Add a title and description with RichText visual editing- Add an Image with visual editing- Add Sidebar controls to edit props (padding and image side)- Nesting Bricks using the Repeater component- Create an Image gallery brick- Publish on Netlify or Vercel- Page Types and Custom fields- Access Page meta values- Internationalization- How to reuse content across pages: Stories and Embeds- How to create an E-commerce with Products’ data from an external database and landing pages created visually in React Bricks- Advanced enterprise features: flexible permissions, locked structure, custom visual components

Create a Visually Editable Next.js Website Using React Bricks, With Blog and E-commerce

Matteo Frana

En este curso intensivo, crearemos un nuevo proyecto en el CMS sin cabeza, crearemos el modelo de contenido y los datos utilizando la CLI de Kontent.ai. Luego, utilizaremos el contenido para construir un sitio web de Astro que incluya componentes front-end y resolución de texto enriquecido utilizando Portable Text. Este será un taller práctico, necesitarás VS Code, Git, NPM y conocimientos básicos de JavaScript. No te preocupes, explicaré todos los pasos a medida que avancemos en el taller y podrás hacer preguntas directamente.

Curso Intensivo de Astro, Kontent.ai y Portable Text

Today's workshop covers the basics of various topics, with a focus on Rich Text Resolution in Headless CMS. Participants will learn how to import content, create pages and components, generate TypeScript models, and resolve rich text. The workshop also discusses portable text and its benefits. The use of Astro as a front-end framework is highlighted, along with its compatibility with React, Vue.js, and vanilla JavaScript. Participants will also learn about working with environments, fetching data, and adding custom components in Astro.

During this crash course, we’ll create a new project in the headless CMS, create the content model and data using the Kontent.ai CLI. Then, we’ll use the content to build an Astro website including front-end components and rich text resolution using Portable Text. This will be hands-on workshop, you’ll need VS Code, Git, NPM and basic knowledge of JavaScript. Don’t worry, I will explain all the steps as we advance through the workshop and you will be able to directly ask any questions.

Crash Course Into Astro, Kontent.ai and Portable Text

Ondrej Polesny

Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo. Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación. En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.

Despliegue de aplicaciones React Native en la nube

Welcome to the Workshop on AppFlow and Setup! This workshop covers the setup and prerequisites for AppFlow, including debug builds, native cloud builds, and app store deployment. It also explains how to connect your app to AppFlow, initiate builds, and manage build stacks and test devices. The workshop covers code signing for iOS and Android, generating signing certificates and upload keys, and deploying apps to the App Store and Google Play. It also provides insights into app testing, releases, and submission processes, as well as resources for further information and support.

Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team. Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app. In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.

Deploying React Native Apps in the Cloud

Cecelia Martinez

Aprende cómo utilizar el ecosistema completo de MUI para construir un tablero de gestión de proyectos hermoso y sofisticado en una fracción del tiempo que tomaría construirlo desde cero. En particular, veremos cómo integrar la Rejilla de Datos de MUI X con Joy UI, nuestra biblioteca de componentes más nueva y hermana del estándar de la industria Material UI. Tabla de contenidos:- Presentando nuestro proyecto y herramientas- Configuración de la aplicación e instalación del paquete- Construcción del tablero- Prototipado, estilos y temas - Características de Joy UI- Filtrado, ordenación, edición - Características de la Rejilla de Datos- Conclusión, pensamientos finales, P&amp;R

Construye un Tablero Rico en Datos y Hermoso con la Rejilla de Datos de MUI X y Joy UI

Today's Workshop focused on building a CRUD app using the MUI X data grid and Joy UI. Material UI is still popular and will continue to be developed, with efforts to implement Material Design version 3. The workshop covered various topics such as adding columns, filtering data, replacing slots with Joy UI components, creating an autocomplete column, customizing appearance and styling, saving and updating data, and handling errors. The workshop concluded with plans for future features and a call to connect with attendees for further assistance.

Learn how to put MUI’s complete ecosystem to use to build a beautiful and sophisticated project management dashboard in a fraction of the time that it would take to construct it from scratch. In particular, we’ll see how to integrate the MUI X Data Grid with Joy UI, our newest component library and sibling to the industry-standard Material UI. Table of contents:- Introducing our project and tools- App setup and package installation- Constructing the dashboard- Prototyping, styling, and themes - Joy UI features- Filtering, sorting, editing - Data Grid features- Conclusion, final thoughts, Q&amp;A

Build a Data-Rich Beautiful Dashboard With MUI X's Data Grid and Joy UI

Sam Sycamore

Siriwat (Jun) Kunaporn

Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos. En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel. Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.

Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io

This workshop covers building blazing fast websites with Next.js and Sanity. It explores the benefits of headless architecture and CMS tools like Sanity. The workshop guides participants through setting up the repo, working with Sanity and Next.js, and deploying to production on Vercel. Content modeling in headless CMS and schema creation in Sanity are explained. The workshop also covers using Grok to query content, connecting content with Next.js, and deploying to production with Vercel.

Join us for a hands-on workshop where we'll show you how to level up your React skills to build a high-performance headless website using Next.js, Sanity, and the JAMstack architecture. No prior knowledge of Next.js or Sanity is required, making this workshop ideal for anyone familiar with React who wants to learn more about building dynamic, responsive websites. In this workshop, we'll explore how Next.js, a React-based framework, can be used to build a static website with server-side rendering and dynamic routing. You'll learn how to use Sanity as a headless CMS to manage your website’s content, create custom page templates with Next.js, use APIs to integrate with the CMS, and deploy your website to production with Vercel. By the end of this workshop, you will have a solid understanding of how Next.js and Sanity.io can be used together to create a high-performance, scalable, and flexible website.

Building Blazing-Fast Websites with Next.js and Sanity.io

Nancy Du

Nataliya Ioffe

Únete a nosotros para un masterclass de 3 horas que explora el mundo del desarrollo creativo de React utilizando Codux. Los participantes explorarán cómo un enfoque visual puede desbloquear la creatividad, agilizar los flujos de trabajo y mejorar la velocidad de desarrollo. Sumérgete en las características que hacen de Codux un cambio de juego para los desarrolladores de React. La sesión incluirá ejercicios prácticos que demuestran el poder de la renderización en tiempo real, la manipulación visual del código y el aislamiento de componentes, todo en tu código fuente. Tabla de contenidos:- Descarga e instalación: Preparando Codux para el masterclass- Selector de proyectos: Clonación e instalación de un proyecto de demostración- Introducción a los conceptos principales de Codux y su interfaz de usuario- Ejercicio 1: Encontrando nuestro camino- Descanso- Ejercicio 2: Realizando cambios de manera efectiva- Ejercicio 3: Reutilización y validación de casos especiales- Resumen, Cierre y Preguntas y Respuestas

De la Idea a la Producción: Desarrollo de React con un Toque Visual

Wix has a cool team working on developer toolings, with main products being Stylable and CodeX. CodeX is a visual IDE for React that helps with code understanding, changing, and validation. It supports CSS, CSS modules, Sass, Sass models, and Styleable for styling. Codex allows for easy navigation, editing, and rendering of components, and can connect to external data sources. It can be installed by downloading from codex.com and requires a Wix account.

Join us for a 3-hour workshop that dives into the world of creative React development using Codux. Participants will explore how a visually-driven approach can unlock creativity, streamline workflows, and enhance their development velocity. Dive into the features that make Codux a game-changer for React developers. The session will include hands-on exercises that demonstrate the power of real-time rendering, visual code manipulation, and component isolation all in your source code. Table of the contents: - Download &amp; Setup: Getting Codux Ready for the Workshop- Project Picker: Cloning and Installing a Demo Project- Introduction to Codux Core Concepts and Its UI- Exercise 1: Finding our Feet- Break- Exercise 2: Making Changes While Staying Effective- Exercise 3: Reusability and Edge Case Validation- Summary, Wrap-Up, and Q&amp;A

From Idea to Production: React Development with a Visual Twist

Omer Kenet

Todo lo viejo es nuevo otra vez. ¡Pero esta vez es diferente, promesa!

Reactividad: De ida y vuelta

The Talk discusses the cyclical nature of technology evolution, with examples from civil engineering and software development. It explores the shift from serverless to client-side frameworks and the recent move back towards server-side processing. The evolution of technologies and states is examined, highlighting the progression from mutability to immutability and the introduction of observable immutability. The future and next generation of reactivity are also explored, with a focus on the blurring boundary between server and client and the importance of embracing uncertainty and avoiding dogma.

Everything old is new again. But this time it's different, promise!

Reactivity: There and Back Again

Michel Weststrate

¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.

Acelerando tu aplicación React con menos JavaScript

Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.

Too much JavaScript is getting you down? New frameworks promising no JavaScript look interesting, but you have an existing React application to maintain. What if Qwik React is your answer for faster applications startup and better user experience? Qwik React allows you to easily turn your React application into a collection of islands, which can be SSRed and delayed hydrated, and in some instances, hydration skipped altogether. And all of this in an incremental way without a rewrite.

Speeding Up Your React App With Less JavaScript

Miško Hevery

GitHub Copilot es un programador en pareja de IA que puede ayudarte a escribir código más rápido y pasar menos tiempo escribiendo código repetitivo. Esta sesión cubrirá algunos casos de uso interesantes para Copilot que podrían revelar sus posibilidades. Esto va desde pedirle a Copilot que sugiera una función basada en un comentario, aprender a usar un nuevo marco de trabajo, abordar un error de seguridad o accesibilidad, documentar mejor tu código, traducir código de un lenguaje a otro, etc.Agenda: Introducción a Copilot - ¿Qué es Copilot? - Cómo puedes usarlo - Cómo puede ayudarte a escribir código más rápido - Características experimentales de Copilot LabsTomaré ejemplos del ecosistema de React y mostraré cómo podemos solucionar vulnerabilidades de seguridad y problemas de accesibilidad en algunos componentes.

Mejorando la Felicidad del Desarrollador con IA

GitHub Copilot is an auto-completion tool that provides suggestions based on context. Research has shown that developers using Copilot feel less frustrated, spend less time searching externally, and experience less mental effort on repetitive tasks. Copilot can generate code for various tasks, including adding modals, testing, and refactoring. It is a useful tool for improving productivity and saving time, especially for junior developers and those working in unfamiliar domains. Security concerns have been addressed with optional data sharing and different versions for individuals and businesses.

GitHub Copilot is an AI pair programmer that can help you write code faster and spend less time writing repetitive code.This session will cover some interesting use cases for Copilot that could shine a light on its possibilities. This ranges from prompting Copilot to suggest a function based on a comment, learning how to use a new framework, tackling a security or accessibility bug, better documenting your code, translating  code from one language to another, etc.Agenda: Introduction to CoPilot - What is Copilot - How can you use it - How it can help you write code faster - Copilot Labs experimental features I will pick examples from the React ecosystem and show how we can fix Security Vulnerabilities and Accessibility issues in some components.

Improving Developer Happiness with AI

Senna Parsa

Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.

Depuración de JS

Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.

As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Debugging JS

Mark Erikson

Después de pasar más de una década en Google, y ahora como el CTO de Vercel, Malte Ubl no es ajeno a ser responsable de la infraestructura de software de un equipo. Sin embargo, estar a cargo de definir cómo las personas escriben software, y a su vez, construir la infraestructura que están utilizando para escribir dicho software, presenta desafíos significativos. Esta presentación de Malte Ubl revelará los principios guía para liderar una gran infraestructura de software.

Principios para Escalar el Desarrollo de Aplicaciones Frontend

This Talk discusses scaling front-end applications through principles such as tearing down barriers, sharing code in a monorepo, and making it easy to delete code. It also emphasizes incremental migration, embracing lack of knowledge, and eliminating systematic complexity. The Talk highlights the use of automation in code migration and the importance of removing barriers to enable smoother code migration.

After spending over a decade at Google, and now as the CTO of Vercel, Malte Ubl is no stranger to being responsible for a team’s software infrastructure. However, being in charge of defining how people write software, and in turn, building the infrastructure that they’re using to write said software, presents significant challenges. This presentation by Malte Ubl will uncover the guiding principles to leading a large software infrastructure.

Principles for Scaling Frontend Application Development

Malte Ubl

La charla será una historia de cómo Personio pasó de renderizar a través de una arquitectura PHP monolítica, a una aplicación Next JS orientada a microfrontends, impulsada por la Federación de Módulos y la cadena de herramientas del monorepositorio NX.

Microfrontends Federados a Gran Escala

This Talk discusses the transition from a PHP monolith to a federated micro-frontend setup at Personio. They implemented orchestration and federation using Next.js as a module host and router. The use of federated modules and the integration library allowed for a single runtime while building and deploying independently. The Talk also highlights the importance of early adopters and the challenges of building an internal open source system.

The talk will be a story of how Personio went from rendering through a Monolithical PHP architecture, to a microfrontend oriented Next JS app, powered by Module Federation and the NX monorepo toolchain.

Federated Microfrontends at Scale

Daniel Bolivar

¡React 18! ¡Funciones concurrentes! Tal vez ya hayas probado las nuevas APIs como useTransition, o tal vez solo hayas oído hablar de ellas. Pero, ¿sabes cómo React 18 logra las mejoras de rendimiento que trae consigo? En esta charla, echemos un vistazo bajo el capó de las características de rendimiento de React 18: - Cómo React 18 reduce el tiempo que tu página permanece congelada (también conocido como TBT) - Qué sucede exactamente en el hilo principal cuando ejecutas useTransition() - Cuál es la trampa con las mejoras (¡no hay torta gratis!), y por qué Vue.js y Preact se negaron rotundamente a lanzar algo similar

Concurrencia en React, Explicada

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

React 18! Concurrent features! You might’ve already tried the new APIs like useTransition, or you might’ve just heard of them. But do you know how React 18 achieves the performance wins it brings with itself? In this talk, let’s peek under the hood of React 18’s performance features: - How React 18 lowers the time your page stays frozen (aka TBT) - What exactly happens in the main thread when you run useTransition() - What’s the catch with the improvements (there’s no free cake!), and why Vue.js and Preact straight refused to ship anything similar

React Concurrency, Explained

Ivan Akulov

En esta charla, Siddharth comparte los desafíos que su equipo enfrentó al optimizar el css en js en tiempo de ejecución (styled-components) para mejorar el rendimiento. En GitHub, hay alrededor de 4000 componentes de React que contienen estilos, Siddharth profundiza en las razones para repensar la arquitectura de estilos, los desafíos enfrentados y las lecciones aprendidas al migrar una gran aplicación.

Pasando de Css-In-Js en tiempo de ejecución a gran escala

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

In this talk, Siddharth shares the challenges his team faced with optimising runtime css in js (styled-components) for performance. At GitHub, there are about 4000 React components that contain styles, Siddharth dives into the reasons for rethinking styling architecture, the challenges faced and lessons learned by migrating a big application.

Moving on From Runtime Css-In-Js at Scale

Siddharth Kshetrapal

Es la regla número uno de los hooks: “Solo llama a los hooks en el nivel superior”. Pero, ¿qué pasaría si te dijera que esta regla no se aplica a todos los hooks? Uno de ellos puede ser usado condicionalmente de manera segura. Para entender cómo useContext es diferente de otros hooks, y por qué está exento de esta regla principal, necesitamos saber por qué existe esta regla en primer lugar. Construiremos nuestro propio modelo mental del comportamiento de renderizado de react, centrado en cómo react mantiene un seguimiento de los datos en tiempo de ejecución: props, estados, refs... y valores de contexto.

No puedes usar Hooks condicionalmente... ¿o sí puedes?

The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.

It’s the hooks rule number one: “Only call hooks at the top level”.But what if I told you that this rule does not apply to every hook? One of them can actually safely be used conditionally. To understand how useContext is different from other hooks, and why it is exempted from this major rule, we need to know why this rule exists in the first place. We will build our own mental model of react’s rendering behavior, focused on how react keeps track of data at runtime: props, states, refs… and context values.

You Can’t Use Hooks Conditionally… or Can You?

Charlotte Isambert

Se puede decir que muchos sitios web y aplicaciones en la actualidad dependen en gran medida de las imágenes: imágenes de productos, avatares, compartición en redes sociales. Con los avances tecnológicos continuos, la variedad de tamaños de dispositivos que necesitas soportar sigue creciendo. ¿Cómo podemos hacer que la misma página se vea genial y tenga un rendimiento óptimo tanto en un MacBook Pro de 16'' con pantalla retina como en un pequeño teléfono Android de 5 años? Veremos algunos de los enfoques modernos para abordar este problema en web y nativo, así como lo que sucede si no lo haces.

Optimización de imágenes en web y nativo

This Talk focuses on optimizing images for mobile and web. It emphasizes the importance of image dimensions in optimizing images and shares a story about crashes encountered in a mobile app due to heavy image content. The Talk discusses image rendering and sizing, using dimensions and pixel density, optimizing images for different devices and screen sizes, and the importance of image size and format optimization. It recommends tools like Cloudinary for image optimization.

It's safe to say that a lot of websites and apps these days are heavily reliant on images: product images, avatars, social sharing. With continued technological advances, the variety of device sizes you need to support keeps growing. How exactly are we to make the same page look great and feel performant on both a 16'' MacBook Pro with a retina display as well as a small 5 year old Android phone? We will look at some of the modern approaches to tackle just this problem on web and native - as well as what happens if you don't.

Optimising Images in Web and Native

Kadi Kraman

¿Son accesibles tus sitios web para todos los usuarios? ¿Todos los usuarios pueden interactuar con tu aplicación como se pretende independientemente de sus discapacidades? La accesibilidad a menudo sigue siendo una idea secundaria incluso en la actualidad, y estoy aquí para compartir cómo podemos cambiar eso. En esta charla, exploraremos las mejores prácticas para diseñar y construir interacciones de usuario para sitios web que sean accesibles y fáciles de usar para nuestros usuarios. Utilizando HTML semántico y atributos ARIA, cubriremos estrategias de interacción desde un simple botón, hasta la navegación, los diferentes elementos de formulario y componentes personalizados.

Haciendo las interacciones accesibles para todos los usuarios

Today's Talk explores making web interactions accessible to all users. It emphasizes the importance of accessibility and the various ways users interact with the web. The Talk covers common accessibility issues with buttons, links, forms, and dynamic information. It also discusses the use of ARIA labels, error handling, and models. The importance of convincing upper management for accessibility and the limitations of automated testing are highlighted. The Talk concludes with recommendations for screen readers and considerations for icon buttons.

Are your websites accessible to all users? Are all the users able to interact with your application as intended regardless of their disabilities? Accessibility often remains an afterthought even today, and I am here to share how we can change that. In this talk, we will explore best practices for designing and building user interactions for websites that are accessible and user-friendly for our users. Using semantic HTML and ARIA attributes, we will cover strategies for interaction from a simple button, to navigation, to different form elements and custom components.

Making Interactions Accessible to All Users

Anuradha Kumari

Next.js 13.4 lanzó recientemente la versión estable del "Enrutador de Aplicaciones" - un cambio transformador para el núcleo del framework. En esta charla, compartiré por qué hicimos este cambio, los conceptos clave que debes conocer y por qué estoy emocionado por el futuro de React.

El Nuevo Enrutador de Aplicaciones de Next.js

Today's Talk is about the Next.js App Router, which has evolved over the years and is now a core feature of Next.js. The Talk covers topics such as adding components, fetching remote data, and exploring layouts. It also discusses submitting form data, simplifying code, and reusing components. The App Router allows for coexistence with the existing pages router and enables data fetching at the layout level using React Server Components.

Next.js 13.4 recently released the stable version of the "App Router" – a transformative shift for the core of the framework. In this talk, I'll share why we made this change, the key concepts to know, and why I'm excited about the future of React.

The New Next.js App Router

Lee Robinson

Los meta marcos están cada vez más populares. La gente critica a React todo el tiempo. ¿Estás loco por seguir usando React? La charla va a cubrir cómo las empresas reales hacen esta evaluación de qué marco elegir. Está hablando sobre las ventajas de usar React, centrándose principalmente en los aspectos positivos pero también ofreciendo pensamientos constructivos sobre por qué podrías no querer usarlo. ¿Deberías usar React en 2023?

¿Deberías usar React en 2023?

React is a popular choice, but there are claims that it's dead and should be replaced. React has good out-of-the-box performance and is suitable for most applications. React Native allows code sharing between React and React Native. When considering a migration from React to Svelte, there are trade-offs to consider. React offers a standardized way of working and easy onboarding.

Meta frameworks are increasingly popular. People dunk on React all the time. Are you insane for still using React? The talk is going to cover how real companies make this evaluation of which framework to choose. It's talking about the advantages of using React, primarily focusing on the positives but also offering constructive thoughts on why you might not want to.Should you use React in 2023?

Should You Use React in 2023?

Tru Narla

Jordan Gensler

En esta charla se centra en las optimizaciones de rendimiento y enfoques basados en estándares para lograr la versión más rápida de su sitio que pueda tener. También hablaremos sobre herramientas y frameworks modernos como Remix que ayudan a que su sitio sea rápido con muy poco esfuerzo.

Enfoques Modernos para Crear Sitios Web Extremadamente Rápidos

The Talk discusses performance optimization in software development and engineering. It covers topics such as optimizing requests, anticipating future needs, and comparing single-page apps to multiple-page apps. It also explores the advantages of single-page apps and the use of Remix for building pages. The Talk emphasizes code splitting, optimizing data fetching, and solving client-side state. It concludes with a discussion on pre-rendering, Remix adoption, and prerendering with React.

In this talk is focused on performance-optimizations and standards-based approaches to achieving the fastest version of your site that you can have. We'll also talk about modern tooling and frameworks like Remix which help make your site fast with very little effort.

Modern Approaches for Creating Extremely Fast Websites

Brad Westfall

Cuando se refactorizan bases de código grandes, Encontrar y Reemplazar, incluso con expresiones regulares, solo puede llevarte hasta cierto punto. Cuando eso falla, no recurras a actualizaciones manuales dolorosas, en su lugar, utiliza Árboles de Sintaxis Abstracta (AST).En esta sesión presentamos los AST y mostramos cómo se pueden utilizar para razonar / generar código. Saldrás con una mayor comprensión de cómo puedes actualizar automáticamente el código y nuevos conocimientos sobre cómo funcionan los linters de código en el fondo.

Refactorización de código potenciada mediante Árboles de Sintaxis Abstracta

This Talk explores the power of Abstract Syntax Trees (ASTs) in software development. It covers the use of ASTs in maintaining React examples, automating dependency identification, and introducing generic typing. The Talk also discusses using ASTs to reason about and generate code, as well as their application in building ESLint plugins and code mods. Additionally, it highlights resources for exploring ASTs, testing AST scripts, and building Babel plugins.

When refactoring large code bases, Find and Replace even with Regexes, can only get you so far. When that fails don’t fallback to painful manual updates instead reach for Abstract Syntax Trees (AST). In this session we introduce AST’s and show how they can be used to reason about / generate code. You will leave with a greater understanding of how you can automatically update code and new insights into how code linters work under the hood.

Supercharged Code Refactoring via Abstract Syntax Trees

Stephen Cooper

Las variables CSS se han vuelto tan sofisticadas en los últimos años que ahora nos permiten hacer cosas que no son posibles con JavaScript. En esta charla relámpago, explicaré cómo los ingenieros de MUI están aprovechando el poder de las variables CSS en nuestra nueva biblioteca de componentes de React, Joy UI, para ofrecer componentes que se adaptan automáticamente a su estilo y estructura según el contexto en el que se renderizan.

Construyendo Componentes de IU Perfectos con Variables CSS

CSS variables and their possibilities for UI developers, MUI's history and understanding of developer needs, Joy UI's focus on developer experience and use of CSS variables for consistency and future-proofing, the elimination of manual calculations and JavaScript with CSS variables in JoyUI, and the availability of playgrounds and a stable release for exploration.

CSS variables have become so sophisticated in recent years that they now enable us to do things that aren't possible with JavaScript. In this lightning talk, I'll explain how MUI's engineers are leveraging the power of CSS variables in our new React component library, Joy UI, to deliver components that automatically adapt their style and structure to the context in which they're rendered.

Building Pixel-Perfect UI Components Using CSS Variables

WASM ha tomado el control de la escena del desarrollo web en los últimos años. Es un lenguaje que puede ser ejecutado por la plataforma web junto con Javascript. Al ser tratado como un lenguaje objetivo, una variedad de lenguajes de bajo nivel y estáticamente tipados, como C++ y Rust, pueden ser compilados a WASM. De esta manera, ahora es posible abordar una variedad de aplicaciones complejas e intensivas en cómputo a través de aplicaciones web disponibles de manera inmediata. Se muestran demostraciones de 2 de estas aplicaciones en la presentación y se realiza una comparación lado a lado junto con código JS.

Potenciando las aplicaciones de React con WASM

WebAssembly is a fast, secure, and portable technology that challenges JavaScript's dominance on the web. It allows for the use of legacy code and expands the scope of functions that can be performed on various devices. WebAssembly can be used for image processing and machine learning, and it has potential applications in UI component libraries. Startups are already incorporating WebAssembly into their web applications, and optimization and performance are key advantages of this technology.

WASM has taken over the web-development scene in the past few years. It is a language that can be run by the web platform alongside with Javascript. Being treated as a target language, a variety of low-level, statically-typed languages such as C++ and Rust can be compiled to WASM. Thus, a variety of complex, computationally intense applications can now be tackled through readily available web applications. Demos of 2 such applications are shown in the presentation and a side-to-side comparison is done next to JS code.

Supercharging React Apps with WASM

Mukkund Sunjii

Los desarrolladores desempeñan un papel esencial en la integración y monetización de servicios financieros. En esta charla relámpago, exploraremos el concepto de fintech integrado y sus casos de uso. Luego, nos sumergiremos en una demostración que muestra cómo configurar e integrar servicios financieros utilizando la API de Rapyd. Al final de esta charla, los asistentes tendrán una comprensión clarade cómo comenzar a integrar fintech en aplicaciones. Con instrucciones claras sobre cómo comenzar, esta charla proporcionará a los desarrolladores el conocimiento y los recursos que necesitan para comenzar como desarrolladores de fintech en solo siete minutos.

Cómo convertirse en un desarrollador de fintech en siete minutos

RAPID is a globally integrated FinTech system that abstracts all the integrations into a single platform, eliminating the need for merchants to manage multiple integrations for payments, payouts, fraud detection, and compliance policies in different jurisdictions. RAPID offers various use cases, including e-commerce, online gaming, and marketplaces. With RAPID, merchants can easily handle payments, payouts, and fund transfers. Let's create a hosted checkout page through RAPID by signing up to the client portal, copying authentication keys, and following simple steps. After making a payment on the hosted checkout page, you can view payment details and transferred funds in the client portal. Congratulations, you're now a fintech developer!

Developers play an essential role in integrating and monetizing financial services. In this lightning talk, we will explore the concept of embedded fintech and its use cases. We will then dive into a demo showing how to set up and integrate financial services using the Rapyd API. By the end of this talk, attendees will have a clearunderstanding of how to get started integrating fintech into applications. With clear instructions on how to get started, this talk will provide developers with the knowledge and resources they need to get started as fintech developers in just seven minutes.

How to Become a Fintech Developer in Seven Minutes

Tiki Lobel

Entonces CRA ya no existe y probablemente ya era hora. La documentación de React sugiere Next, Remix o Gatsby... pero aún no estás listo para un Meta-Framework de React completo y realmente solo quieres React puro. ¿Alguna alternativa? En esta charla, voy a explorar exactamente eso. Tenemos 7 minutos, así que no hay diapositivas, solo código donde vamos a configurar una nueva aplicación independiente de React usando Nx.

¿No CRA? ¿Y ahora qué?

React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers. Nx provides facilities to set up a workspace similar to Create React app with modern features. You can modularize and scale your project using Nx libraries. Consider upgrading to a Monorepo structure and adding Next.js or Remix applications. Migration strategies are available for existing React apps.

So CRA is no more and it probably was about time. The React docs suggest Next, Remix or Gatsby...but you're not ready yet for a full-blown React Meta-Framework and really just want pure React. Any alternatives? In this talk, I'm going to explore exactly that. We've got 7 minutes, so no slides, just code where we're going to set up a new React standalone application using Nx.

No CRA? What now?

Juri Strumpflohner

Es importante tener un sistema de autenticación sin fricciones, seguro y de alto rendimiento para cualquier aplicación, ya sea web o móvil. En esta charla relámpago, Itai Hanski aborda la importancia de la autenticación y cómo el equipo de Descope utilizó PKCE para comunicarse entre su aplicación web React y los SDKs móviles nativos.

Usando PKCE para comunicarse entre React y SDKs móviles nativos

The Talk discusses communication between React apps/web apps and native applications/SDKs. It explores the challenges of embedding web code in a WebView and proposes running the browser in an embedded mode. The use of deep links and the Pixie protocol is highlighted as a solution for securely exchanging data between the web code and native applications. The Pixie protocol involves generating an authorization code and comparing it with the original key for secure data exchange.

It’s important to have a frictionless, secure, and performant authentication system for any app, be it web or mobile. In this lightning talk, Itai Hanski covers the importance of authentication and how the Descope team used PKCE to communicate between their React web app and native mobile SDKs.

Using PKCE to Communicate Between React and Native Mobile SDKs

Itai Hanski

GraphQL es una herramienta poderosa y útil, especialmente popular entre los desarrolladores frontend. Puede acelerar significativamente el desarrollo de aplicaciones y mejorar la velocidad de la aplicación, la descubribilidad de la API y la documentación. GraphQL no es solo adecuado para API simples, puede impulsar arquitecturas más avanzadas. La separación entre consultas y mutaciones hace que GraphQL sea perfecto para el event sourcing y Command Query Responsibility Segregation (CQRS). Al hacer que tu aplicación GraphQL avanzada sea sin servidor, obtienes una arquitectura completamente administrada, económica y extremadamente potente.

Arquitecturas Avanzadas de GraphQL: Event Sourcing y CQRS sin servidor

GraphQL is a strongly typed, version-free query language that allows you to ask for specific data and get it in JSON format. It simplifies data retrieval and modification by allowing the server to handle all necessary operations. Serverless architectures, such as AWS Lambda, are scalable, cost-effective, and good for event-driven applications. Event sourcing and CQRS are techniques that ensure consistency and separate reading and writing parts of an application. Building a GraphQL API with commands and queries can be achieved using AWS AppSync and DynamoDB. This approach offers low latency, scalability, and supports multiple languages. Challenges include application complexity, data modeling, and tracing, but starting with simplicity and making something work first can lead to success.

GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Slobodan Stojanović

¿No estás cansado de repetirte? ¿Cansado de repetir el mismo código una y otra vez en tus proyectos de React? En esta charla, descubriremos el poder de los componentes sin cabeza, un patrón de diseño que separa la lógica de la capa de presentación, permitiéndote crear componentes de IU reutilizables y flexibles. Exploraremos cómo los componentes sin cabeza pueden simplificar tu proceso de desarrollo, ahorrándote tiempo y esfuerzo. Examinaremos bibliotecas populares de componentes sin cabeza y proporcionaremos consejos para integrarlas en tus proyectos. Ya seas un principiante o un desarrollador experimentado, únete a nosotros para descubrir cómo los componentes sin cabeza pueden ayudarte a agilizar tu desarrollo de React y crear interfaces de usuario personalizables y de alta calidad.

Fuera con sus cabezas: El auge de los componentes sin cabeza

Headless Components are efficient for app development, but there's a lot of work involved, especially for menus. The customizability wall is a problem with component libraries, but it can be solved through reverse engineering and design. Headless Components offer no markup or basic markup to be overwritten, providing flexibility in code and design quality. Radix and React ARIA are recommended stylus component libraries with different APIs. Kodaks' experience with headless components highlights the ability to mix and match easily and the potential for market gaps in the headless space. Radix is a popular choice for headless components due to its well-documented and user-friendly API. Headless components aid in testing, distribution of design systems, and accessibility. MUI is a self-consistent and rich library, while Radix focuses on accessibility and default accessibility. Kodaks integrates well with headless libraries and welcomes feedback through Discord.

Aren't You Tired of Repeating Yourself? Tired of repeating the same code over and over again in your React projects? In this talk, we'll discover the power of headless components, a design pattern that separates the logic from the presentation layer, allowing you to create reusable and flexible UI components. We'll explore how headless components can simplify your development process, saving you both time and effort. We'll examine popular headless component libraries and provide tips for integrating them into your projects. Whether you're a beginner or an experienced developer, join us to discover how headless components can help you streamline your React development and create high-quality, customizable UIs.

Off with Their Heads: Rise of the Headless Components

Omry Nachman

En esta charla profundizaremos en el arte de crear algo significativo y gratificante. A través de la mirada de mi propio viaje de redescubrir mi pasión por la programación y construir un videojuego desde cero con JavaScript y React, exploraremos los compromisos entre soluciones fáciles y rendimiento rápido. Obtendrás información valiosa sobre prototipado rápido, infraestructura de pruebas y una variedad de trucos de CSS que se pueden aplicar tanto al desarrollo de juegos como a tu trabajo diario.

Cómo no construir un videojuego

The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.

In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.

How Not to Build a Video Game

Christoph Nakazawa

La edición de video es un mercado en auge con influencers siendo toda la rabia con Reels, TikTok, Youtube. ¿Sabías que los navegadores ahora tienen todas las APIs para hacer edición de video en el navegador? En esta charla voy a darte una introducción sobre cómo funciona la codificación de video y cómo hacerla funcionar dentro del navegador. Spoiler, ¡no es trivial!

Edición de video en el navegador

This Talk discusses the challenges of video editing in the browser and the limitations of existing tools. It explores image compression techniques, including Fourier transform and Huffman encoding, to reduce file sizes. The video codec and frame decoding process are explained, highlighting the importance of keyframes and delta frames. The performance bottleneck is identified as the codec, and the need for specialized hardware for efficient video editing is emphasized. The Talk concludes with a call to create a simplified API for video editing in the browser and the potential for AI-powered video editing.

Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Video Editing in the Browser

Christopher Chedeau

¿Alguna vez has imaginado escribir código sin siquiera tocar el teclado? En esta masterclass, te mostraré cómo escribí una aplicación de React con mi voz. Pero lo más importante, demostraré cómo esta tecnología puede ayudar a los desarrolladores con discapacidades a escribir código con facilidad y eficiencia. Juntos, exploraremos las formas en que los asistentes de inteligencia artificial activados por voz pueden revolucionar la forma en que pensamos sobre la programación. Únete a mí mientras exploramos las emocionantes posibilidades de la programación de IA activada por voz en la comunidad de React y las formas en que puede hacer que la codificación en React sea más accesible y divertida para todos.

¡WOW, Escribí Esta Aplicación de React Con Mi Voz!

Today we're going to build a React application with just our voice using GitHub Copilot, an AI peer programmer powered by OpenAI Codecs. It's important to be specific in your comments to get accurate suggestions from Copilot. Prompt engineering tips can be used to create different applications, such as a basic markdown editor and a simple to-do app. The application was tested successfully by adding and deleting to-do items using voice commands.

Have you ever imagined writing code without even touching the keyboard? In this talk, I'll show you how I wrote a React app with my voice. But more importantly, I'll demonstrate how this technology can developers with disabilities to write code with ease and efficiency. Together, we'll explore the ways in which voice-activated AI assistants can revolutionize the way we think about coding. Join me as we explore the exciting possibilities of voice-activated AI programming in the React community and the ways in which it can make React coding more accessible and fun for everyone.

React Summit 2023

The biggest React conference worldwide