June 14 - 18, 2024
React Summit
Amsterdam & Online

React Summit 2024

La conferencia de React más grande del mundo

React Summit es una conferencia anual sobre todo lo relacionado con React, que reúne a miles de ingenieros de Front-end y Full-stack de todo el mundo.



Esta edición del evento ha finalizado, las últimas actualizaciones de este React Conference están disponibles en el sitio web de la marca. Sigue para más React Conferences.
Ag GridMUICoduxChainlink LabsOracleCKEditorStoryblokJetBrainsSisenseMongoDBDataStaxConvexFocusReactiveChromaticPicnic
IA para Desarrolladores de React: Oportunidades, Aprendizaje e Innovación
9 min
IA para Desarrolladores de React: Oportunidades, Aprendizaje e Innovación
AI offers opportunities for React developers to code faster and automate tasks. Generative AI is a crucial area for developers to focus on. Working with AI APIs and RAGS can open up new possibilities for projects. Orchestration frameworks and tools like Lanchain and relevance help chain tasks together and work with different AI models. AI is a supplement to human capabilities and learning to code with AI can help developers push boundaries and become better.
Construye una Potente Rejilla de Datos con AG Grid
168 min
Construye una Potente Rejilla de Datos con AG Grid
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.
Building Your Own Custom Type System
38 min
Building Your Own Custom Type System
Workshop
Kunal Dubey
Kunal Dubey
I'll introduce the audience to a concept where they can have end-to-end type systems that helps ensure typesafety across the teams Such a system not only improves communication between teams but also helps teams collaborate effectively and ship way faster than they used to before. By having a custom type system, teams can also identify the errors and modify the API contracts on their IDE, which contributes to a better Developer Experience. The workshop would primarily leverage TS to showcase the concept and use tools like OpenAPI to generate the typesystem on the client side. 
Construyendo tu Aplicación de IA Generativa
82 min
Construyendo tu Aplicación de IA Generativa
WorkshopFree
Dieter Flick
Dieter Flick
La IA generativa está emocionando a los entusiastas de la tecnología y a las empresas con su vasto potencial. En esta sesión, presentaremos Retrieval Augmented Generation (RAG), un marco que proporciona contexto a los Modelos de Lenguaje Grande (LLMs) sin necesidad de volver a entrenarlos. Te guiaremos paso a paso en la construcción de tu propia aplicación RAG, culminando en un chatbot completamente funcional.
Conceptos Clave: IA Generativa, Retrieval Augmented Generation
Tecnologías: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow
Cómo Construir Control de Acceso Front-End con NFTs
88 min
Cómo Construir Control de Acceso Front-End con NFTs
WorkshopFree
Solange Gueiros
Solange Gueiros
Comprender los fundamentos de la tecnología NFT y su aplicación en fortalecer la seguridad web. A través de demostraciones prácticas y ejercicios prácticos, los asistentes aprenderán cómo integrar sin problemas mecanismos de control de acceso basados en NFT en sus proyectos de desarrollo front-end.
Crear una aplicación React Native de pila completa con Oracle 23ai
37 min
Crear una aplicación React Native de pila completa con Oracle 23ai
WorkshopFree
Doug Drechsel
Doug Drechsel
En este masterclass, configurarás un entorno de pila completa local y crearás una aplicación móvil React Native que se ejecuta en esa pila.
Agenda:- Instalar el contenedor Docker de Oracle 23ai- Construir y ejecutar Parse Server con el nuevo adaptador de almacenamiento de Oracle- Construir y ejecutar una aplicación móvil React Native de Walking History en la pila
Walking History es una aplicación React Native que te permite caminar por la ciudad de Nueva York (o simularlo en un emulador de dispositivos) y te muestra la atracción o punto de interés más cercano.
Facing Frontend's Existential Crisis
37 min
Facing Frontend's Existential Crisis
The state of frontend development last couple years is in an odd place for the uninitiated web developer and expert alike. Server Components? Resumability? Hydration? Waterfalls? Islands? Why so much focus on water? And why are we even talking about this? In this talk, SolidJS creator Ryan Carniato explores the landscape of modern web development to understand how we got here and what these solutions really solve.
Debate del Panel de React 19
27 min
Debate del Panel de React 19
Ryan Carniato
Evan Bacon
Sathya Gunasekaran
Tim Neutkens
Brooks Lybrand
5 authors
The Talk revolves around React 19 and the React compiler, highlighting its new APIs, optimizations, and impact on frameworks like Next.js. The React compiler has undergone multiple iterations, resulting in improved performance and alignment with developers' expectations. The integration of React with Next.js simplifies rendering and offers free optimizations. There is excitement about the opt-in approach of React Server Components and the potential of underrated features like suspense and transitions. Overall, React's influence on the JavaScript ecosystem and UI libraries is acknowledged and appreciated.
Por qué deberías usar Redux en 2024
33 min
Por qué deberías usar Redux en 2024
Top Content
Mark Erickson explains the history, creation, evolution, and benefits of Redux. Redux was designed to make state updates and action history maintenance easy, incorporating functional programming principles. Redux Toolkit was created to simplify Redux usage. Redux is still a valid choice for its consistent pattern and separation of state from UI. The decision to use Redux depends on the specific use case and the need for centralized state management.
La Búsqueda del Suspense - Dentro de la Magia de React
30 min
La Búsqueda del Suspense - Dentro de la Magia de React
This Talk explores the suspense component in React and its benefits in handling fetched data. It delves into the rendering process of React components and how suspense anticipates requests. The offscreen fiber is introduced as a hidden component that ensures state continuity. The Talk also discusses the usage of suspense for handling concurrent queries and throwing promises, as well as the integration of Redux and the upcoming changes in React 19. Overall, the Talk provides insights into the workings of suspense and its potential applications in software development.
SolidStart 1.0: Echando un vistazo bajo el capó
30 min
SolidStart 1.0: Echando un vistazo bajo el capó
SolidStart is an efficient, unopinionated, and ergonomic full-stack framework that provides great defaults and flexibility. It includes features such as a bundler, a serializer, a server, and a router. The serializer, Seroval, enables streaming and real-time state synchronization between server and client. SolidStart offers powerful file routes, RPCs, and single-flight mutations. It is recommended for building UIs in full applications, Spark, single-page apps, and native apps.
Mejora el rendimiento de tu aplicación con trabajos en segundo plano
29 min
Mejora el rendimiento de tu aplicación con trabajos en segundo plano
This is a background jobs one-on-one talk focusing on the challenges and benefits of using background jobs in software development. It explores the complexity of software development and the impact of distributed applications. The talk highlights the use of Ingest as a reliable solution for executing functions in the background and building drip campaigns. It emphasizes the importance of reliability and architectural choices in software development and discusses the features and capabilities of Ingest, including local development, handling failures, and data retrieval.
Qué hay de nuevo en Astro
30 min
Qué hay de nuevo en Astro
The Talk revolves around the future of JavaScript, React, and Astro. Astro focuses on performance and delivering a better developer and user experience, particularly for content sites. It introduces view transitions, islands, and content as primitives for the next decade of web development. Astro also emphasizes zero JavaScript transitions, native transitions, and a unified content layer. It aims to optimize performance, offer personalized experiences, and ensure compatibility with any tech stack.
La Mano Invisible del Rendimiento de React
31 min
La Mano Invisible del Rendimiento de React
React's improvements in performance, such as the introduction of useEffect, have gone unnoticed. useEffect simplifies synchronizing logic and improves performance by eliminating forced layout calculations. Update batching optimizes rendering by combining multiple set-state calls into a single render. React 18 introduces batched set-state calls for faster performance. React Suspense and selective hydration improve user experience and debugging performance issues is best done practically. Server components, recommended debugging tools, and framework choices are also discussed.
Hackeando las Flechas Etiquetadas
32 min
Hackeando las Flechas Etiquetadas
Labeled Arrows are widely used in conversations, communication, diagrams, and more. The Talk discusses constructing Labeled Arrows, rendering arrows in Canvas, optimizing stroke API calls, using RoughJS for drawing and rendering text, rendering multiline text on Canvas, clearing overlapping area and clipping, comparing clipping and clear rect performance, handling clipping and linking labels to arrows, linking labeled arrows to texts, rotated text and exporting as SVG, masking in SVG and labeling arrows, SVG masking and performance improvements, and optimizing rendering and drawing in Canvas.
Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub
29 min
Estudio de caso: Construcción de componentes React reutilizables accesibles en GitHub
The talk discusses building accessible React components and emphasizes the importance of using the correct HTML elements and ARIA roles for accessibility. It explains how to navigate and select options within a form and how to add supplementary text using Aria described by. The speaker also discusses the benefits of using conditional checkboxes and ARIA disabled to improve the UI. Additionally, the talk explores the role of JavaScript in web accessibility and provides recommendations for testing website accessibility.
Construyendo aplicaciones cifradas de extremo a extremo (Web y React Native)
32 min
Construyendo aplicaciones cifradas de extremo a extremo (Web y React Native)
This Talk explores the concept and advantages of end-to-end encryption in software development. It discusses the challenges of data encryption and conflict resolution in collaborative apps. The integration of end-to-end encryption with conflict-free replicated data types (CRDTs) is highlighted. The talk also covers simplified document sync, real-time sync and encryption, key management, and authentication. Additionally, it mentions the importance of local-first integration, CRDT frameworks, and data search indices.
Haciendo la Gestión del Estado Inteligente
31 min
Haciendo la Gestión del Estado Inteligente
Today's Talk explores intelligent state management in React, highlighting the limitations of traditional state management and the need for innovation. Xdate's store simplifies state management by providing an easy way to update and retrieve data. The integration of AI and state machines enables the creation of intelligent apps that enhance user experience. The combination of state management and AI is achieved through packages like StatelyAI-Agent and the Vercel AI SDK. State machines, reinforcement learning, and large language models play a key role in creating intelligent agents. Graph algorithms can be used to traverse state machines and improve user experience. State agents store knowledge in short-term and long-term memory, while state machines provide guardrails and automation in multi-step processes. The impact of Language Models (LLMs) on UI performance and the future experimentation of building AI models to identify state machines are also discussed.
Control de Acceso Frontend Utilizando Activos Digitales
27 min
Control de Acceso Frontend Utilizando Activos Digitales
Blockchain technology and NFTs provide a decentralized alternative to centralized systems for identity and access control. Smart contracts are immutable programs executed on the blockchain, while NFTs offer unique identifiers and ownership through wallets. Developing the user interface involves using React, Veeam, and Solidity. Deploying smart content requires Remix and a web wallet like Metamask. Integrating smart contracts with React can be done using the Vim library and creating a wallet client. Blockchain technology ensures transparency, trust, and tamper-proof transactions.
Tipos más allá de TypeScript
31 min
Tipos más allá de TypeScript
This Talk explores the concept of types and their significance in software development, particularly in relation to TypeScript. It discusses the limitations and advantages of TypeScript compared to other tools like Flow and Ezno. The Talk emphasizes the role of types in bridging system boundaries and improving code quality. It also highlights the importance of type-checked linting and the future of ESLint. Additionally, the Talk mentions the benefits of faster and easier linting with projects like Biome and OXC, and recommends books for further learning.
Los caminos de Anthony hacia el código abierto - La teoría de conjuntos
37 min
Los caminos de Anthony hacia el código abierto - La teoría de conjuntos
Open source projects can be successful by finding a large intersection of target users. Making extensions universal can lead to increased popularity and collaboration. Collaboration across ecosystems is encouraged to create more maintainable and extendable architectures. Financial support is necessary for open source projects to be sustainable. Contributing to open source can be done by identifying areas for improvement and actively participating in GitHub workflows.
OpenAI en React: Integrando GPT con tu aplicación de React
10 min
OpenAI en React: Integrando GPT con tu aplicación de React
In this Talk, the speaker demonstrates how to create an AI chat bot that can answer questions based on information it was never trained on. They build a basic RAG pipeline in just five minutes using live coding. The speaker also shows how to create embeddings and a vector database, set up a vector search index and endpoint, and modify the chat route to enhance the chat bot's capabilities. The program is run and tested, and the Talk concludes with an invitation to join a workshop for more information.
The Path to High-Performance Canvas Rendering in React
10 min
The Path to High-Performance Canvas Rendering in React
An overview of the top 3 approaches you can apply to boost the rendering performance of HTML Canvas in your React application, based on the lessons we learned during the development of AG Charts.
Bibliotecas de múltiples frameworks con experiencias nativas utilizando React
7 min
Bibliotecas de múltiples frameworks con experiencias nativas utilizando React
The Talk discusses building cross-framework libraries using React to provide a superior experience for developers across different frameworks. The speaker explains the strategy of rendering React components internally and bridging them to different frameworks. They emphasize the importance of simplicity, understandability, and adherence to best practices in third-party libraries. The speaker also highlights the significance of creating a bridge layer and implementing a complete abstraction to ensure the library's reusability and maintenance.
Aplicando los principios de React a una base de datos en la nube
7 min
Aplicando los principios de React a una base de datos en la nube
React principles can break down for full-stack apps, but Convex has built a backend and database to address this. The five React principles discussed include reactivity, consistency, overlapping writes, and caching. Convex's database ensures consistency, handles overlapping writes with transactions, and automatically invalidates caches based on relevant writes. Convex combines the best of SQL and NoSQL databases and applies React principles to simplify app development and improve the user experience.
Remix - La Nueva Create React App
30 min
Remix - La Nueva Create React App
The Talk discusses the transition from Create React App to Vite as a more sustainable and popular alternative. Vite is praised for its simplicity, minimal dependencies, and exit strategy. The speaker emphasizes the importance of frameworks like Remix and React Router in providing solutions for common development challenges. The focus is on merging Remix into React Router to create a unified framework, with an emphasis on code splitting, routing, data fetching, and generating HTML. The future direction includes completing React Router 7 and reserving Remix for a different framework build.
Incluido Técnicamente (El Mejor Tipo de Inclusión)
30 min
Incluido Técnicamente (El Mejor Tipo de Inclusión)
Being technically included leads to better results and UIs. Incorporating multiple team members comes with challenges and compromises. The evolution of tools and technologies has standardized industry practices. Closing the gap between developers and designers requires collaboration and a common source of truth. Embracing change and building trust can improve collaboration between developers and designers.
Fetch Once, Render Everywhere: React Server Components in Expo Router
28 min
Fetch Once, Render Everywhere: React Server Components in Expo Router
React Native and ExpoRouter provide a powerful way to build client-side applications that run on both web and native platforms. Server-driven UI and React Server Components offer dynamic rendering and A-B testing opportunities. Server rendering in native apps allows for the integration of movies and enhances the user and developer experience. The Talk includes live demos showcasing interactions with Spotify and native contacts, as well as currency conversion. Server rendering and React Server Components enable the generation of interactive components and bring modern state and AI to every platform.
Futuro de los Frameworks Frontend Charla Informal
28 min
Futuro de los Frameworks Frontend Charla Informal
Fred K. Schott
Minko Gechev
Ryan Carniato
Daniel Afonso
Aakansha Doshi
Tim Neutkens
6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Del Sitio Web a los Juegos: El Futuro de React Three Fiber
25 min
Del Sitio Web a los Juegos: El Futuro de React Three Fiber
This Talk explores the future of React 3 Fiber and its potential for building immersive 3D worlds and video games on the web. The challenges of building immersive 3D apps and the solutions provided by React 3 Fiber are discussed, including decoupling simulation state updates and enhancing scheduling with stable references. The concept of data-oriented programming and the use of ECS (Entity-Component-System) design pattern for composable data in React 3 Fiber are explored. The Talk concludes by emphasizing the future focus on enabling data-oriented workflows and the integration of a built-in scheduler in future versions of React 3 Fiber.
Y Ahora Entiendes los Componentes del Servidor React
27 min
Y Ahora Entiendes los Componentes del Servidor React
Top Content
In this Talk, Kent C. Dodds introduces React Server Components (RSCs) and demonstrates how to build them from scratch. He explains the process of integrating RSCs with the UI, switching to RSC and streaming for improved performance, and the benefits of using RSCs with async components. Dodds also discusses enhancements with streaming and server context, client support and loaders, server component rendering and module resolution, handling UI updates and rendering, handling back buttons and caching, and concludes with further resources for diving deeper into the topic.
Gestionándonos Gestionando a los demás
26 min
Gestionándonos Gestionando a los demás
The Talk provides a personal human toolkit for debugging human interactions by focusing on depersonalization, understanding power dynamics, setting boundaries, managing emotions, repairing ruptures, and embracing repair. It emphasizes the importance of owning mistakes, recognizing power differentials, and speaking truth to those in positions of power. It also highlights the significance of setting boundaries, both emotional and temporal, and managing dysregulation. The Talk encourages investing in human debugging tools and learning to be better humans together.
Primero Viene el Conflicto, Luego Viene el Crecimiento
6 min
Primero Viene el Conflicto, Luego Viene el Crecimiento
Conflicts in software development often arise from the roles of victim, persecutor, and rescuer in the drama triangle. Shifting to a creator role helps navigate conflicts by focusing on learning and improving. Navigating conflict involves preventing rescue, providing feedback, and challenging others. Managers can play a crucial role as coaches instead of rescuers. By encouraging a shift to the empowerment dynamic, unnecessary drama and conflict can be avoided.
RSCs en Producción: 1 Año Después
24 min
RSCs en Producción: 1 Año Después
This Talk explores the experience of shipping server components in production and highlights the benefits and challenges of using Server Components in Next.js apps. The Talk discusses the deployment of UploadThing and the use of AppRouter for safe production usage. It delves into the implementation of different layouts, data fetching, and code centralization for improved performance. The Talk also covers the use of server components for performance optimization and latency handling. Additionally, it explores the use of Edge and Lambda for partial pre-rendering and the challenges faced with webpack performance and hydration. Overall, the Talk emphasizes the benefits and challenges of working with Server Components in Next.js applications.
Desarrollo web adaptado para 2024
7 min
Desarrollo web adaptado para 2024
Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.
"React Ahora Se Parece a PHP" Dijeron
21 min
"React Ahora Se Parece a PHP" Dijeron
This Talk explores the similarities between React and PHP, particularly in building a guestbook. It showcases the shift towards back-end development and the use of modern PHP frameworks like Drupal. The integration of front-end code in the back-end is discussed, as well as the benefits of React server components. The comparison between PHP 99 and React 2024 highlights the advantages of using React in PHP development. The Talk concludes with excitement for the future of JavaScript, React, PHP, and Drupal.
Resolviendo i18n para Componentes de Servidor de React
7 min
Resolviendo i18n para Componentes de Servidor de React
The Talk discusses internationalization for server components and the challenge of loading translations efficiently. It suggests using import statements in JavaScript to optimize message loading and eliminate the need for namespaces. Tree shaking and tools like Paraglide.js can help minimize message delivery and simplify the process. Overall, the Talk emphasizes the importance of efficient internationalization practices in building multilingual apps.
Superwebapps: Repensando las Aplicaciones de Escritorio con Progressive Web Apps
22 min
Superwebapps: Repensando las Aplicaciones de Escritorio con Progressive Web Apps
MDEdit is a tool that converts Markdown into HTML and provides a what-you-get editor. Progressive web apps offer a comparable user experience on both desktop and mobile devices. The Service Worker allows web apps to remain functional even without an internet connection. The Persistent Storage and File Handling APIs enable web apps to store data and access files on the client's device. Project Fugu provides new APIs, including the Font Access API, to bridge the gap between native apps and web applications.
AsyncLocalStorage vs. React Context
8 min
AsyncLocalStorage vs. React Context
Today's Talk explores the concepts of async local storage and React context. Async local storage is a useful API for retrieving values from a parent component without passing them through multiple components. React context, on the other hand, allows for the creation of context instances in parent components and consumption in child components. The Talk also discusses server actions in React, their limitations, and the use of async local storage in server actions, with an example Cloudflare worker handling web requests and authentication.
Cómo la Alfabetización en Privacidad de Datos Está Moldeando la Infraestructura
19 min
Cómo la Alfabetización en Privacidad de Datos Está Moldeando la Infraestructura
Today's Talk explores the blurring boundaries of infrastructure design, driven by user involvement and evolving technology. User technical literacy and changing technology are reshaping the design landscape, blurring the lines between interface and infrastructure design. Privacy and user needs now play a crucial role in infrastructure design decisions. React's experimental APIs and common UX tools aid in designing infrastructure with user needs in mind. Identifying concerns and security vulnerabilities and collaborating with cross-functional partners are essential for robust infrastructure design.
Perfect Pitch: Revelando la Sinfonía Matemática detrás de un Afinador de Guitarra
22 min
Perfect Pitch: Revelando la Sinfonía Matemática detrás de un Afinador de Guitarra
This Talk provides an overview of an open-source guitar tuner project, covering topics such as pitch detection, web APIs for microphone access, implementation with React and XGS, and data visualization. It explores various pitch detection algorithms, including zero crossing, fast Fourier transform, and autocorrelation. The project utilizes the MediaStream API and Audio API to access user media. The implementation is done with React and Next.js, and includes a utility library for performing pitch estimation and detection. The Talk also discusses future improvements for the project, such as noise cancellation and chord detection.
Presentando Waku: El Framework React Mínimo
19 min
Presentando Waku: El Framework React Mínimo
I will talk about my recent project, Waku, and my React libraries - Rustand, Jotai, and Valisio. Waku is a React framework that depends heavily on React Server Components (RSC) and aims to make capabilities like code splitting, routing, data fetching, and SSR available to developers. It uses React components based on RSC for reusability and provides a fast experience with VIT, hot reload, and hot module replacement. Waku is under active development, aiming for V1 alpha and exploring Waku-specific features. Deploying Waku apps on Vercel is supported, and a plugin system is in consideration for extended support.
Next.js: Reshaping Arquitectura de Aplicaciones Web para la Excelencia en Rendimiento
9 min
Next.js: Reshaping Arquitectura de Aplicaciones Web para la Excelencia en Rendimiento
This Talk discusses how Next.js was used to reshape web app architecture for performance excellence. Next.js allows for server-side rendering (SSR) and client-side rendering (CSR), improving performance and user experience. The implementation of Next.js on the application resulted in faster initial page loads, reduced white screen time, and improved loading states. It is important to use the different rendering options correctly to maximize performance.
React en la Industria de la Robótica Autónoma
11 min
React en la Industria de la Robótica Autónoma
Hamza Hawi, a software engineer at the Autonomous Robotics Research Center, discusses the use of React and Leaflet in robotics. The research center utilizes a mixed fleet of robots and relies on React for mission planning software, while Leaflet is used for mapping and custom layers. Leaflet offers flexibility for different types of vehicles and supports the creation of custom layers like image and video overlays. Additionally, the talk mentions the use of video overlays for weather forecasts and optimizing joystick usage with a strategy design pattern.
Un Mejor Punto de Partida
7 min
Un Mejor Punto de Partida
In this talk, the speaker introduces CreateNextApp and CreateT3App as tools for quickly setting up Next.js projects. CreateT3App has a modular CLI that allows users to select specific technologies. The speaker also discusses E3env, which ensures control of environment variables, and T3 Turbo, a monorepo version of CreateT3App that offers flexibility for installation and deployment.
Potenciando Nx con IA
8 min
Potenciando Nx con IA
Today's Talk discusses empowering NX with AI and building an AI-powered documentation system. NX is a powerful build system with smart features like project graph analysis and dependency management. The AI features include an assistant for streamlined navigation of documentation, AI error explainer, and resource allocation optimization on NX Cloud. The AI-powered documentation system uses embeddings and vector matching to find relevant Docs, utilizing tools like OpenAI, GPT, Superbase, and Vercel's AI SDK.
Por qué el marco de trabajo de pila completa del futuro es un DSL
21 min
Por qué el marco de trabajo de pila completa del futuro es un DSL
The Talk discusses the future of web frameworks, suggesting that DSLs will be the way forward. Wasp is introduced as a tool for generating code for client components, server functions, and database models. The benefits of DSLs in web development are highlighted, including simplifying complex tasks and enabling collaboration with AI. Wasp is praised for its ability to capture full-stack engineering tasks and has gained popularity in the web development community.
Ética de la IA para el Resto de Nosotros
21 min
Ética de la IA para el Resto de Nosotros
AI implementation without considering user benefits can lead to harm and bias. Legal cases highlight the need for AI accountability and addressing biases. Trust, transparency, and efficiency are crucial for building AI systems. Consider the impact of AI on user experience and engage with users. Human oversight is necessary to ensure safety and respect.
El Arte de Ignorar las Mejores Prácticas para el Rendimiento de React
19 min
El Arte de Ignorar las Mejores Prácticas para el Rendimiento de React
This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.
Mejorando los Ecosistemas de React con Observabilidad: Un Profundo Análisis de React con OpenTelemetry
22 min
Mejorando los Ecosistemas de React con Observabilidad: Un Profundo Análisis de React con OpenTelemetry
The Talk discusses the difference between monitoring and observability, highlighting the focus of OpenTelemetry on generating and processing data. It explores the concept of traces and span IDs in distributed tracing and the experimental nature of OpenTelemetry in the browser. The Talk also touches on the complexities of React with server components and demonstrates how distributed tracing can connect traces for different services. The process of adding OpenTelemetry to Next.js and analyzing application and browser traces is explained, along with the importance of context propagation. The Talk concludes with insights on analyzing fetch calls, errors, and the storage limitations of traces.
Navegando por las Innovaciones Modernas en el Frontend
16 min
Navegando por las Innovaciones Modernas en el Frontend
Today's Talk explores modern front-end frameworks React, SolidJS, and Quick. React's popularity is attributed to its component-based architecture and extensive ecosystem. SolidJS distinguishes itself with fine-grained reactivity, efficient memory usage, and developer-friendly API. Quick (QUIC) stands out for its fast load times, resumability, server-side rendering, and prioritization of developer experience. QUIC's on-demand loading feature improves initial page load time by deferring non-critical code execution.
Detrás de Escena de una Prueba de Regresión Visual
19 min
Detrás de Escena de una Prueba de Regresión Visual
Visual Regression Tests are like unit or integration tests but focus on the visual part, allowing developers and QA personnel to identify and address any changes. Challenges in detecting UI changes include elements that are not visible to the human eye and misalignment of elements. Use cases for Visual Regression Tests include testing design system components, responsive designs, and browser renderings. Building a Visual Regression Test Tool involves handling animations, network requests, and flakiness. Docker is the best solution for resolving visual regression issues, and finding the baseline for comparison can be challenging but is handled by the testing tool.
Desarrollo Full Stack utilizando Oracle 23ai
23 min
Desarrollo Full Stack utilizando Oracle 23ai
Today's presentation is about full stack development using the new Oracle 23 AI database and Parse Platform. Parse Server simplifies mobile development by providing a flexible backend solution. The new Oracle 23 AI database container offers benefits like JSON support and pluggable database administration. The Parse Server storage adapter allows for easier management and testing of APIs. The stack also includes features like GraphQL, custom Oracle code execution, message queues, and Oracle Spatial for geofencing and trucking applications.
Arte y Entropía: Introduciendo el Caos en tu Frontend
16 min
Arte y Entropía: Introduciendo el Caos en tu Frontend
Welcome to the talk, Art & Entropy, Introducing Chaos in Your Front-End. Chaos engineering is a practice invented by Netflix in 2011 to observe how a system reacts to intentional disturbance. Applying chaos engineering to the frontend is experimental but necessary, as a broken frontend can negatively impact the user experience. Intentional perturbations in the frontend can be induced through various areas such as HTTP requests with slow 3G network or unstable Wi-Fi. Tools like chaos frontend toolkits can be used to experiment with chaos engineering in the frontend and embrace breakage as part of the application's story.
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
9 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Nested Interactive Elements in Nightmare Accessibility can cause issues with screen readers and other assistive tools, making it difficult for users to interact with websites. Mitigation strategies include unnesting elements, using CSS overlay, and being cautious when modifying roles. It is recommended to involve users of assistive tools in focus groups and share solutions online.
Aplicaciones Móviles Dirigidas por Servidor con React Native
8 min
Aplicaciones Móviles Dirigidas por Servidor con React Native
Today, we explore server-driven UI in React Native, which allows for scalable and complex UIs without incurring tech debt. Project Lightspeed simplifies UI definition and reduces code duplication. Server-driven UI, used by industry giants like Shopify and Airbnb, enables flexibility and platform consistency. Additionally, Evan Bacon's talk at ReactConf introduces the vision of universal React server components in server-driven UI.
Accesibilidad en 2024
23 min
Accesibilidad en 2024
Chandra Carney discusses accessibility in 2024, highlighting the importance of equal access for disabled people and the evolving view of disabilities as civil rights. The talk covers the global accessibility standard WCAG, with versions 2.0, 2.1, and 2.2, and the European standard EN 301549. Updates to laws such as the ADA in the US and the Web Accessibility Directive and European Accessibility Act in the EU are also discussed. The EU reinforces the importance of inclusion and holds businesses accountable for accessibility. Proactive accessibility is emphasized as a requirement and everyone's responsibility.
Un código para gobernarlos a todos
20 min
Un código para gobernarlos a todos
In this talk, the speaker introduces using React Native with Expo to build mobile applications as well as web output. They explore the features of Expo Router, including file-based routing and CSS support. Expo Router also allows for universal links and web layouts, making it possible to build for different platforms from a single code base. The talk covers SEO, meta information, and API routes with Expo Router, and mentions the use of monorepositories with Next and Expo or React Native. The speaker discusses the future of Expo Router, including the upcoming Version 4 and the potential use of ReactStrictDOM and React Server Components. They also highlight the benefits of bringing Tailwind-CSS to React Native.
Los ABC de Green Software y TI Sostenible
16 min
Los ABC de Green Software y TI Sostenible
Machines have a significant carbon footprint, and sustainable IT and green software are important for reducing the environmental impact of technology. The tech sector contributes to greenhouse gas emissions, but moving to the cloud and optimizing resource utilization can help. There are organizations, like the FinOps Foundation and the Green Software Foundation, that provide training and standards for improving sustainability. Individuals can take action by taking free courses, promoting best practices within organizations, and participating in communities and hackathons to make a positive impact.
Animando React con Maestría
22 min
Animando React con Maestría
In this Talk, the speaker discusses how to enhance animation in React apps and optimize animation in browsers. They explain the browser's animation pipeline and the importance of avoiding frame drops. The speaker compares CSS and JavaScript animations, highlighting the benefits of using the requestAnimationFrame API. They also discuss combining CSS and JavaScript animations using the Web Animation API. The Talk concludes with tips on avoiding redundant calculations and provides additional resources for further learning.
React Jam y por qué React es increíble para hacer juegos
7 min
React Jam y por qué React es increíble para hacer juegos
React Jam is an event that showcases the awesomeness of using React for game development, with options for DOM-based, 2D, and 3D games. React offers development tools and optimizations for game development, along with a supportive open-source community. Participating in React Jam and creating games with React can improve skills and provide opportunities to showcase programming abilities.
¡Creando Videos... Con React!
20 min
¡Creando Videos... Con React!
Today's Talk covers creating videos with React, including using Puppeteer and FFmpeg to build videos frame by frame. The ReMotion library offers advantages such as declarative and reusable components, versioning, and automation. The Talk also demonstrates building a video with ReMotion, embedding previews in React, and customization options. It explores rendering at scale with ReMotion's Lambda or Docker options and the rendering process using Lambdas.
Revelando la Salsa Secreta de Next.js en el Edge
48 min
Revelando la Salsa Secreta de Next.js en el Edge
Workshop
Mustafa Azim
Mustafa Azim
Next.js en el Edge con su nueva salsa secreta para una mejor experiencia de usuario y alto rendimiento. Revelaremos la salsa secreta de Next.js y la forma de trabajar para ofrecer la mejor experiencia de usuario en la red Edge y las nuevas características, incluyendo la pre-renderización parcial. Cómo aprovechar el componente del servidor y su alto rendimiento en la red Edge.
Tabla de contenidos:- Introducción a la red Edge- Tiempo de ejecución en el Edge con V8- Casos de uso de las funciones en el Edge- Desplegar un servicio en la red Edge
Aprende a Construir en WEB3 Como si Fuera WEB2
83 min
Aprende a Construir en WEB3 Como si Fuera WEB2
Workshop
David Dal Busco
David Dal Busco
En esta masterclass, construiremos y desplegaremos una aplicación descentralizada desde cero y exploraremos sus características adicionales, todo ello minimizando la complejidad típicamente asociada con el aprendizaje de la tecnología blockchain.Al final de esta masterclass, espero que los asistentes no solo tengan una comprensión más clara del desarrollo blockchain, sino que también se den cuenta de que construir en este espacio puede ser sorprendentemente sencillo y agradable.Mi objetivo es compartir mi entusiasmo por el desarrollo de código abierto y el potencial de Web3.
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Masterclass: Qué son y cómo aprovechar los LLMs
66 min
Masterclass: Qué son y cómo aprovechar los LLMs
Workshop
Nathan Marrs
Haris Rozajac
2 authors
Únete a Nathan en esta sesión práctica donde primero aprenderás a alto nivel qué son los modelos de lenguaje grandes (LLMs) y cómo funcionan. Luego sumérgete en un ejercicio de codificación interactivo donde implementarás la funcionalidad de LLM en una aplicación de ejemplo básica. Durante este ejercicio, adquirirás habilidades clave para trabajar con LLMs en tus propias aplicaciones, como la ingeniería de indicaciones y la exposición a la API de OpenAI.
Después de esta sesión, tendrás una idea de qué son los LLMs y cómo se pueden utilizar prácticamente para mejorar tus propias aplicaciones.
Tabla de contenidos:- Demostración interactiva de la implementación de funciones básicas impulsadas por LLM en una aplicación de demostración- Discutir cómo decidir dónde aprovechar los LLMs en un producto- Lecciones aprendidas sobre la integración con OpenAI / descripción general de la API de OpenAI- Mejores prácticas para la ingeniería de indicaciones- Desafíos comunes específicos de React (gestión de estado :D / buenas prácticas de UX)