November 13 - 15, 2023
React Summit US
New York & Online

React Summit US 2023

La conferencia de React más grande de USA

The biggest React conference in the US

Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca.
Dominando conceptos avanzados en TypeScript
132 min
Dominando conceptos avanzados en TypeScript
Top Content
WorkshopFree
Jiri Lojda
Jiri Lojda
TypeScript no es solo tipos e interfaces. Únete a esta masterclass para dominar características más avanzadas de TypeScript que harán tu código a prueba de balas. Cubriremos tipos condicionales y notación de inferencia, cadenas de plantillas y cómo mapear sobre tipos de unión y propiedades de objetos/arrays. Cada tema se demostrará en una aplicación de muestra que se escribió con tipos básicos o sin tipos en absoluto y juntos mejoraremos el código para que te familiarices más con cada característica y puedas llevar este nuevo conocimiento directamente a tus proyectos.
Aprenderás:- - ¿Qué son los tipos condicionales y la notación de inferencia?- ¿Qué son las cadenas de plantillas?- Cómo mapear sobre tipos de unión y propiedades de objetos/arrays.
El Epic Stack
21 min
El Epic Stack
Top Content
Watch video: El Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
28 min
El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
Top Content
Watch video: El Potencial Caprichoso de los Marcos de Trabajo de JavaScript
The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.
El Ascenso del Ingeniero de IA
30 min
El Ascenso del Ingeniero de IA
Watch video: El Ascenso del Ingeniero de IA
The rise of AI engineers is driven by the demand for AI and the emergence of ML research and engineering organizations. Start-ups are leveraging AI through APIs, resulting in a time-to-market advantage. The future of AI engineering holds promising results, with a focus on AI UX and the role of AI agents. Equity in AI and the central problems of AI engineering require collective efforts to address. The day-to-day life of an AI engineer involves working on products or infrastructure and dealing with specialties and tools specific to the field.
Puerta de entrada a React: La historia de React.dev
32 min
Puerta de entrada a React: La historia de React.dev
Watch video: Puerta de entrada a React: La historia de React.dev
The Talk discusses the journey of improving React and React Native documentation, including the addition of interactive code sandboxes and visual content. The focus was on creating a more accessible and engaging learning experience for developers. The Talk also emphasizes the importance of building a human API through well-designed documentation. It provides tips for building effective documentation sites and highlights the benefits of contributing to open source projects. The potential impact of AI on React development is mentioned, with the recognition that human engineers are still essential.
R3ACT: Una mirada aterradora a las cifras de rendimiento
27 min
R3ACT: Una mirada aterradora a las cifras de rendimiento
Watch video: R3ACT: Una mirada aterradora a las cifras de rendimiento
This Talk on web performance and React explores various metrics such as time to first bite, largest contentful paint, cumulative layout shift, and first input delay. It highlights the challenges of JavaScript in impacting total blocking time and user experience. Mobile usage and device performance are discussed, along with the importance of measuring and improving page performance. The speaker also mentions the abundance of technologies in today's web and emphasizes the need to prioritize user experience over sending excessive JavaScript.
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
160 min
La Puerta al Backend: Guía del Desarrollador Frontend para el Desarrollo Full-Stack
Top Content
WorkshopFree
Amy Dutton
Amy Dutton
Esta masterclass te guiará a través del ciclo de vida del desarrollo de productos para crear una aplicación web del mundo real. Aprenderás sobre los Componentes del Servidor React, construyendo un sistema de diseño dentro de Storybook, y utilizando el desarrollo frontend para acercarte a convertirte en un desarrollador full-stack. La masterclass cubrirá el aumento de la confianza en tu aplicación con pruebas unitarias e implementando autenticación y autorización. Tendrás la oportunidad de trabajar a través de las características del producto y examinar un proyecto real de RedwoodJS, obteniendo valiosa experiencia en el desarrollo de productos del mundo real. RedwoodJS hace que sea simple acercarse al desarrollo full-stack, y esta masterclass te dará las habilidades que necesitas para crear tus propias aplicaciones web del mundo real.
Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web
9 min
Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web
Top Content
Watch video: Política de Seguridad de Contenido con Next.js: Mejorando la Seguridad de tu Sitio Web
Lucas Estevão, a Principal UI Engineer and Technical Manager at Avenue Code, discusses how to implement Content Security Policy (CSP) with Next.js to enhance website security. He explains that CSP is a security layer that protects against cross-site scripting and data injection attacks by restricting browser functionality. The talk covers adding CSP to an XJS application using meta tags or headers, and demonstrates the use of the 'nonce' attribute for allowing inline scripts securely. Estevão also highlights the importance of using content security reports to identify and improve application security.
Olvida el mal código, concéntrate en el sistema
27 min
Olvida el mal código, concéntrate en el sistema
Top Content
Watch video: Olvida el mal código, concéntrate en el sistema
Setting up the system and separating concerns are important in software development. Modular construction and prefab units are a new trend that makes construction quicker and easier. Architectural complexity can lead to a drop in productivity and an increase in defects. Measuring architectural complexity can help identify natural modules in the code. Best practices for avoiding architectural complexity include organizing code by business domain and using prop drilling. Atomic design and organizing a monorepo are recommended approaches for managing architectural complexity.
Monitoreo 101 para Desarrolladores de React
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
104 min
Patrones Avanzados de Despliegue de Aplicaciones con Componentes de Servidor React (feat. un Marco RSC DIY)
Top Content
WorkshopFree
 Greg Brimble
Greg Brimble
El ecosistema de desarrolladores siempre está avanzando rápidamente y este año no ha sido una excepción. Los Componentes de Servidor React pueden ofrecer una mejora significativa a la experiencia del desarrollador y al rendimiento de la aplicación. Pero creo que es justo decir que este nuevo paradigma de servidor primero puede ser complicado de entender!En la primera mitad de esta masterclass, exploraremos los Componentes de Servidor React desde cero: construyendo nuestro propio mini marco meta para ayudarnos a entender cómo funcionan los RSCs. Descubriremos exactamente qué se produce en una construcción RSC y conectaremos esas piezas para formar una aplicación completa.A continuación, ¡lo desplegaremos! Cloudflare también ha tenido un año ocupado — Smart Placement, en particular, es una nueva tecnología que hemos desarrollado que se ajusta perfectamente al modelo RSC. Exploraremos por qué eso tiene sentido para nuestra aplicación de masterclass, y realmente lo desplegaremos en la Plataforma de Desarrolladores de Cloudflare.Finalmente, ampliaremos un poco más nuestra aplicación, utilizando D1 (nuestra base de datos SQL sin servidor) para mostrar realmente el poder del Componente de Servidor React cuando se combina con Smart Placement.Deberías salir de esta masterclass con una mayor comprensión de cómo funcionan los Componentes de Servidor React (tanto detrás de las escenas como también cómo tú como desarrollador puedes usarlos día a día), así como una visión de algunos de los nuevos patrones de despliegue que ahora son posibles después de las recientes innovaciones en el espacio de la plataforma.
De Todo App a B2B SaaS con Next.js y Clerk
153 min
De Todo App a B2B SaaS con Next.js y Clerk
Top Content
WorkshopFree
Dev Agrawal
Dev Agrawal
Si eres como yo, probablemente tengas un millón de ideas para proyectos secundarios, algunas de las cuales incluso podrían hacerte ganar dinero como un micro SaaS, o podrían resultar ser la próxima startup de mil millones de dólares. Pero, ¿cómo sabes cuáles? ¿Cómo pasas de una idea a un producto funcional que puede ser puesto en manos de clientes que pagan sin renunciar a tu trabajo e invirtiendo todo tu tiempo y dinero en ello? ¿Cómo pueden competir tus proyectos secundarios en solitario con las aplicaciones construidas por enormes equipos y grandes empresas?
Construir productos SaaS ricos viene con desafíos técnicos como infraestructura, escalabilidad, disponibilidad, seguridad y subsistemas complicados como autenticación y pagos. Por eso, a menudo son los gigantes tecnológicos ya establecidos quienes pueden construir y operar productos de este tipo de manera razonable. Sin embargo, una nueva generación de devtools está permitiendo a los desarrolladores construir fácilmente soluciones completas que aprovechan la mejor infraestructura en la nube disponible, y ofrecen una experiencia que te permite iterar rápidamente en tus ideas por un bajo costo de $0. Se llevan todos los desafíos técnicos de construir y operar productos de software para que solo tengas que pasar tu tiempo construyendo las características que tus usuarios quieren, dándote una oportunidad razonable de competir contra el mercado al mantenerte increíblemente ágil y receptivo a las necesidades de los usuarios.
En esta masterclass de 3 horas comenzarás con una simple aplicación de gestión de tareas construida con React y Next.js y la convertirás en un producto SaaS completamente funcional y escalable integrando una base de datos escalable (PlanetScale), autenticación multi-tenant (Clerk), y pagos basados en suscripción (Stripe). También aprenderás cómo los principios del desarrollo de software ágil y el diseño impulsado por el dominio pueden ayudarte a construir productos rápidamente y de manera rentable, y competir con las soluciones existentes.
Construye un potente DataGrid en pocas horas con Ag Grid
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
Top Content
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
Componentes de Servidor React desde Cero
29 min
Componentes de Servidor React desde Cero
Watch video: Componentes de Servidor React desde Cero
This Talk introduces React Server Components and provides a step-by-step guide on building and rendering them. It explores the capabilities of server components, including interactivity and streaming. The Talk also covers the process of incorporating client-side rendering and the challenges of bundling and mapping client components. Additionally, it discusses the importance of supporting React Server Components and the ongoing efforts to integrate them with different bundlers.
Construyendo Componentes de Servidor Reutilizables en NextJS
88 min
Construyendo Componentes de Servidor Reutilizables en NextJS
Workshop
Will Bishop
Mettin Parzinski
2 authors
React continúa evolucionando su capacidad beta, los Componentes de Servidor de React, y continúan desarrollándolos en asociación con marcos como NextJS.En esta masterclass, los asistentes aprenderán qué son los Componentes de Servidor de React, cómo construirlos y usarlos eficazmente en NextJS, y se centrarán en una de las principales ventajas de React/NextJS: la reutilización a través de componentes.También cubriremos tecnologías beta relacionadas habilitadas por el directorio `app`, como los layouts anidados y las acciones del servidor (capacidad alfa/experimental).¡Únete a nosotros para esta masterclass práctica de 120 minutos!Tecnologías:
React, JavaScript/Typescript, NextJS, Miro
Deja que la IA Sea Tus Documentos
135 min
Deja que la IA Sea Tus Documentos
Workshop
Jesse Hall
Jesse Hall
Desata el poder de la IA en tu documentación con esta masterclass práctica. En esta sesión interactiva, te guiaré a través del proceso de crear un sitio de documentación dinámica, potenciado con la inteligencia de la IA (ChatGPT).Imagina un mundo donde no tienes que buscar en páginas de documentación para encontrar esa línea de código esquiva. Con esta solución impulsada por la IA, obtendrás respuestas precisas, resúmenes concisos y enlaces relevantes para una exploración más profunda, todo al alcance de tu mano.Esta masterclass no es solo sobre aprender; es sobre hacer. Ensuciarás tus manos con algunas de las tecnologías más buscadas en el mercado hoy en día: Next.js, shadcn-ui, OpenAI, LangChain y MongoDB Vector Search.
Autoría de HTML en un Mundo JavaScript
21 min
Autoría de HTML en un Mundo JavaScript
Watch video: Autoría de HTML en un Mundo JavaScript
This Talk by Tony Alicia focuses on authoring HTML in a JavaScript world. The speaker challenges developers to change their approach to building React components by starting with HTML first. By authoring HTML in a semantic way, readability and maintainability can be improved. Well-authored HTML provides better understanding of content and improves accessibility. It also has performance benefits by reducing DOM size. Investing time in HTML can save time and make applications more future-proof.
Rompiendo el hábito de 'useEffect'
22 min
Rompiendo el hábito de 'useEffect'
Watch video: Rompiendo el hábito de 'useEffect'
Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.
El Medio Desordenado — Navegando la Complejidad en Aplicaciones React Grandes
10 min
El Medio Desordenado — Navegando la Complejidad en Aplicaciones React Grandes
Watch video: El Medio Desordenado — Navegando la Complejidad en Aplicaciones React Grandes
Managing complexity in large React applications is a challenge, as it tends to grow exponentially over time. Component composition is a key technique that allows for flexibility in React applications, but too much composition can make components harder to use. Managing complexity and reducing cognitive load is crucial, and strategies such as controlling abstraction evolution and minimizing information needed for simple changes can help. Simplicity is difficult, but important in slowing down the growth of complexity.
Sistemas de Estilo Seguros por Tipo: El Futuro de CSS
22 min
Sistemas de Estilo Seguros por Tipo: El Futuro de CSS
Watch video: Sistemas de Estilo Seguros por Tipo: El Futuro de CSS
This Talk explores the evolution of CSS and the development of style systems in software engineering. It discusses the limitations of CSS and the need for frameworks, pre-processors, and JavaScript to enhance styling capabilities. The Talk highlights different approaches to CSS styling, including libraries like Tailwind and Chakra UI. It also introduces innovative style systems like Vanilla Extract and Rainbow Sprinkles, which offer optimized CSS classes and type safety. The speaker emphasizes the importance of design systems and encourages developers to explore and consider the strengths and weaknesses of different style systems.
Suspense para la Obtención de Datos: Cómo Obtener Durante el Renderizado
5 min
Suspense para la Obtención de Datos: Cómo Obtener Durante el Renderizado
Watch video: Suspense para la Obtención de Datos: Cómo Obtener Durante el Renderizado
This talk discusses the best practices for fetching data during the initial render of a component in React. It emphasizes the importance of fetching in advance and avoiding fetching twice. The talk also highlights the need for an external cache to store information about API calls and the use of a cleanup function to avoid memory leaks. Additionally, the speaker mentions their library, react-disposable-state, which can be used for making side effects during render.
OpenAI en React: Integrando GPT-4 con Tu Aplicación React
22 min
OpenAI en React: Integrando GPT-4 con Tu Aplicación React
Watch video: OpenAI en React: Integrando GPT-4 con Tu Aplicación React
AI is revolutionizing application development and can enhance React applications. Advancements in AI include batch AI, real-time AI, and generative AI. Language models have limitations in accessing real-time data. Retrieval Augmented Generation (RAG) uses vectors to enhance language models. Vector search capabilities improve GPT models by providing up-to-date information and access to private data. Technologies like Next.js, OpenAI, Lankchain, Versel AI SDK, and MongoDB are used to build smarter React apps. An AI-powered documentation site can be built using custom data and vector search. The talk concludes by emphasizing the importance of integrating AI seamlessly into user-centric platforms like React-based projects.
Concurrencia en React × Core Web Vitals
26 min
Concurrencia en React × Core Web Vitals
Watch video: Concurrencia en React × Core Web Vitals
The Talk discusses the InteractionToNextPaint metric, which measures the speed of clicks or keyboard inputs on a page. It explores the impact of slow interactions and slow React renders on user experience. The Talk also covers optimization techniques for React rendering, including the use of concurrent features and the StartTransition function. React 18 introduces changes to the rendering process that improve interaction speed. Concurrent rendering and suspense boundaries are highlighted as features that can enhance the performance of React apps.
Si no eres el primero, eres el último
27 min
Si no eres el primero, eres el último
Watch video: Si no eres el primero, eres el último
Performance is a puzzle that requires different approaches for different problems and sites. User feedback is crucial in evaluating performance, rather than relying solely on metrics like Lighthouse scores. Measuring performance and identifying issues can be done through tools like the performance tab and user timings. Understanding the main thread and using tools like React Profiler and Chrome Tracing can provide insights into performance problems. Optimizing performance involves doing less work, avoiding main thread blocking, and considering options like virtualization and Canvas. Communicating the impact of optimization to leadership and exploring different uses of Canvas are also important topics discussed in the Talk.
Opcional Javascript: Aplicaciones React modernas que funcionan sin JS
28 min
Opcional Javascript: Aplicaciones React modernas que funcionan sin JS
Watch video: Opcional Javascript: Aplicaciones React modernas que funcionan sin JS
In this Talk, the speaker discusses the concept of building JavaScript optional applications, focusing on the use of tools like React server components, Next.js, remix, React Router, Astro, SolidStarts, and Weld. They explore various aspects such as building eCommerce apps, pagination, adding items to cart without JavaScript, and implementing features like card previews using HTML and CSS. The speaker also highlights the trade-offs and considerations when disabling JavaScript, maintaining cart items, and combining old and new ways of building applications.
Domando el Dragón de la Gestión de Estado
23 min
Domando el Dragón de la Gestión de Estado
Watch video: Domando el Dragón de la Gestión de Estado
This Talk discusses various aspects of state management in software development. It covers different types of state, such as bootstrap data, lazily loaded data, and reactive data. The Talk also explores the concept of locality in state management, including local, global, and regional state. It introduces libraries like Recoil and Jotai that challenge the single global store concept and provide better locality. The Talk emphasizes the importance of setting up state management systems for success and creating reliable systems to focus on user satisfaction.
Los árboles no son solo follaje: ASTs y uso práctico
9 min
Los árboles no son solo follaje: ASTs y uso práctico
Watch video: Los árboles no son solo follaje: ASTs y uso práctico
ASTs, or abstract syntax trees, are used by popular tools like Babel, TypeScript, ESlint, and Prettier to improve the developer experience. They have various use cases including compiling and code analysis. Editor tooling and writing tools can be enhanced using ASTs, with examples including formatting with Prettier, type annotations in JetBrains editors, and code mods for framework upgrades. Ts-morph is a useful tool for code transformations, while Tree Sitter is a portable tool that supports many languages and can be used to build IDEs or text editors in the browser.
Cómo usar Suspense y GraphQL con Apollo para construir grandes experiencias de usuario
27 min
Cómo usar Suspense y GraphQL con Apollo para construir grandes experiencias de usuario
Watch video: Cómo usar Suspense y GraphQL con Apollo para construir grandes experiencias de usuario
Jerel Miller
Alessia Bellisario
2 authors
Today's Talk is about using suspense and GraphQL with Apollo Client to create smooth user experiences. The Talk covers the introduction and power of suspense, the new Used Suspense Query hook in Apollo Client, updating components with suspense, using suspense boundaries and tradeoffs, optimizing playlist fetching with GraphQL, loading more tracks and using transitions, and concluding remarks and future developments.
Renderizado: ¿Sincronizar o no sincronizar?
28 min
Renderizado: ¿Sincronizar o no sincronizar?
Watch video: Renderizado: ¿Sincronizar o no sincronizar?
This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.
Gestión del Estado en React con Valtio
10 min
Gestión del Estado en React con Valtio
Watch video: Gestión del Estado en React con Valtio
This is a short presentation on VALTEO, a proxy-based state management system that uses JavaScript's native idea of proxies to create observable and immutable state. The proxy tracks changes to the object and nested proxy objects, only re-rendering the component when a specific key changes. There is a gotcha with proxies in Valtio - avoid reassigning the proxy to a whole new object. Valtio integrates with Redux DevTools, making it even more powerful and convenient.
Redux Moderno con Redux Toolkit
7 min
Redux Moderno con Redux Toolkit
Watch video: Redux Moderno con Redux Toolkit
Mark Erickson discusses the changes and challenges in Redux Toolkit 2.0, including addressing ES Module Common JS Compatibility and shipping new features. The release includes modernized build output, smaller bundle sizes, and new features like combined Slices API and dev mode checks in Reselect. The current test version is beta4, with plans to ship by the first week of December. RTK 3.0, focusing on RTK query updates, is expected to be released next year.
Camino a Cero Fallos de Lint: Abordando Desafíos de Calidad de Código a Gran Escala
11 min
Camino a Cero Fallos de Lint: Abordando Desafíos de Calidad de Código a Gran Escala
Watch video: Camino a Cero Fallos de Lint: Abordando Desafíos de Calidad de Código a Gran Escala
This Talk discusses the journey from thousands of Lint failures to zero in a codebase at Linton that is over 80 years old. The approach involved implementing rules, incentives, and tooling to address the issue. The tool called Checkup was used to visualize ESLint failures by team and lint rule, providing accountability and responsibility. The efforts resulted in cleaning up over 6,000 lint failures, with 55 contributors, and a 30% increase in perceived code quality.
Más allá de la velocidad de carga inicial con INP
8 min
Más allá de la velocidad de carga inicial con INP
Watch video: Más allá de la velocidad de carga inicial con INP
The Talk discusses the Core of Vitals and IMP, which are metrics used to measure user experience in browsers. IMP measures multiple actions such as tab, click, and key press until the next screen updates. It also addresses the issue of rage clicks and their impact on user experience. The Talk emphasizes the importance of optimizing for IMB by avoiding blocking the main thread and suggests using multiple tasks and yield to main thread for optimization. Additionally, it mentions the use of navigatorScheduling.isInputPending to handle user input, with a caveat that support may vary across browsers.
Transformación de Imágenes Usando IA Sin Salir de Tu Aplicación React
5 min
Transformación de Imágenes Usando IA Sin Salir de Tu Aplicación React
Watch video: Transformación de Imágenes Usando IA Sin Salir de Tu Aplicación React
Today's Talk discusses the importance of transforming images with AI in React apps and the benefits of using image CDNs. The speaker emphasizes the significance of images as a crucial component of websites and the time-consuming nature of adopting image best practices. They propose image transformation on the edge as a faster and easier alternative. The Talk also highlights the use of AI in image transformation, including removing backgrounds, cropping images, and upscaling pixelated images in a Contentful Next JS app. The combination of image CDNs and AI parameters ensures that images always look their best without leaving the React app.
Más allá de JavaScript: Maximizando React con Web APIs
10 min
Más allá de JavaScript: Maximizando React con Web APIs
Watch video: Más allá de JavaScript: Maximizando React con Web APIs
This Talk explores how to use browser and web APIs to enhance React applications, covering categories such as Fetch API, Device APIs, Storage APIs, Audio and Video APIs, and Shape API. It explains how web APIs are implemented in React applications and suggests using native JavaScript functions or NPM modules like React Speech Recognition. The Talk demonstrates the use of Battery and Face Detection APIs in a React application, including features like getting battery percentage, live coordinates, and speech-to-text functionality. It also mentions the possibility of creating augmented reality face filters with the face detection API. The conclusion highlights the availability of resources on Mozilla docs and a GitHub repository for further learning and code samples.
¿Quieres construir una aplicación de nivel empresarial? ¡Desmonta una!
13 min
¿Quieres construir una aplicación de nivel empresarial? ¡Desmonta una!
Watch video: ¿Quieres construir una aplicación de nivel empresarial? ¡Desmonta una!
Nithya Narasimhan discusses how to build an enterprise-grade application by deconstructing a reference implementation. The development environment includes GitHub Codespaces, devcontainer, and GitHub Copilot Chat. The Contoso Real Estate app provides a fully functioning experience in the browser. The Composable Enterprise pattern and API-first design are key components. Deployment is facilitated through infrastructure as code and an azure.yml file.
Una Guía Nerd para los Conceptos de Tendencia en la Web
17 min
Una Guía Nerd para los Conceptos de Tendencia en la Web
Watch video: Una Guía Nerd para los Conceptos de Tendencia en la Web
This Talk is about using comic book stories to explain complex software development concepts. The first part introduces the speaker and the purpose of the Talk. The second part explores the concept of hydration using Iron Man as an example. Hydration is a solution to make server-side rendered code interactive. The Talk then moves on to discuss resumability, which allows for immediate interactivity by encoding extra information into the HTML. The concept of resumability is further explained using a story with Iron Man. The Talk concludes by inviting suggestions for future topics and thanking the audience.
¿Espera, Estás Enviando React Native a la Web?!
32 min
¿Espera, Estás Enviando React Native a la Web?!
Watch video: ¿Espera, Estás Enviando React Native a la Web?!
Guild is a platform that needs to exist on all platforms, using React Native to orchestrate them. React Native and Expo provide components that work across platforms. Building applications with React Native involves composing components and using a design system. Choosing the right server-side rendering solution is important for unifying mobile and web codebases. Embedding React Native allows for optimization and embedding in any application. Bridging the gap between UI and API with embeddable experiences is key to supporting communities on every platform.
Componentes del Servidor al Rescate: Turboalimentando y Potenciando Tus Aplicaciones React con Estilo
16 min
Componentes del Servidor al Rescate: Turboalimentando y Potenciando Tus Aplicaciones React con Estilo
Watch video: Componentes del Servidor al Rescate: Turboalimentando y Potenciando Tus Aplicaciones React con Estilo
Welcome to the server components to the rescue, turbo charging and empowering your React application with style. React server components were introduced three years ago, providing an easy-to-maintain and quick-to-build solution with improved metrics and user experience. By using server-side rendering, there is no need to download code to the client at startup. Server components reduce the cost of attractions and provide a unified solution. The future of React server components includes improving state synchronization, allowing server components to re-render in response to state changes, and enabling fluid UI updates without page refresh.
Viaje al desconocido: Mi aventura desentrañando los misterios del universo TVUI de Netflix
30 min
Viaje al desconocido: Mi aventura desentrañando los misterios del universo TVUI de Netflix
Watch video: Viaje al desconocido: Mi aventura desentrañando los misterios del universo TVUI de Netflix
This Talk explores the journey of a software developer in unraveling the mysteries of Netflix TV UI. It emphasizes the importance of continuous learning in TV UI development and discusses the use of React and the TV signup process. The Talk also highlights the significance of widgets, navigation, and the TVUI Explorer app in building TV UI. It delves into the TVUI dev process, testing layers, and the value of continuous learning and fresh perspectives in the tech industry. The Talk concludes with insights on job opportunities, resources for TV development, and the Netflix hiring process.
¡Carnaval de Sistemas de Diseño! Un Componente Accesible, Muchas Máscaras Bonitas
27 min
¡Carnaval de Sistemas de Diseño! Un Componente Accesible, Muchas Máscaras Bonitas
Watch video: ¡Carnaval de Sistemas de Diseño! Un Componente Accesible, Muchas Máscaras Bonitas
The Talk discusses the concept of design system Carnival and its relation to masks. It emphasizes the importance of accessibility in design systems and provides guidelines for implementing the Disclosure So Hide pattern. The Talk also covers topics like focus management, mouse interactions, and extending the disclosure widget. It warns against mixing different roles and complexity in design systems, using the example of a carousel. Overall, the Talk highlights the challenges and considerations in creating effective design systems.
Derrota la Parálisis de Decisión: Construyendo un Asesino Sistema de Diseño en Aislamiento
12 min
Derrota la Parálisis de Decisión: Construyendo un Asesino Sistema de Diseño en Aislamiento
Watch video: Derrota la Parálisis de Decisión: Construyendo un Asesino Sistema de Diseño en Aislamiento
Defeating decision paralysis when building design systems by letting tools make some decisions. Using design tokens to express design decisions as data, including colors and typography. Alias colors to give them more specific names and define typography with a type scale. Use existing spacing scales and build components in isolation to test different states. Start with the basics, use existing tools, and have fun with it.
¡Tú eres la Plataforma!
18 min
¡Tú eres la Plataforma!
Watch video: ¡Tú eres la Plataforma!
The Talk discusses the web platform and the speaker's experience with Remix. It covers issues with mutations and form data submission, fixing bugs, and discovering missing features. The speaker also talks about working on JS DOM and web standards, opening a pull request and making progress, and working on Chromium, Gecko, and Firefox. The Talk concludes with discussions on time to GA and documentation, as well as the speaker's contributions and takeaways.
Construyendo un Entorno de Ejecución Node.js para el Navegador
13 min
Construyendo un Entorno de Ejecución Node.js para el Navegador
Watch video: Construyendo un Entorno de Ejecución Node.js para el Navegador
This Talk discusses the challenges and collaboration involved in building Nodebox, a Node.js compatible runtime for the browser. It provides an overview of how Nodebooks works, including the main manager, previews, and web workers. The Talk also covers the simplicity and speed of reading from the filesystem in Nodebooks. It highlights the complexity of implementing HTTP support and WebSocket mocking in Nodebox. Lastly, it mentions the ability to build a web server using Nodebox and provides information on available templates.
Kit de UI de la App de Canva: Empoderando a los Desarrolladores con Tecnologías Web Modernas
8 min
Kit de UI de la App de Canva: Empoderando a los Desarrolladores con Tecnologías Web Modernas
Watch video: Kit de UI de la App de Canva: Empoderando a los Desarrolladores con Tecnologías Web Modernas
Welcome to the Canva Tech talk where the Canva tech stack, React component structure, and UI kit for developers are discussed. Canva uses Java, Go, Bash, TypeScript, and React for development. TypeScript, MobX, and React were chosen to enable hundreds of developers to work on the code base productively. Canva's internal component library was explored and released under a semi-open source license, allowing for quick delivery and sharing of improvements with the community. The developer community has added numerous app integrations accessible to Canva's 150 million monthly active users.
A11y Más allá de la teoría: Integrando las pruebas de accesibilidad en tu flujo de trabajo
24 min
A11y Más allá de la teoría: Integrando las pruebas de accesibilidad en tu flujo de trabajo
Watch video: A11y Más allá de la teoría: Integrando las pruebas de accesibilidad en tu flujo de trabajo
Ntandala Kengose, a software developer, emphasizes the importance of accessibility in software development and the responsibility it carries. The Web Content Accessibility Guidelines (WCAG) provide technical guidelines for making web content more accessible. Ntandala shares various accessibility testing tools and highlights the need for automation in testing. Tools like Pelly CI and GitHub Actions can be used for automated accessibility testing and CI integration. The X-Accessibility Ginter and Husky are tools that provide insights and ensure accessibility in development.
Cómo Realm por MongoDB está probando módulos nativos “en el dispositivo”
11 min
Cómo Realm por MongoDB está probando módulos nativos “en el dispositivo”
Watch video: Cómo Realm por MongoDB está probando módulos nativos “en el dispositivo”
The speaker works on the Atlas Device SDKs, which allows testing code across multiple platforms and has support for multiple programming languages. They also built Mocha Remote CLI, a tool for running tests on Node.js and in a browser. The speaker mentions the popularity of Jest and the alternative Vitest for running tests on platforms like Android and iOS.
Medición de la Cobertura del Sistema de Diseño React
19 min
Medición de la Cobertura del Sistema de Diseño React
Watch video: Medición de la Cobertura del Sistema de Diseño React
The Talk discusses the majoring coverage of the Reduzon system and the journey of migrating from design-system-3.0 to design-system-4.0. It introduces React scanner, a tool that statically analyzes code and extracts React component and prop usage. The Talk explores the options and custom functions in React scanner, as well as the processors and AST used by the tool. It also discusses exploring AST using astexplorer.net and showcases the usage of react-scanner. Finally, it mentions the importance of component restructure and introduces Omelet, a tool for component analytics.
Superpoderes de la API Web del Navegador
25 min
Superpoderes de la API Web del Navegador
Watch video: Superpoderes de la API Web del Navegador
Today's talk covers Web API, including exotic and not commonly used APIs that can enhance web applications. The IntersectionObserver API allows for lazy loading images and infinite scroll lists. The Screen Wake Lock API prevents devices from locking, ensuring uninterrupted usage. The Wake Lock API is useful for various scenarios, but browser and device support varies. Background Sync and Broadcast Channel APIs enable offline functionality and communication between contexts. Lastly, the impact of code on the planet is highlighted, emphasizing the need for more efficient web development.
Por qué Redwood Adoptó los Componentes del Servidor React
33 min
Por qué Redwood Adoptó los Componentes del Servidor React
Watch video: Por qué Redwood Adoptó los Componentes del Servidor React
Redwood is a full stack web app framework built with React, GraphQL, and Prisma. It prioritizes conventions and maintainability, and collaborates closely with the React team. Redwood offers full-stack features, including real-time functionality without WebSockets. The Bighorn Epoch is a new phase in Redwood's roadmap. Redwood is excited about the possibilities of React Server Components and wants to collaborate with the community.
El Valor Inesperado del Par Clave en la Mentoría
9 min
El Valor Inesperado del Par Clave en la Mentoría
Watch video: El Valor Inesperado del Par Clave en la Mentoría
Heather May
Sidney Buckner
2 authors
This Talk discusses the unique mentorship journey of the speakers, who found each other through Coding Dojo and LinkedIn. They highlight the power of mentorship, emphasizing the value of having another woman in tech for support and guidance. The impact of mentorship is also emphasized, with the speakers encouraging others to be mentors and share their knowledge. They describe the mentor-mentee relationship as wonderful, inclusive, and supportive.
E-Commerce a la Velocidad del Rayo: Remixa tu Tienda con Shopify Hydrogen
27 min
E-Commerce a la Velocidad del Rayo: Remixa tu Tienda con Shopify Hydrogen
Watch video: E-Commerce a la Velocidad del Rayo: Remixa tu Tienda con Shopify Hydrogen
Today's Talk is about Shopify Hydrogen and how it simplifies the development of headless Shopify stores. The Talk covers topics such as mixing Storyblok and CMS data, code and data manipulation in Hydrogen, creating products and collections, handling SEO, building a performance server-side cart, setting up and managing the cart, and displaying cart and raffle information.
Construyendo Experiencias de Usuario Amigables en Web3
32 min
Construyendo Experiencias de Usuario Amigables en Web3
Watch video: Construyendo Experiencias de Usuario Amigables en Web3
Web 3 is about decentralization, using blockchain, cryptography, and consensus algorithms. It allows users to have more control over their data and assets. The current state of Web 3 is complex and frustrating, but efforts are being made to improve usability. Layer 2 chains and account abstraction are improving scalability and user experience. Web 3 provides financial solutions for all and enables transactions in restrictive environments.
DOM Virtual: De vuelta en Bloque
9 min
DOM Virtual: De vuelta en Bloque
Watch video: DOM Virtual: De vuelta en Bloque
Hi, I'm Annembae, the author of MillionJS, a fast virtual DOM replacement for React. The virtual DOM can be slow depending on the components it powers. The block virtual DOM introduces an O(1) optimization to the traditional virtual DOM, resulting in faster updates with fewer DOM manipulations. MillionJS and the Block Virtual DOM offer a faster alternative to existing virtual-dom libraries like React. It has the potential to revolutionize the way we write React applications.
Automatización de Despliegues en React Native
9 min
Automatización de Despliegues en React Native
Watch video: Automatización de Despliegues en React Native
This Talk discusses the benefits of automating React Native app deployments and explores tools like Trapeze for automating configuration updates and GitHub Actions for automating the build process. It also highlights the use of signing credentials tooling and cloud credentials management tools like Fastlane Match or AppFlow for more complex builds. The Talk emphasizes the automation of build upload and testing using tools like App Store Developer APIs, Fastlane, Bitrise, or AppFlow, with a specific focus on Fastlane's ability to increment build numbers, build the app, and upload it to TestFlight.
¿Usando el Ecosistema React Con el Primer Marco de Javascript O(1) en el Mundo?
18 min
¿Usando el Ecosistema React Con el Primer Marco de Javascript O(1) en el Mundo?
Watch video: ¿Usando el Ecosistema React Con el Primer Marco de Javascript O(1) en el Mundo?
Reshapability in the next generation of front-end frameworks with OOV one loading time. Quick is a web framework that loads instantly and does not require hydration. QUIC allows lazy loading of specific code components, minimizing initial JavaScript downloads. QUIC CD is a metaframework built around QUIC, offering directory-based routing, nested layouts, file-based menus, and data endpoints. This represents a significant shift in front-end frameworks.
Cualquiera puede ser un mantenedor de código abierto
7 min
Cualquiera puede ser un mantenedor de código abierto
Watch video: Cualquiera puede ser un mantenedor de código abierto
Hey, everyone. Today, I want to talk about how anyone, even junior developers, can be an open-source maintainer. Let me share my journey of learning to code and becoming a maintainer. I made a website for an internal conference straight from code and made it open source. Participating in Hacktoberfest helped me connect with other developers and learn from them. Becoming an open-source maintainer increases your confidence, helps you make connections, and enables you to share cool tools with the world.
Tres Factores Que Están Bloqueando las Contribuciones a Tu Proyecto de Código Abierto
14 min
Tres Factores Que Están Bloqueando las Contribuciones a Tu Proyecto de Código Abierto
Watch video: Tres Factores Que Están Bloqueando las Contribuciones a Tu Proyecto de Código Abierto
Welcome to the best talk of React Summit USA. This talk is about three factors that block contributions to open source projects. Application is an open source dev tool platform that eliminates repetitive tasks in creating NodeJS backends, increasing developer productivity. I will discuss the challenges faced by first-time contributors and how to overcome them. If you want to contribute for the first time, we welcome you. Being proactive and engaging with the community can attract long-term contributors.
Empujando los Límites hacia el Edge
21 min
Empujando los Límites hacia el Edge
Watch video: Empujando los Límites hacia el Edge
CDNs were introduced to improve website performance by bringing web content closer to users. The concept of the edge addresses the limitations of CDNs by processing client data close to the source. The edge combines serverless functions and CDNs, allowing for server-side logic execution without web server configuration. Use cases for the edge include personalization, geolocation-based content delivery, AV testing, and implementing security logic.