June 14 - 18, 2024
React Summit
Amsterdam & Online

React Summit 2024

The biggest React conference worldwide

React Summit is an annual conference on all things React, gathering thousands of Front-end and Full-stack engineers from around the world.



This edition of the event has finished, the latest updates of this React Conference are available on the Brand Website.
Ag GridMUICoduxChainlink LabsOracleCKEditorStoryblokJetBrainsSisenseMongoDBDataStaxConvexFocusReactiveChromaticPicnic
AI for React Developers: Opportunities, Learning, and Innovation
9 min
AI for React Developers: Opportunities, Learning, and Innovation
Top Content
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.
And Now You Understand React Server Components
27 min
And Now You Understand React Server Components
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.
RSCs In Production: 1 Year Later
24 min
RSCs In Production: 1 Year Later
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.
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. 
React 19 Panel Discussion
27 min
React 19 Panel Discussion
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.
Case Study: Building Accessible Reusable React Components at GitHub
29 min
Case Study: Building Accessible Reusable React Components at 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.
Llms Workshop: What They Are and How to Leverage Them
66 min
Llms Workshop: What They Are and How to Leverage Them
Workshop
Nathan Marrs
Haris Rozajac
2 authors
Join Nathan in this hands-on session where you will first learn at a high level what large language models (LLMs) are and how they work. Then dive into an interactive coding exercise where you will implement LLM functionality into a basic example application. During this exercise you will get a feel for key skills for working with LLMs in your own applications such as prompt engineering and exposure to OpenAI's API.
After this session you will have insights around what LLMs are and how they can practically be used to improve your own applications.
Table of contents: - Interactive demo implementing basic LLM powered features in a demo app- Discuss how to decide where to leverage LLMs in a product- Lessons learned around integrating with OpenAI / overview of OpenAI API- Best practices for prompt engineering- Common challenges specific to React (state management :D / good UX practices)
Integrating LangChain with JavaScript for Web Developers
92 min
Integrating LangChain with JavaScript for Web Developers
Workshop
Vivek Nayyar
Vivek Nayyar
Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
Future of Frontend Frameworks Fireside Chat
28 min
Future of Frontend Frameworks Fireside Chat
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.
OpenAI in React: Integrating GPT with Your React Application
10 min
OpenAI in React: Integrating GPT with Your React Application
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.
Why You Should Use Redux in 2024
33 min
Why You Should Use Redux in 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.
Build a Powerful Datagrid With AG Grid
168 min
Build a Powerful Datagrid With AG Grid
WorkshopFree
Brian Love
Brian Love
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
Building Your Generative AI Application
82 min
Building Your Generative AI Application
WorkshopFree
Dieter Flick
Dieter Flick
Generative AI is exciting tech enthusiasts and businesses with its vast potential. In this session, we will introduce Retrieval Augmented Generation (RAG), a framework that provides context to Large Language Models (LLMs) without retraining them. We will guide you step-by-step in building your own RAG app, culminating in a fully functional chatbot.
Key Concepts: Generative AI, Retrieval Augmented Generation
Technologies: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow
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.
Making State Management Intelligent
31 min
Making State Management Intelligent
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.
How to Build Front-End Access Control with NFTs
88 min
How to Build Front-End Access Control with NFTs
WorkshopFree
Solange Gueiros
Solange Gueiros
Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.
Introducing Waku: The Minimal React Framework
19 min
Introducing Waku: The Minimal React Framework
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.
Build a Full Stack React Native App with Oracle 23ai
37 min
Build a Full Stack React Native App with Oracle 23ai
WorkshopFree
Doug Drechsel
Doug Drechsel
In this workshop, you will set up a local full-stack environment and create a React Native Mobile app that runs against that stack. 
Agenda:- Install Oracle 23ai Docker container- Build and run Parse Server with the new Oracle Storage Adapter - Build and run a Walking History React Native mobile app against the stack
Walking History is a React Native application that allows you to walk around New York City (or simulate that in a device emulator) and it tells you about the closest attraction or point of interest.


Facing Frontend's Existential Crisis
37 min
Facing Frontend's Existential Crisis
I'm honored to be here today. The past decade has been dominated by single-page apps. Loading JavaScript is about 35 times slower than images on low-end devices. Server rendering involves sending more JavaScript and HTML, increasing payload and effort. React was developed for complex apps, but business needs have pushed towards simpler websites. Metrics for testing frameworks include code execution costs, bundle size, and payload size. Islands, popularized by frameworks like Astro and Fresh, break up apps into sections for server rendering. React's solution is to use islands and communicate in a diffing format. Quik reduces code execution and size, eliminating double-serializing. Frameworks like Solid Start provide tools for server rendering in a lightweight package. WASM frameworks have improved in performance. Next.js partial pre-rendering and HTMX offer solutions for sites with less interactivity.
Invisible Hand of React Performance
31 min
Invisible Hand of React Performance
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.
Unveiling Next.js Secret Sauce on the Edge
48 min
Unveiling Next.js Secret Sauce on the Edge
Workshop
Mustafa Azim
Mustafa Azim
Next.js on the Edge with its new secrets sauce for better user experience and high performance. We will unveil Next.js secret sauce and the way of working to deliver the best user experience in Edge network and the new features including partial pre-rendering. How to make use of the Server component and its high performance on Edge network.
Table of the contents:- Intro to the Edge network- Edge runtime in V8- Use cases of the edge functions- Deploy a service on the edge network
Webdevelopment Tailored for 2024
7 min
Webdevelopment Tailored for 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.
The Suspense Quest - Inside React's Magic
30 min
The Suspense Quest - Inside React's Magic
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.
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.
Improve Your App Performance With Background Jobs
29 min
Improve Your App Performance With Background Jobs
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.
Remix — The New Create React App
30 min
Remix — The New 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.
Types Beyond TypeScript
31 min
Types Beyond 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.
Building End-to-End Encrypted Apps (Web & React Native)
32 min
Building End-to-End Encrypted Apps (Web & 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.
Anthony's Roads to Open Source - The Set Theory
37 min
Anthony's Roads to Open Source - The Set Theory
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.
The Art of Ignoring Best Practices for React Performance
19 min
The Art of Ignoring Best Practices for React Performance
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.
Learn to Build on WEB3 Like It’s WEB2
83 min
Learn to Build on WEB3 Like It’s WEB2
Workshop
David Dal Busco
David Dal Busco
In this session, we will build and deploy a decentralized application from scratch and delve into its additional features, all while minimizing the complexity typically associated with learning blockchain technology.By the end of this session, I hope attendees will not only have a clearer understanding of blockchain development, but also realize that building in this space can be surprisingly straightforward and enjoyable.My goal is to share my enthusiasm for open-source development and the potential of Web3.
Server-Driven Mobile Apps With React Native
8 min
Server-Driven Mobile Apps With 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.
Enhancing React Ecosystems with Observability: A Deep Dive into React with OpenTelemetry
22 min
Enhancing React Ecosystems with Observability: A Deep Dive into React with 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.
Next.js: Reshaping Web App Architecture for Performance Excellence
9 min
Next.js: Reshaping Web App Architecture for Performance Excellence
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.
From Websites to Games: The Future of React Three Fiber
25 min
From Websites to Games: The Future of 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.
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.
React Jam and Why React Is Awesome for Making Games
7 min
React Jam and Why React Is Awesome for Making Games
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.
Accessibility in 2024
23 min
Accessibility in 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.
SolidStart 1.0: Peeking Under the Hood
30 min
SolidStart 1.0: Peeking Under the Hood
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.
Managing Ourselves Managing Each Other
26 min
Managing Ourselves Managing Each Other
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.
Applying React Principles to a Cloud Database
7 min
Applying React Principles to a Cloud Database
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.
Solving i18n for React Server Components
7 min
Solving i18n for React Server Components
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.
One Code to Rule Them All
20 min
One Code to Rule Them All
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.
Animating React With Finesse!
22 min
Animating React With Finesse!
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 Now Looks Like PHP" They Said
21 min
"React Now Looks Like PHP" They Said
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.
Full Stack Development Using Oracle 23ai
23 min
Full Stack Development Using 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.
Superwebapps: Rethinking Desktop Applications With Progressive Web Apps
22 min
Superwebapps: Rethinking Desktop Applications With 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.
Hacking into Labeled Arrows
32 min
Hacking into Labeled Arrows
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.
Nested Interactive Elements: A Nightmare in Accessibility
9 min
Nested Interactive Elements: A Nightmare in Accessibility
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.
Creating Videos... With React!
20 min
Creating Videos... With 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.
Navigating Modern Frontend Innovations
16 min
Navigating Modern Frontend Innovations
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.
Technically Included (The Best Kind of Included)
30 min
Technically Included (The Best Kind of Included)
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.
Behind the Scenes of a Visual Regression Test
19 min
Behind the Scenes of a Visual Regression Test
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.
React in the Autonomous Robotics Industry
11 min
React in the Autonomous Robotics Industry
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.
What’s New in Astro
30 min
What’s New in 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.
First Comes Conflict, Then Comes Growth
6 min
First Comes Conflict, Then Comes Growth
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.
Why the Full-stack Framework of the Future is a DSL
21 min
Why the Full-stack Framework of the Future is a 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.
How Data Privacy Literacy Is Shaping Infrastructure
19 min
How Data Privacy Literacy Is Shaping Infrastructure
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.
Art & Entropy: Introducing Chaos to Your Frontend
16 min
Art & Entropy: Introducing Chaos to Your 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.
A Better Starting Point
7 min
A Better Starting Point
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.
Empowering Nx with AI
8 min
Empowering Nx with AI
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.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
22 min
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
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.
Frontend Access Control Using Digital Assets
27 min
Frontend Access Control Using Digital Assets
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.
Cross-Framework Libraries with Native Experiences Using React
7 min
Cross-Framework Libraries with Native Experiences Using 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.
Ethical AI for the Rest of Us
21 min
Ethical AI for the Rest of Us
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.
The ABCs of Green Software & Sustainable IT
16 min
The ABCs of Green Software & Sustainable IT
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.