Upcoming events
JSNation 2025
JSNation 2025
Jun 12 - 16, 2025
React Summit 2025
React Summit 2025
Jun 13 - 17, 2025
Node Congress 2025
Node Congress 2025
Apr 17, 2025
JSNation US 2025
JSNation US 2025
Nov 17 - 20, 2025
React Summit US 2025
React Summit US 2025
Nov 18 - 21, 2025
React Advanced 2025
React Advanced 2025
Nov 27 - Dec 1, 2025
Web Development insights directly from framework authors and early adopters.
Talks from our events
Productivity Conf for Devs and Tech Leaders
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
React Day Berlin 2024
React Day Berlin 2024
Dec 13 - 16, 2024
React Summit US 2024
React Summit US 2024
Nov 18 - 22, 2024
JSNation US 2024
JSNation US 2024
Nov 18 - 21, 2024
React Advanced 2024
React Advanced 2024
Oct 25 - 29, 2024
TechLead Conference 2024
TechLead Conference 2024
Jun 15 - 19, 2024
React Summit 2024
React Summit 2024
Jun 14 - 18, 2024
C3 Dev Festival 2024
C3 Dev Festival 2024
Jun 14 - 15, 2024
JSNation 2024
JSNation 2024
Jun 13 - 17, 2024
Vue.js Live 2024
Vue.js Live 2024
Apr 25 - 26, 2024
Node Congress 2024
Node Congress 2024
Apr 4 - 5, 2024
DevOps.js Conf 2024
DevOps.js Conf 2024
Feb 15 - 16, 2024
Articles
Top ideas
Trending today
Why You Should Use Redux in 2024
React Summit 2024React Summit 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.
Unreal Engine in WebAssembly/WebGPU
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Unreal Engine in WebAssembly/WebGPU
Top Content
Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
You Can’t Use Hooks Conditionally… or Can You?
React Summit 2023React Summit 2023
28 min
You Can’t Use Hooks Conditionally… or Can You?
Top Content
Watch video: You Can’t Use Hooks Conditionally… or Can You?
The Talk discusses the use of the Use hook in React and its ability to be used conditionally. It explains the concept of the fiber tree and how hooks values are stored in memory. The Talk also delves into the conditional use of useContext and how it differs from useState. It explores the process of updating context values and optimizing context rendering. The role of the provider in managing context values and rendering is emphasized.
AI-Powered Frontend Development: Building Better UIs Faster
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
19 min
AI-Powered Frontend Development: Building Better UIs Faster
Today's Talk introduces the use of large language models (LLMs) to enhance front-end development. LLMs can act like our brains by maximizing the good parts and minimizing the bad parts. A demo in Cursor, an IDE, showcases how LLMs can be used with the builder.io Figma plugin. The Talk emphasizes the automation of tasks, such as adding a settings button and resolving errors, with the AI agent. Feedback and manual verification are crucial to ensure desired results. Tests and continuous iteration are recommended for stronger guarantees of correctness. Monitoring and guiding the AI agents is important to stay on track. Connecting to other tools like Figma and using AI prompting can further enhance code generation. The CLI enables code base integration and parallel development. Visual prototyping and seamless updates are possible with the Builder tool. Overall, the Talk highlights how LLMs can revolutionize front-end development by automating tasks, improving efficiency, and facilitating collaboration.
How to Master Cursor for Rapid Development
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
29 min
How to Master Cursor for Rapid Development
I'll walk through some of the ways I set up Cursor to help speed up my full stack workflow. The main thing to check is indexing the code base. Cursor also looks at the get graph file relationships. Another important setting is large context, which allows absorbing larger files and multiple files of context in the prompt window. Iterating on lints helps find and fix errors faster. Web search tools and uploading your own docs are also available to enhance the prompt window. These are all preferences, including auto select, YOLO mode, and models. Rules are also crucial as they guide the model to understand your workflow. Implement best practice error handling and adjust rules as the models and system prompts change. MCPs like sequential thinking, Postgres SQL, and Puppeteer help refine thoughts and automate workflows. Creating a product requirements document in a .md file allows AI to ground itself in project information. The game was successfully implemented and all items were checked off. Debugging strategies involve adding debug logs to help identify issues. Use commit messages to provide clear documentation for changes. Demonstrating the use of AI in debugging by setting up and utilizing debug logs. Showcasing the benefits of providing debug information to resolve issues. Overview of various topics including indexing rules, linting, MCPs, PRDs, tech stacks, and checklists.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.
Simplifying Data Management in React With React Query
React Advanced 2023React Advanced 2023
16 min
Simplifying Data Management in React With React Query
Watch video: Simplifying Data Management in React With React Query
Today's talk introduces React Query, a library that simplifies data management in React applications. It covers the core concepts and features of React Query, including data fetching, caching, and mutation. The talk also discusses query invalidation and cache time, highlighting how React Query optimizes performance and reduces code complexity.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced 2023React Advanced 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
Top Content
Watch video: Nested Interactive Elements: An Nightmare in Accessibility
Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.
Featured
Short takes
AI in Front-End Dev: Your Creative Partner or Job Snatcher?
JSNation 2024JSNation 2024
8 min
AI in Front-End Dev: Your Creative Partner or Job Snatcher?
Top Content
AI in front-end development empowers developers to take on more ambitious projects and innovate at a faster pace. Natural language is a new programming language that can be used for coding, learning, and automating complex tasks. However, it is important to remember that AI is a supplement to human capabilities, not a replacement. Developers need to evolve their skills and stay ahead of emerging technologies to work effectively with AI. The demand for AI engineers is high.
JSR – Next Generation JavaScript Registry
JSNation 2024JSNation 2024
6 min
JSR – Next Generation JavaScript Registry
JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.
Build Your Own Component Library, With `Shadcn-vue`
Vue.js Live 2024Vue.js Live 2024
7 min
Build Your Own Component Library, With `Shadcn-vue`
Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.
Forget Polygons – Gaussian Splats, the New Approach to Photorealistic 3D Graphics
JSNation 2024JSNation 2024
5 min
Forget Polygons – Gaussian Splats, the New Approach to Photorealistic 3D Graphics
Today, I'll be talking about GspotJS and Gaussian Splatting, a revolutionary graphics pipeline that can render high-fidelity scenes at 144 FPS. Gaussian Splatting is a technique that converts data directly into an image using Gaussians. GspotJS is a lightweight JavaScript library for Gaussian Splat rendering, with features like 4D rendering. The library aims to provide a simple and speedy way to view Splats on the web, while more advanced applications can use Mackellog Gaussian Splats 3D. Both Gaussian Splatting and gSplotJS are open-source.
Can AI Turn Us Into 10x Developers?
JSNation 2024JSNation 2024
7 min
Can AI Turn Us Into 10x Developers?
AI can help developers become 10x more efficient by leveraging powerful GPUs. Codium is an AI developer tool that can accelerate learning, analyze dependencies, and provide personalized coding experiences. It abstracts away complexity and allows developers to focus on building user experiences. Codium aims to transform the software industry and empower developers to become 10x engineers.
What’s the Deal With Drizzle ORM?
JSNation 2024JSNation 2024
8 min
What’s the Deal With Drizzle ORM?
Drizzle is a TypeScript ORM that leverages SQL knowledge, is fast and has its own ecosystem. It manages database schema and supports prepared statements for peak performance. Drizzle provides a complete set of tools, including Drizzle Studio and query runners. The ecosystem includes GraphQL integration and community-built tools.
Building React Primitives to Power In-App Messaging
React Summit US 2024React Summit US 2024
8 min
Building React Primitives to Power In-App Messaging
Watch video: Building React Primitives to Power In-App Messaging
Hi, everyone. I'm Chris, the CTO at Nock. We help product teams power user-centric cross-channel notification experiences. Today, I'll talk about extending the abilities of our in-app messaging and how you can power any kind of in-app messaging using our platform. We optimize for flexibility, customization, and a shallow learning curve. Our pre-built React components include a banner, modal, card, and notification feed. All of this comes out-of-the-box, supporting light mode and dark mode. Easily show modals and announcements with no additional code. Own the rendered components for performance and customization. Build custom components with minimal code. Use hooks for fetching data and real-time updates. Noc provides a schema for strong data integrity.
Simplifying Analytics in React Apps
React Summit US 2024React Summit US 2024
7 min
Simplifying Analytics in React Apps
I'm presenting on simplifying analytics in React apps. We want to build embedded analytics for developers using common languages like JavaScript and TypeScript. By reducing backend complexity, developers can prioritize building dynamic data-rich UIs. BI platforms didn't deliver the customization required, so we aim to use React to create a powerful SDK. The SDK involves constructing a semantic layer, building reusable components in React, and doing cool things with it. We simplify the data model and generate a TypeScript representation. Sisense provides APIs for authentication, row-level security, and customization. We can now build React components directly off the generated model. The data model called datasource enables simple UI and eliminates the need for front-end engineers to write SQL API calls. We built a near-production-ready application using a React template and Sisense as the backend. With the simplified system and a semantic layer, we can now use large language models for chatbot-driven visualizations and dashboard layouts. This framework enables faster development and alternative methods for generating interactive React objects.
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024React Summit 2024
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.
Rebooting Joy: Harnessing Playfulness and Hobbies to Redefine Work in the Tech World
TechLead Conference 2024TechLead Conference 2024
6 min
Rebooting Joy: Harnessing Playfulness and Hobbies to Redefine Work in the Tech World
Reignite your passion for tech by incorporating playfulness and hobbies into your daily grind. Organize mini hackathons, engage in pair programming, and dedicate time for curiosity hours. Helping others and participating in hack-a-thons are great ways to stay excited. What's one hobby or playful activity that could reignite your passion?
Latest
AI-Powered Frontend Development: Building Better UIs Faster
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
19 min
AI-Powered Frontend Development: Building Better UIs Faster
Today's Talk introduces the use of large language models (LLMs) to enhance front-end development. LLMs can act like our brains by maximizing the good parts and minimizing the bad parts. A demo in Cursor, an IDE, showcases how LLMs can be used with the builder.io Figma plugin. The Talk emphasizes the automation of tasks, such as adding a settings button and resolving errors, with the AI agent. Feedback and manual verification are crucial to ensure desired results. Tests and continuous iteration are recommended for stronger guarantees of correctness. Monitoring and guiding the AI agents is important to stay on track. Connecting to other tools like Figma and using AI prompting can further enhance code generation. The CLI enables code base integration and parallel development. Visual prototyping and seamless updates are possible with the Builder tool. Overall, the Talk highlights how LLMs can revolutionize front-end development by automating tasks, improving efficiency, and facilitating collaboration.
Building the Next Generation of AI Developer Tools
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
26 min
Building the Next Generation of AI Developer Tools
Hello, everyone. My name is Krzysztof, and I will be talking today about developer tools, AI, and how we use both of those to create the next generation of developer tools. GitHub Copilot, released in 2021, revolutionized developer tools by automating boring parts of coding and keeping developers in a state of flow. Suggestions are shown directly in the editor and clearly separated from the real code. Chat interfaces, like Chat GPT, solve quality of response issues and are useful when flow doesn't exist. The next generation of tools focuses on structured exchange, user control, and iteration. GitHub Spark allows users to create small applications without focusing on code. Designing applications with the user in mind and handling ambiguity is important. Real-world software tasks require human guidance, and exploring new ideas beyond chat-based AI is necessary. Always consider the human aspect and ethical considerations when using AI-powered features.
ChatGPT Unleashed: Revolutionizing Web Development from Idea to Deployment
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
22 min
ChatGPT Unleashed: Revolutionizing Web Development from Idea to Deployment
Welcome to Chad GPT, Unleashed, Revolutionizing Web Development. I'll share my journey and lessons learned about GPT-03-Mini-High. TLDR: Good with slower-changing technologies, poor with rapidly moving ones. Let's test the application by building a vision board. User stories, requirements, acceptance criteria, and design principles were well-executed. Mobile responsiveness, accessibility, security, and scalability are important. LLM struggled with error handling and installation, but we managed to troubleshoot. The app creation process was painful, but we created a better version. Some end-to-end tests failed. Automated tests didn't consider challenges and project structure. Continuous integration failed during deployment, but manual deployment worked. Majority of LLM tools worked. AI's impact on hiring: current roles remain, but new hires are affected. AI enhances my abilities, reducing the need for hiring. Thank you for your time.
The Age of Universal React: What’s the Catch?
React Day Berlin 2024React Day Berlin 2024
30 min
The Age of Universal React: What’s the Catch?
Mo Khazali
Anisha Malde
2 authors
We're going to talk about the age of universal React, the next paradigm shift of React. Universal React is cross-platform and follows the principle of learn once, write once, and run anywhere. React Native is born as a declarative way to build iOS and Android apps. React Native components and APIs are implemented in an interoperable way with React DOM, powering a large part of Twitter's web platform. Code sharing in a universal React app maximizes code reuse, reduces duplication, and allows platform optimization. React Native for Web is the compatibility layer that enables universal development, handling translations between React Native and React Dom. Expo is the framework of choice for React Native, with Expo Router V3 completing the universal story. Challenges in achieving parity with React Native Core due to specific platform implementations. React Strict DOM prioritizes web, bringing web APIs to React Native. Taking a universal React approach can improve performance across platforms. React Native Web and React Strict DOM prioritize performance and accessibility.
The Roof Is on Fire?
JSNation US 2024JSNation US 2024
18 min
The Roof Is on Fire?
Hi there. I'm Teodor, a web developer building Proxima, an open source analytics platform. In June 2021, a wildfire burned down a huge area near my house in Athens. I had an idea to build a low-cost, open, and accessible device to monitor and alert authorities of fire outbreaks. JavaScript is event-driven and perfect for IoT applications. DeviceScript is a versatile framework for writing code targeting IoT development boards. We can expand device functionality by adding sensors for temperature, humidity, gas, and flames. We can establish a mesh network using Painless Mess for wider coverage. LoRa can be used for off-grid emergency setups. AI and ML techniques can be applied for failure forecasting and running inference on the device. The VALS BME 688 gas sensor can improve detection accuracy. USC team is working on a model to predict high wildfire danger areas. Innovation thrives at the intersection of ideas and technology.
Little Bits of Iterative Component Design
React Day Berlin 2024React Day Berlin 2024
10 min
Little Bits of Iterative Component Design
Hey, everybody. My name is Daniel, and I like rocks. I'm a design system leader at Personia and something that I do like that is also a bit nerdy is math. I like math. There's many ways to solve a problem. One way to build it in an API is to make it with props. The next possible way could be composable components. Which one is better? Senior engineer answer would be, well, it depends. Props are really good with TypeScript. On the other hand, composition... You could have other types of components. You could create other types and put them and still work. Let's say I want to wrap it in a tooltip. You can see a bit of the differences in approach. This is a masonry layout. What kind of strategies can I use as an engineer for making my own decisions? One that I know is this one called YACNI. Over time, this creates tech debt. If you make a little bit of effort and make this reusable, it can go a long way in terms of API. And then the special situation that you want to handle just handling outside. At some point in my career, I was using a lot of YACNI and I started to work at Shopify in an open source project and I started to care about the APIs that I released because they are supposed to enable people to do the things they want to do and if it doesn't happen, then it's really sad. It's the same with design systems. If you make an API that is not good, there's a cost to it. How can I make good APIs? Let's see some of the big ones. TC39, they are the group that's actually creating the new JavaScript APIs. I made my own process that I call iterative component design where I try to figure out what is good enough for a release before putting it out. The step one is to prototype. And this is, again, doing Yagni. I think you can have better APIs if you follow a proper process. Second step, I usually write an RFC. When you do this, you realize what parts of your API sound really weird to explain. And the final step here is to share. Sharing is difficult because sometimes we have pride as developers and we don't want to take feedback and we just want to release immediately. But the problem with not getting feedback is that when you're working with a problem, you're unable to see objectively anymore. Sharing is good. All the APIs, there's never a state of nirvana for APIs. There's always feeling like something is not right, something is broken here. All my time working, I felt that we never got there and probably we will never. So all you can do is probably enjoy the process of creating APIs. That's my final advice. Thank you.
Maximize Productivity with AI Agents
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
25 min
Maximize Productivity with AI Agents
I'm Tejas Kumar, a software developer with over 20 years of experience. AI agents are defined as entities that act on behalf of users or groups to produce specific effects. Agents consist of an orchestration layer, a language model, and tools represented as JSON functions. Langflow is an open-source tool that allows users to build their own AI agents by connecting language models and tools. Composio is a tool that enhances agent capabilities by offering integrations and apps, such as Google Calendar integration. MCP (Model Context Protocol) is a way to share context with models and extend their capabilities. It allows functions to be made available to models over standard input/output or an HTTP endpoint. MCP can be used with GitHub to perform various tasks like searching and fixing code issues. The Talk covered the basics of AI agents, building agents with Langflow and enhancing them with Composio, and using MCP with GitHub. The speaker encouraged audience questions and exploration of these concepts.
React Server Components: Elevating Speed, Interactivity, and User Experience
React Summit US 2024React Summit US 2024
20 min
React Server Components: Elevating Speed, Interactivity, and User Experience
Watch video: React Server Components: Elevating Speed, Interactivity, and User Experience
My name is Aurora, a web developer from Norway. Today, I'll be teaching you how to elevate speed, interactivity, and user experience with React components. I'll be coding a project task manager and improving it using Next.js, Prisma, Azure SQL, and Tailwind CSS. We will review the code, starting with the important layout component. We will also learn how to improve navigation and data fetching, enhance visual stability and user experience, fix search functionality, and add category filters with loading states. Additionally, we will explore the use of React 19 hooks to enhance interactivity. Finally, we will optimize rendering and achieve improved Lighthouse scores for better performance. Overall, this Talk covers a range of techniques and tools to enhance React projects and deliver a better user experience.
Making an Emulator in JavaScript?
React Day Berlin 2024React Day Berlin 2024
29 min
Making an Emulator in JavaScript?
Hello, everyone. Thank you for being here instead of the other talk. Emulation is when something pretends to be something else, like a computer pretending to be a PlayStation 1. There are two types of emulation: hardware emulation and software emulation. Software emulation is when the software mimics the behavior of a console. JavaScript is not the ideal language for emulation, but it can still be used. The speaker built an emulator for Chip 8, a simple console from the 70s, as a fun project. The emulator focuses on the screen and utilizes Canvas. The Chip 8 screen is small, measuring 64 by 32, and is monochrome. The CPU and memory are important components in emulation, and understanding hexadecimal notation and bitwise operators is crucial. The speaker explains the use of hexadecimal notation and bitwise operators in manipulating bytes. Creating a switch statement for instructions is an important step in the emulator development. The legality of emulation is discussed, along with advice on not providing ROMs or proprietary BIOS. Emulation projects can be complex, and reverse engineering consoles is mentioned. The speaker highlights the performance of JavaScript in emulating consoles. They also mention their availability for further questions and provide information on how to follow their work.
How to Show 10 Million of Something: Frontend Performance Beyond Memoization
React Day Berlin 2024React Day Berlin 2024
29 min
How to Show 10 Million of Something: Frontend Performance Beyond Memoization
Today's Talk focused on performance optimization in React apps, specifically in handling and rendering enormous amounts of data. The speaker discussed various techniques and tools to achieve better performance, such as optimizing data relay, rendering, data processing, memory usage, and denormalization. They also highlighted the importance of optimizing network performance, payload size, and request handling. The Talk emphasized the need to measure before optimizing, focus on bottlenecks, and make small improvements that actually benefit users. Overall, the Talk provided valuable insights and recommendations for improving performance in React apps.
Popular
JavaScript
Future of Frontend Frameworks Fireside Chat
React Summit 2024React Summit 2024
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.
Testing: Do More With Less
JSNation 2024JSNation 2024
27 min
Testing: Do More With Less
This talk focuses on practical approaches for testing Node.js applications, including the use of Dora metrics and the testing trophy strategy. It emphasizes the importance of covering critical flows with integration and end-to-end tests, while also considering the cost and speed of different test types. The speaker recommends mocking third-party services and using snapshot testing, but warns about the potential for false positives. Playwright is suggested as a preferred tool, and the importance of automated test execution is emphasized.
Temporal: Modern Dates and Times in JavaScript
JSNation US 2024JSNation US 2024
22 min
Temporal: Modern Dates and Times in JavaScript
I'll speak today about the Temporal proposal, which adds modern date and time handling to JavaScript. Temporal is an API that'll be available in browsers soon and will add a built-in library for dates and times, avoiding the need for external libraries like Moment. It offers strong typing with different types for different data, such as calendar dates with or without time. Temporal objects are immutable and designed to work with JavaScript's internationalization facilities. It addresses deficiencies in the global Date object and introduces types like instant and plain types for accurate representation of time and dates across time zones. With the old Date, representing a date without a time can be problematic, especially in time zones where midnight is skipped due to daylight saving time. Temporal introduces types like PlainDate, PlainTime, PlainYearMonth, PlainMonthDay, and ZonedDateTime to accurately represent different scenarios. Additionally, there is a type called Duration for arithmetic operations and unit conversion. Now that I've introduced you to the cast of characters in Temporal, it's time to show how to accomplish a programming task. We'll start with an easy task: getting the current time as a timestamp in milliseconds using the instant type. To convert between Temporal types, you can either drop or add information. The toZonedDateTime method is used for conversion and requires adding a time zone and a time. Although Temporal objects are immutable, you can create new objects with replaced components using the with method. Migrating from the old Date object to Temporal offers a more reliable solution and avoids potential bugs. Check out the documentation for more details and enjoy using Temporal in your codebase!
Webdevelopment Tailored for 2024
React Summit 2024React Summit 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.
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured WorkshopPro
Adrian Hajdin
Adrian Hajdin
During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challeng...
Peace, Love and JavaScript
Node Congress 2024Node Congress 2024
17 min
Peace, Love and JavaScript
The OpenJS Foundation supports the entire JavaScript ecosystem and thousands of open source projects. They follow a neutral nonprofit organization with separate business and technical governance to minimize drama. Rebooting governance and addressing intellectual property can also help reduce conflicts. OpenJS provides collaboration spaces and support in various areas for open source projects. They foster a collaborative environment and invite participation in their projects.
Building a JS Engine -- For Fun!
JSNation 2024JSNation 2024
9 min
Building a JS Engine -- For Fun!
Top Content
The Talk discusses the basics of building a JS engine, highlighting the complexity and feature completeness of existing engines. It emphasizes the possibility of creating a simpler engine tailored to specific use cases and target audiences. The speaker suggests starting anywhere in the process and provides tips on using parser libraries, implementing runtime features, and ensuring correctness through testing. Additionally, the Talk encourages exploring JavaScript standards and engaging with the open-source community.
React
If You Were a React Compiler
React Summit US 2024React Summit US 2024
26 min
If You Were a React Compiler
Top Content
In this talk, the speaker aims to build an accurate understanding of how the new React compiler works, focusing on minimizing re-renders and improving performance. They discuss the concept of memoization and how it can be used to optimize React applications by storing the results of function calls. The React compiler automates this process by analyzing code, checking dependencies, and transpiling JSX. The speaker emphasizes the importance of being aware of memory concerns when using memoization and explains how the React compiler detects changes in function closure values. They also mention the Fibre Tree, which drives the reconciliation process and helps optimize performance in React. Additionally, the speaker touches on JSX transpilation, compiler caching, and the generation of code. They encourage developers to understand the code generated by the compiler to optimize specific sections as needed.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
Let's Build Suspense 🥁
React Summit US 2024React Summit US 2024
20 min
Let's Build Suspense 🥁
Hi, my name is Julian and I am super excited to be speaking at React Summit this year. Today, I will be talking about Suspense on the server and its importance in React server components. React server components allow us to differentiate between static and dynamic components, improving performance and user experience. Suspense improves performance by introducing streaming and out-of-order streaming. We can implement suspense on the server by creating a suspended object to store the suspended children and swapping out the loading state for the actual content using custom elements. Multiple suspense boundaries can be used to render individual loading states for different sections, improving the user experience.
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
React Summit US 2024React Summit US 2024
30 min
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Top Content
Watch video: Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Hi folks, in this Talk we learn about React and Chrome DevTools. We explore the new AI Assistant panel in DevTools that helps with UI tweaking. React DevTools now supports Gemini AI model for error fixing. Extensibility is important and React DevTools has features like highlight updates and server components. We also learn about server logging in the browser console and toggling suspense fallbacks. Browser DevTools allow experimenting with local overrides and improving color contrast. Advanced features include overriding headers, network panel customization, and performance tooling. We also discuss Core Web Vitals, optimizing pages, and debugging UI with DevTools. There are fun tips for enhancing animations and logging workflow. The Talk ends with Q&A and sharing/removing features based on user feedback.
Sketching with Code: Integrating React and p5.js
React Summit US 2024React Summit US 2024
30 min
Sketching with Code: Integrating React and p5.js
Hello React Summit! Senior software engineer building educational experiences at NewZella. Passionate about helping people get involved with open source. Creative coding journey started on Neopets. Have a CodePen with examples in p5.js, svg.js, and CSS. Talk is about p5.js and React, building an application to generate a grid pattern. Incorporating user inputs into the creative process using p5.js and React. Art exhibit at the Wellcome Museum inspired by generative art. True shade tiles and the 10 print algorithm inspired the pattern in our example. p5.js is a JavaScript library for creative coding, accessible to different backgrounds. Order is important in p5.js. React is better at managing complex state. Use the p5.js React wrapper to simplify integration. Use p5.js in instance mode to avoid naming collisions. Instance mode is safer and helpful as the project grows. Use destructuring to get values from input. Lerp color function creates color gradients. Use random seed for consistent random numbers in animations. Struggling with making the Canvas mobile-friendly. Animating P5.js sketches without relying on CSS. Optimizing canvas elements. P5.js and WebGL for 3D rendering. Conclusion and appreciation.
The Suspense Quest - Inside React's Magic
React Summit 2024React Summit 2024
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.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React Summit US 2024React Summit US 2024
12 min
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
I'm doing a quick lightning talk today, talking about saying no to boilerplate and teaching you how to build an AI app in just minutes. We're going to talk about RAG, v0, fine-tuning for sales AI to SDK, and then talk a little bit about Entity Resolution and your AI toolkit. RAG is a hot topic in chatbot development and allows for creating chatbots with a deeper understanding of specific use cases. Rag offers a versatile AISDK that allows for easy model switching, augmentation, and fine-tuning. Entity resolution is important for resolving entities across multiple points of data, with use cases in personalized marketing, healthcare, and fraud detection.
The Art of Ignoring Best Practices for React Performance
React Summit 2024React Summit 2024
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.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024React Summit US 2024
30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.
Is React Really Dying?
React Advanced 2024React Advanced 2024
29 min
Is React Really Dying?
Is React really dying? React is dead. Let's take a look at the numbers. Svelte is getting 1.5 million downloads per week. Angular is pulling 3.5. Probably not a competitor with React. React dwarfs everything with 25 million downloads a week. React is incredibly popular with 4 million users and developers. Despite some criticism, a survey shows that 71% of respondents liked React, while only 28% didn't. React's flexibility and options can be overwhelming for beginners. React's complexity has increased, causing confusion for beginners. Memory management, overcomplicated architecture, and innovation fatigue are common challenges in React. React 19 is delayed due to suspense issues. React server components are a favorite innovation. Qwik's hydration model is cool. Qwik is amazing, and it would be cool to see something like it for React. AI can help you get 80% there, but you still need an actual developer to tweak and clean up the code. Tab AI keeps your workflow going. React's popularity is undeniable. The momentum behind React is strong, and it's unlikely to fade away anytime soon.
Free workshops
Deploy and Test Full-Stack React Apps on Cloudflare
React Summit US 2024React Summit US 2024
105 min
Deploy and Test Full-Stack React Apps on Cloudflare
Workshop
Dario Piotrowicz
Christian Sparks
2 authors
This 3 hour workshop will provide an introduction to the Cloudflare Developer Platform for application developers. It will focus on developing a full-stack React application backed by tests that can guarantee the correctness of its interactions with the resources and APIs provided by the Develope...
Powerful Data Visualisation with AG Grid & AG Charts
React Summit US 2024React Summit US 2024
107 min
Powerful Data Visualisation with AG Grid & AG Charts
Workshop
Mike Ryan
Mike Ryan
Does your React app have lots (and lots) of data that needs to be displayed in both Data Grids and Charts? Do your users want to interact with, analyse, and work with this data without compromising on performance or reliability? AG Grid provide the best React Data Grid & Charts libraries that...
Building Your Own GenAI Agent Application
React Summit US 2024React Summit US 2024
87 min
Building Your Own GenAI Agent Application
Workshop
Amit Mandelbaum
Idan Rozin
2 authors
GenAI agents are one of the most promising directions for complex GenAI based applications. These agents can search the web, code, and carry complex tasks completely autonomously for the user. In this workshop we will learn the basics of GenAI agents. Define the basic terms and frameworks...
Llms Workshop: What They Are and How to Leverage Them
React Summit 2024React Summit 2024
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 f...
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
C3 Dev Festival 2024C3 Dev Festival 2024
48 min
Can LLMs Learn? Let’s Customize an LLM to Chat With Your Own Data
Workshop
Andreia Ocanoaia
Andreia Ocanoaia
Feeling the limitations of LLMs? They can be creative, but sometimes lack accuracy or rely on outdated information. In this workshop, we’ll break down the process of building and easily deploying a Retrieval-Augmented Generation system. This approach enables you to leverage the power of LLMs with...
How to Build Front-End Access Control with NFTs
React Summit 2024React Summit 2024
88 min
How to Build Front-End Access Control with NFTs
Workshop
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.
Building Your Generative AI Application
React Summit 2024React Summit 2024
82 min
Building Your Generative AI Application
Workshop
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 ow...
Build Peer-to-Peer Applications with Pear Runtime
JSNation 2024JSNation 2024
152 min
Build Peer-to-Peer Applications with Pear Runtime
Workshop
David Mark Clements
David Mark Clements
Learn how to rapidly build peer-to-peer applications with Pear Runtime. No servers required. Understand peer-to-peer paradigms and construct applications from well-defined building blocks. This workshop will cover how to create both Desktop and Terminal applications (with discussion for Mobile) t...
Build a Powerful Datagrid With AG Grid
React Summit 2024React Summit 2024
168 min
Build a Powerful Datagrid With AG Grid
Top Content
Workshop
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...
Upcoming events

Subscribe to the top JS conferences

and grow in-depth as engineer with insights from library authors and core teams

Learn more
JSNation 2025 logo
JSNation 2025
Amsterdam, Jun 12 - 16, 2025
React Summit 2025 logo
React Summit 2025
Amsterdam, Jun 13 - 17, 2025
Node Congress 2025 logo
Node Congress 2025
Apr 17, 2025
JSNation US 2025 logo
JSNation US 2025
New York, Nov 17 - 20, 2025
React Summit US 2025 logo
React Summit US 2025
New York, Nov 18 - 21, 2025
React Advanced 2025 logo
React Advanced 2025
London, Nov 27 - Dec 1, 2025