Talks from our events
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
React Day Berlin 2023
React Day Berlin 2023
Dec 8 - 12, 2023
Latest
All talks
React Compiler - The Missing Piece for Optimizing React Applications
React Day Berlin 2024React Day Berlin 2024
30 min
React Compiler - The Missing Piece for Optimizing React Applications
Today's Talk introduces the React compiler and its optimizations in React 19. The compiler handles optimizations internally, allowing existing optimizations to coexist. React 19 also brings server components, enhanced hooks, improved reference handling, and asset loading optimization. The React compiler follows the same principles as a typical compiler, with a Babel plugin and ESLint plugin identifying optimizations. The compiler optimizes components by performing in-place updates and reducing unnecessary re-rendering. The React compiler playground helps understand the optimization process. Caching JSX and configuring the React compiler can further optimize specific components. The React compiler is compatible with React 18 and 17 with some configuration, but using React 19 is recommended. Connect with the speaker for more information and subscribe to their YouTube channel. Thank you for watching!
From Redux to Zustand to Jotai to Zustand to Custom: Our State Management Horror Story
React Day Berlin 2024React Day Berlin 2024
29 min
From Redux to Zustand to Jotai to Zustand to Custom: Our State Management Horror Story
Today's Talk is about Plux, a TypeScript application built with React and Three.js. The speaker discusses the challenges they faced with state management and their journey of switching libraries multiple times. They started with Redux but later introduced GSDAN, a faster and easier-to-maintain state management library. They optimized performance using selectors but realized it became a problem when dealing with documents with many nodes. They replaced Zustand with Jotite for better performance but encountered limitations and ultimately implemented a custom store, resulting in a significant improvement. The speaker emphasizes the importance of not locking into a solution and shares their timeline for the changes. They also mention considerations for state management, recognizing performance issues, and the possibility of open-sourcing their solution.
Plants vs Thieves: Automated Tests in the World of Web Security
React Day Berlin 2024React Day Berlin 2024
25 min
Plants vs Thieves: Automated Tests in the World of Web Security
Hello everyone, and I'm so happy to see you here in React Day Berlin. This talk is on security and testing, two topics I'm passionate about. It's a wonderful allegory on web security using Plants vs. Zombies as inspiration. There are reasons to focus on testing as a line of defense. Learn your application and its vulnerabilities. Tests are the messenger, listen to them. Use OWASP's top 10 ranking to understand the most important security risks, including broken access control and cryptographic failure. Injection is a major security risk. Writing proper tests and using test cases can help mitigate this issue. To test for injection vulnerabilities, write negative tests that simulate extra injections in input fields. Test content security policies using Cypress. Implementing best practices and multiple defenses can keep attackers at bay. Automation is essential for detecting security issues in your app. Write test cases, use the features of test frameworks, and consider using different types of testing.
Case Study: Building Accessible Reusable React Components at GitHub
React Day Berlin 2024React Day Berlin 2024
22 min
Case Study: Building Accessible Reusable React Components at GitHub
Hey, I'm Sid, and I work on the design systems team at GitHub. Let's talk about building accessible React components with a focus on screen readers. Use the correct HTML element for accessibility. For example, on GitHub, there are three tabs with options. These tabs are made using buttons. Let's see how a visually impaired person using a screen reader would access this website. What do they see? I'm going to enable the screen reader and walk you through what happens. When turning on the screen reader, it sets the context and tells you where you are. For example, on the React app, a button labeled 'Code' has focus and a menu popup. Inside the popup, there are several buttons with different labels. Something interesting happens. If I can't see the UI, I'm hearing buttons but no tabs. Screen readers cannot infer things like tabs from visual design. To provide this information, we can use the ARIA spec and its roles. By adding a role tab list to the div and role tab to each button, the semantics are conveyed. The role overrides HTML semantics. Screen reader identifies tabs, pronounces 'code spaces'. Default behavior of a tab is auto-focus. We can add aria-selected attribute to specify selection. Using React, I'm using an expression to set aria-selected based on the selected tab. The navigation into the tab panel is disorienting. There are separate groups for the tab list and tab panel, and there is a need for navigation between them. Use arrow keys to navigate within the widget. Remove tabs from the tab index, only the selected tab should be focusable. Implement arrow keys for navigation. Press tab to enter the tab panel. Press shift tab to go back up. Keyboard navigation is a common pattern extracted into a hook. Decide which keys to bind based on the widget type. Change selected tab on focus. Consider the ARIA authoring practices guide for keyboard interactions. Differentiate between instant and activated tabs. Follow the ARIA spec and use the APG as an informative resource. Screen readers may not always follow the ARIA authoring practices guide. Use correct HTML elements, add ARIA roles, properties, and states. Implement keyboard navigation. Use a GitHub example of notification settings with proper semantic elements. When selecting notification channels, the options are presented in a pop-up. The focus is on the first checkbox, indicating that it is the first option. The screen reader reads the status of each option. After selecting the desired option, the form can be submitted. The change is saved and the user is notified. The focus is recontextualized on the collapsed menu popup button. Not rendering the fourth option in certain conditions hides it from screen users. Removing the conditional and disabling the fourth checkbox until necessary eliminates this issue. Using IR disabled instead of disabled makes the element accessible for screen reader and keyboard users without affecting styling or click cancellation. You have to add your own class name and make sure it is disabled. It is accessible by keyboards. Voiceover on Mac uses 'dimmed' to signify IR disabled. Adding another span that requires at least one channel. Additional descriptions can be added using aria-describeby. SCREEN READER Only notify for failed workflows. Requires at least one channel to be selected. Dimmed unticked. Tick box. Now you know the label, why it is disabled, and that it's dimmed. And let's see if it's If I mean. Never. Menu popup collapsed. This flow seems more intuitive. You know all your options up ahead. One option was disabled, enabled something else, and it became enabled again. Much more clear. Feels like a better UI. We need to design with accessibility in mind. Accessibility isn't something that you can just sprinkle on in the end. We have to bring it way earlier in the stage. Be careful when disabling elements. Use RLDisabled. Short list of six things to consider. Links on my website. Follow me on Blue Sky.
Web Workers: Handling Heavy Processing on the Client Side
JSNation US 2024JSNation US 2024
18 min
Web Workers: Handling Heavy Processing on the Client Side
In this talk, the speaker introduces web workers and discusses how they can handle large processing on the client side. Examples, benchmarks, and tradeoffs are provided. The benefits of using web workers are discussed, and a demo project using VanillaJS and the live server extension of VS Code is showcased. The speaker demonstrates how to use web workers to prevent the main thread from getting blocked during large operations. The process of creating a web worker file and moving functions to it is explained. The speaker also shows how to handle messages and perform operations with web workers. The final remarks include contact information and an invitation to check out the speaker's YouTube channel for React courses and articles.
Gain Performance! Take Your Run Time to Build Time
React Summit US 2024React Summit US 2024
12 min
Gain Performance! Take Your Run Time to Build Time
Watch video: Gain Performance! Take Your Run Time to Build Time
Hi everyone! I'm Rohit, a founding engineer at Tria. We are working on bringing the world to Web3 using names. My talk is about gaining performance and taking runtime to build time. There is an upward trend in libraries towards build time optimization, especially in React. Build time optimization improves performance, reduces bundle size, and provides more predictable software. Babel is a free and open source JavaScript transpiler that allows leveraging latest JavaScript features and moving computationally heavy logic from runtime to build time. Building a Babel plugin involves checking for a style prop inside an HTML tag and searching for aliases or token values. The visitor pattern is used to define the JSX type of node and access its path and attributes. The plugin can be customized for different utilities by defining aliases and tokens in a config file. Helpful resources for understanding and building custom Babel plugins include the Babel handbook, Babel docs, astexplorer.net, and the speaker's Twitter account.
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.
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!
Nue: The UX Framework for the Web
JSNation US 2024JSNation US 2024
21 min
Nue: The UX Framework for the Web
Watch video: Nue: The UX Framework for the Web
Hello, everyone. My name is Tero Piirainen, a software engineer from Helsinki, Finland. I'm introducing a new UX framework for the web called Nue. It provides better tooling, code basis, and resulting websites compared to established frameworks like Next.js or Beat or Astro. Nue is incredibly fast, 100 times faster than Next.js, with improved hot reloading times. Simplicity is a key advantage of Nue, offering instant browser reactions to saved files and quick updates with hot reloading. Nue emphasizes timeless skills and focuses on design engineering, transitioning from JavaScript to modern CSS. Gnu, a component of Nue, focuses on CSS and offers small and fast websites with built-in turbo-linking and view transition motion effects. Overall, Nue and Gnu provide a simpler, faster, and more flexible development experience with a focus on user experience and design engineering.
Untangling Your Dependencies: A Pattern for a Well-Knit React Project
React Summit US 2024React Summit US 2024
22 min
Untangling Your Dependencies: A Pattern for a Well-Knit React Project
Thank you for joining my session on untangling your dependencies. I encountered errors when trying to update dependencies in the project, leading to a tangled mess of issues. Managing dependencies can be like working with a ball of yarn, trying to knit a project. I'll share my favorite practices for managing dependencies and provide some background about myself. Leonardo da Vinci said, 'art is never finished, only abandoned,' and this applies to software as well. I'll share tricks and tips for managing complex dependency management systems and understanding different types of dependencies. Working with dependencies often comes with challenges, especially when using React Native. Examples of tools that assist with managing dependencies include yarn upgrade interactive, NPM check updates, and React Native upgrade helper. When encountering issues, breaking them down into smaller chunks helps find solutions. To tackle dependency issues, focus on one platform at a time and choose the right tools. Tools like NPM why and Clip can help identify unnecessary dependencies and unused files. Monorepos and tools like Yarn workspaces and npm shrinkwrap are useful for managing monorepos. Bleeding edge branches and dependency updates allow for incremental and broken commits. Regular updates are recommended to stay aligned with platform changes.
Featured
Trending today
React Server Components in AI Applications
React Day Berlin 2024React Day Berlin 2024
33 min
React Server Components in AI Applications
Good morning, React Day Berlin! Today we'll discuss the intersection of AI and React server components. AI engineering is like salt for React developers, enhancing product experiences. Generative UI uses AI to generate text and code, and we'll build a React app using server components with generative UI. AI can improve movie search by inferring context, and we'll build a collaborative movie search project. Implementing AI search involves creating an AI context and setting UI state. We can enhance the UI by adding a system prompt and creating an AI agent for rich UI. The generate function acts as a generator for the virtual DOM. Memory functionality and interactive movie components can enhance the UI further. The future possibilities include AI-generated UI for e-commerce and personalized recommendations. React server components and the intersection of AI and UI are essential for UI engineers. AI SDK is MIT licensed and available for further discussions.
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.
Advanced Playwright Techniques for Flawless Testing
JSNation US 2024JSNation US 2024
20 min
Advanced Playwright Techniques for Flawless Testing
Hi, everyone. My name is Debbie O'Brien, Principal Technical PM at Microsoft. I'm focusing on Playwright, a reliable end-to-end testing tool for modern web apps. It works on any browser and platform, has powerful tooling, and tests run fast. Advanced techniques include UI mode, HTML reports, and trace viewer. Use annotations in Playwright to enhance reporting and test organization. Mocking API responses and external links is possible with Playwright. You can also test date and time by setting a fixed fake time. Playwright offers CLI test options and has a vibrant community. Join the Playwright Discord server and follow the important docs and YouTube channel for more information.
Deep Dive into Undici
Node Congress 2024Node Congress 2024
24 min
Deep Dive into Undici
Top Content
Undici is a modern HTTP client for Node.js that offers improved performance and advanced features. It supports HTTP 1.1 and recently added HTTP 2.0 support. Undici provides impressive performance, especially with Undici.Stream. It also supports HTTP 1.1 pipelining, which can significantly cut response time. Undici offers flexible connection management and dispatchers, as well as interceptors for customization. Undici v7 is coming with improved APIs and platformatic runtime for running multiple microservices in the same process.
React Query - The Bad Parts
React Day Berlin 2024React Day Berlin 2024
30 min
React Query - The Bad Parts
Top Content
React.js is a new language for JavaScript that provides a more efficient and flexible way to build user interfaces. It uses a virtual DOM and JSX syntax. React.js is compatible with TypeScript and has certain requirements, such as Node.js and npm installation and knowledge of HTML, CSS, and JavaScript.
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.
Testing Mail Service With Playwright
TestJS Summit 2022TestJS Summit 2022
17 min
Testing Mail Service With Playwright
Top Content
Watch video: Testing Mail Service With Playwright
This Talk discusses how to test mail service with Playwright, covering e-mail verification, reset password user journey, and more. It explores the use of third-party providers for reliable e-mail delivery and demonstrates how Playwright can help perform checks on e-mail content. The Talk also introduces the concept of a fake SMTP server and showcases how fixtures can be used to access the SMTP server and perform assertions on the HTML body of emails. Playwright's HTML rendering feature allows for interaction with email content as if it were a regular web page. It highlights the ability to render HTML from API calls, perform assertions on the rendered page, and exclude dynamically generated data from visual regression tests.
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.
How an RSC Framework Enables Server Actions
React Advanced 2024React Advanced 2024
25 min
How an RSC Framework Enables Server Actions
I'm Daisuke Kato, an open source developer. I've developed React libraries like Zest, Jota, and Valsio. Now, I'm working on a new React framework, Waku. It's a team project that started a year and a half ago. Recently, we added support for server functions. This talk is about server functions and React Server Components (RSC), which allows running React on a server. RSC includes server components and functions and can render components at build time. It leverages serialization provided by a React library. Server components are an extension that allows rendering on the server and merging with client components. Let's explore the implementation with code. RSC allows the use of server and client components. The server serializes the client component into the RST payload. A client reference acts like a URL and is used to retrieve the actual client component. Creating a client reference involves code transformation. Server functions allow the client component to call a function on the server. Server function and client component are both functions that need to be serializable. Creating server references has multiple ways. The framework transforms user code for different situations. Waku now supports server functions. Supporting server function is a challenging task, but we've done it. Thank you for your talk.
Understanding the New Event Loop in React Native
React Advanced 2024React Advanced 2024
29 min
Understanding the New Event Loop in React Native
I'm going over the new event loop in React Native, which is one of the more interesting parts of the new architecture. The new architecture includes the JSI for synchronous communication between layers, new Native modules for type safety and code sharing, and the Fabric renderer for prioritized rendering and support for modern React 18 features. The React Native event loop works differently from the previous architecture, executing tasks and updating rendering. The React Native team can now schedule JavaScript code within React components to execute at specific times, allowing for control over the execution schedule. React Native can now prioritize rendering urgent events, resulting in a more synchronized and flicker-free UI. The goal of the new event loop specification is to align React Native more closely with the web, providing capabilities and behaviors similar to the web. Migrating to the new React Native architecture aims to minimize fundamental changes for existing codebases and ensure proper support from library maintainers.
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.
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Node Congress 2024Node Congress 2024
7 min
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Yash Rajavarma introduces observability and explains its importance for developers. He discusses how OpenTelemetry can empower Node.js applications by providing easy instrumentation and management of telemetry data. OpenTelemetry simplifies the implementation of observability and is designed to benefit developers.
Nested Interactive Elements: A Nightmare in Accessibility
React Summit 2024React Summit 2024
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.
The Entanglement of Concerns between People and Software Development
C3 Dev Festival 2024C3 Dev Festival 2024
8 min
The Entanglement of Concerns between People and Software Development
As a software developer, the entanglement between people and the software they develop is important. Legacy software poses challenges due to lack of time, understandability, and optimization. Legacy systems in health care face similar challenges. Microsoft's evolution and innovation highlight the value of change. Developing adaptable and user-friendly software requires considering the interconnectedness of all actors.
React Jam and Why React Is Awesome for Making Games
React Summit 2024React Summit 2024
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.
The Power of a Second Brain in a Developer's Workflow
C3 Dev Festival 2024C3 Dev Festival 2024
8 min
The Power of a Second Brain in a Developer's Workflow
The Talk emphasizes the importance of maintaining a second brain, a curated collection of digital notes, to enhance memory retention in software engineering. Building a second brain helps in recalling information, problem-solving, and retention. It is easy to create your own second brain using various tool options like Notion, Obsidian, Reflect, Rome Research, and Tana. Starting with small, self-contained notes and gradually expanding to form a mesh of related information is recommended for effective learning and retention.
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.
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.
What’s With Micro Frontends
JSNation US 2024JSNation US 2024
7 min
What’s With Micro Frontends
Watch video: What’s With Micro Frontends
Micro-frontends break down a large frontend into smaller, independently deployable pieces. This approach improves scalability, team autonomy, and code maintenance. Two primary ways to implement micro-frontends are build time and run time. Module federation, introduced in Webpack 5, allows for dynamic real-time updates across teams. Challenges in implementing micro-frontends include getting type safety with TypeScript and testing at runtime. Module federation 2.0 introduced type extraction and manifest updates. Full site federation allows testing the whole app. Micro frontends involve trade-offs, so choose what benefits you the most.
Applying React Principles to a Cloud Database
React Summit 2024React Summit 2024
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.
Popular
JavaScript
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.
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.
React
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.
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.
Panel Discussion: Future of React
React Summit US 2024React Summit US 2024
39 min
Panel Discussion: Future of React
Watch video: Panel Discussion: Future of React
Kent C. Dodds
Shruti Kapoor
Mark Erikson
Eli White
Mofei Zhang
Theo Browne
Tom Occhino
7 authors
We're going to be doing a future of React panel discussions. React 19 is in RC stage and we're excited to hear when it will be stable. The React compiler is here to stay and is the future of developer experience and tooling. React 19 brings exciting features like RSCs and consolidation of the framework. React's commitment to community and innovation is commendable. The React team values feedback and actively engages with the community. React's future includes supporting the community and enabling smooth migrations. There's a need to teach underlying concepts and educate AI systems. Teaching and adapting to React can be challenging. The React compiler changes default re-rendering behavior. Collaboration with Next.js and Vercel has been valuable for React's development. Appreciation for the community and partnerships with Vercel and Microsoft.
Building End-to-End Encrypted Apps (Web & React Native)
React Summit 2024React Summit 2024
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.
Evaluating React Application Performance with a Sip of RUM
React Day Berlin 2024React Day Berlin 2024
10 min
Evaluating React Application Performance with a Sip of RUM
Hello, everybody. How are we all doing? I'm going to talk about Rome, OpenTelemetry, and identifying performance bottlenecks and issues in React applications. The pillars of observability are logs and metrics. Logs are structured messages that warn, indicate, or error. Metrics include throughput, latency, custom and core web vitals. Traces allow us to see through the pathway of our application and identify bottlenecks. One common open standard for collecting these signals is open telemetry. React's client instrumentation is experimental and mostly unspecified. The open telemetry demo provides an example of front-end tracing in React, giving you a unique service name and basic metrics. The demo shows an HTTP POST request with the pathway and timing. The open telemetry project is still working on core web vital metrics and other enhancements. Real user monitoring (RUM) fills the gaps in open telemetry, capturing missing information. In conclusion, we discussed the importance of capturing logs, metrics, and traces and provided resources for further exploration.
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.
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.
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.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React Summit 2024React Summit 2024
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.
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
React Advanced 2024React Advanced 2024
12 min
Scaling React Performance: From Basic to Advanced Code-Splitting Techniques
I'm Gil, a performance architect at Wix. Today, I'll explain how we use code splitting to improve website performance. Code splitting breaks down JavaScript into smaller chunks or React components, loading them only when needed. This reduces JavaScript size and improves user experience. We measure performance using Core Web Vitals, focusing on INP scores, which evaluate interactivity. Reducing JavaScript improves INP. Our INP scores have significantly improved, thanks to our code splitting techniques. Let's dive into the code splitting strategies we use, starting with dynamic import and React Lazy. Let's move on to a more advanced example: conditionally loading components on page load, not on user interactions. We fetch the comments data and render the comment section only if there are any comments. This method is supported in React 18 and works for server-side rendering (SSR). React components can be loaded dynamically on scroll or hover interactions with suspense. If the components are already rendered with SSR, we just need to download and hydrate them. This is only possible with the new suspense in server-side rendering (SSR). We use react-lazy with dynamic imports to render the component when it enters the viewport. I created a download on viewport wrapper that creates a ref and uses the intersection observer to resolve a promise when the component enters the viewport. I use the viewport and a wrapper that calls a function called use, which is implemented using the suspense API from React. This function is used to manage the promise and render the components only after it's resolved. The suspense component handles this promise. We moved props calculation to the server side and fetched them in the React component. This approach simplifies the process and can be implemented using the dynamic API in Next.js. By conditionally rendering components and calculating props on the server side, we can significantly reduce the amount of JavaScript code loaded in the client side, resulting in improved performance.
Node.js
Milo, a New HTTP Parser for Node.js
Node Congress 2024Node Congress 2024
23 min
Milo, a New HTTP Parser for Node.js
Hello and welcome to Node Congress 2024. NearForm focuses on delivering modern and elegant solutions. Milo is a new HTTP parser written in Rust, designed to address the complexity and vulnerabilities of the current Node HTTP parser. Milo allows developers to opt-in for copying data being parsed for improved developer experience. It follows the latest RFCs for HTTP strictly and provides a common interface across different languages. Milo is being explored for C++ and WebAssembly integration, and future steps include performance improvements and regression testing.
Parsing Millions of URLs per Second
Node Congress 2024Node Congress 2024
14 min
Parsing Millions of URLs per Second
Today's talk explores the performance of URL parsing in Node.js and introduces the ADA URL parser, which can parse 6 million URLs per second. The ADA URL parser includes optimizations such as perfect hashing, memoization tables, and vectorization. It is available in multiple languages and has bindings for popular programming languages. Reach out to Ada URL and Daniel Lemire's blog for more information.
Creating an HTTP Server from Scratch with Node-addon-api, Libuv, and Milo
Node Congress 2024Node Congress 2024
18 min
Creating an HTTP Server from Scratch with Node-addon-api, Libuv, and Milo
Today's Talk focuses on creating an HTTP server from scratch using Node.js and native add-ons. The process involves implementing a TCP socket using LibuV for data exchange between the server and client. The Talk also covers invoking callbacks, creating a high-level abstraction for the HTTP server, and parsing HTTP data using an experimental HTTP parser called Milo. The project serves as a proof of concept, showcasing the ease of creating add-ons and interacting with low-level APIs in Node.js.
Deep Dive into Undici
Node Congress 2024Node Congress 2024
24 min
Deep Dive into Undici
Top Content
Undici is a modern HTTP client for Node.js that offers improved performance and advanced features. It supports HTTP 1.1 and recently added HTTP 2.0 support. Undici provides impressive performance, especially with Undici.Stream. It also supports HTTP 1.1 pipelining, which can significantly cut response time. Undici offers flexible connection management and dispatchers, as well as interceptors for customization. Undici v7 is coming with improved APIs and platformatic runtime for running multiple microservices in the same process.
Understanding Package Resolution in Node.js
Node Congress 2024Node Congress 2024
11 min
Understanding Package Resolution in Node.js
In this Talk, the speaker discusses package resolution in Node.js, covering topics such as CommonJS, ES modules, package.json structure, and package.json loader. The Talk also touches on conditional loading and file extension resolution, module import and export, module type determination based on file extensions and package.json, module resolution strategies in Node.js, and tips for improving loading time in ESM applications.
Making My Node.js API Super Fast
Node Congress 2024Node Congress 2024
34 min
Making My Node.js API Super Fast
This talk focuses on improving performance in Node.js API development. It covers various areas such as optimizing database work, connection pool, JSON parsing, logging, and web framework selection. Key highlights include the use of Native Mongo Driver for better database performance, optimizing connection pool for improved throughput, replacing Express serializer for faster serialization and deserialization, and choosing Festify as an efficient web framework. Caching and authentication's impact on performance is discussed, along with recommendations for caching types. The talk also emphasizes considering environmental factors and human impact on performance. Fastify is highlighted as a recommended tool for Node.js performance optimization.
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
Node Congress 2024Node Congress 2024
25 min
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
Serverless services like AWS Lambda allow developers to build modern applications without provisioning servers or additional infrastructure. LLRT is a low latency runtime designed specifically for serverless environments and JavaScript applications. LLRT uses a lightweight JavaScript engine called Quick.js, achieving fast execution and performance with minimal memory consumption. LLRT is ideal for latency-critical applications, high-volume functions, and integration with AWS services. It significantly improves performance, reducing cold starts and providing consistent warm start times. Users are encouraged to test LLRT and contribute to its development.
Testing
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
JSNation US 2024JSNation US 2024
22 min
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
Watch video: Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
My goal with this talk was to answer the question of why we have another test runner. The talk breaks down the history of web testing into three chunks: the click-through era, browser war one, and browser war two. It discusses the motivations behind browser test runners and node test runners, highlighting Karma as the first node-based runner that gained popularity. The rise of node-based test runners like Ava, Tape, Mocha, and Jest is attributed to their stability and ease of use compared to Karma. Jest faced challenges with module loading and transpiling, but its non-opinionated abstraction made it a suitable choice. The shift towards environment-aware runners like VTest allows for safer testing and aligns with the need for transpilation across different environments. Lastly, the talk touches on the future of test tooling and the implications of AI on testing.
Beyond React Testing Library: Testing React Libraries (and library-like code)
React Advanced 2024React Advanced 2024
33 min
Beyond React Testing Library: Testing React Libraries (and library-like code)
Today's talk is called Beyond Testing Library, Testing React Libraries and Library-like Code. The speaker, Lenz Liebertronik, discusses the special requirements for testing libraries, including minimizing re-renders, avoiding tearing, and rendering components granularly. They highlight scenarios where React Testing Library falls short and introduce the Testing Library React render stream as a solution. The speaker demonstrates how to test hooks, multiple hooks, and assert re-renders using different techniques. They caution about potential issues with React upgrades, test-only components, ACT batching, and Suspense boundaries. The speaker shares real-world usage of the render stream library and discusses the limitations of correlating renders with DOM commits. They emphasize the importance of testing libraries and gradually optimizing code. They also mention the benefits of using the testing library and conclude with gratitude and a Dutch lesson.
Advanced Playwright Techniques for Flawless Testing
JSNation US 2024JSNation US 2024
20 min
Advanced Playwright Techniques for Flawless Testing
Hi, everyone. My name is Debbie O'Brien, Principal Technical PM at Microsoft. I'm focusing on Playwright, a reliable end-to-end testing tool for modern web apps. It works on any browser and platform, has powerful tooling, and tests run fast. Advanced techniques include UI mode, HTML reports, and trace viewer. Use annotations in Playwright to enhance reporting and test organization. Mocking API responses and external links is possible with Playwright. You can also test date and time by setting a fixed fake time. Playwright offers CLI test options and has a vibrant community. Join the Playwright Discord server and follow the important docs and YouTube channel for more information.
Accessibility Granted: Building Inclusive Components One Test at a Time
React Summit US 2024React Summit US 2024
18 min
Accessibility Granted: Building Inclusive Components One Test at a Time
Watch video: Accessibility Granted: Building Inclusive Components One Test at a Time
At Evinced, the mission is to make the web more accessible for everyone. Accessibility issues are common despite intentions. Today's Talk focuses on coding in an accessible way using TDD to catch defects early. Unit tests can be written to ensure accessibility requirements are met. Testing Library provides utilities for testing accessibility. The ATDD approach allows continuous creation of tests for compliance. Unit testing is valuable for complex components. Advanced has developed an SDK called the Unit Tester for automating accessibility tests.
Testing Alternative Runtimes with Node and Vitest
Node Congress 2024Node Congress 2024
25 min
Testing Alternative Runtimes with Node and Vitest
Welcome to my talk on testing alternative runtimes with Node and VTest. VTest is a popular testing framework that allows dynamic code evaluation and runs inside Cloudflare workers. Durable objects provide distributed JavaScript class instances with unique IDs and persistent storage for improved developer experience. The testing framework in Cloudflare workers automatically undoes writes to storage and supports seeding data. Mocking outbound fetch requests is also possible in Cloudflare workers.
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
JSNation US 2024JSNation US 2024
10 min
AI-Powered E2E UI Testing: Faster Creation, Easier Maintenance
Hello, everyone. Today we are going to explore AI-powered end-to-end testing. Unlike unit tests, UI testing has a huge layer of obstructions between the source code and the rendered UI. The source code includes HTML, CSS, and TypeScript, which are transpiled into JavaScript and bundled with tools like Webpack. AI can generate tests effectively for standard websites or blogs, but it may struggle with niche applications behind strict authorization or on-premise tools. AI-powered end-to-end testing for complex scenarios requires our guidance. We use meaningful data test IDs and follow the page objects model pattern. Additionally, we rely on useful tools like the end-to-end test helper in-browser extension and the continue IDE extension. Now, let's proceed to the demo, where we will create tests for the Pokemon application, including the ability to filter by name or type. We will navigate to the Pokemon details page and use our extension to manage settings and prompts. Additionally, we will create the details page object together and generate the test file. The Pokemon details page has 105 elements. We can view the elements for debugging purposes, including page object name, Pokemon details page, and system message. We will copy the page object and save it to a file. We need to make it exportable. Then, we will use the extension to create an end-to-end test and pass the context. I will use all the open files, including the page objects and the test case itself. I will send them to EI along with the predefined prompt. There is a system message and additional information we need to be aware of. The test runs successfully, and that concludes this part.
We May Not Need Component Testing
Vue.js Live 2024Vue.js Live 2024
26 min
We May Not Need Component Testing
Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.
Maestro & Expo: Crafting the Future of Efficient e2e Testing
React Advanced 2024React Advanced 2024
20 min
Maestro & Expo: Crafting the Future of Efficient e2e Testing
End-to-end testing is important for catching hard-to-find bugs, but it can be complex and time-consuming. The speaker shares their journey at YOLO apps and how they addressed these issues using Maestro, a newer testing tool. Maestro allows interaction with all aspects of the app and offers a web interface for building tests. It also provides features like auto retry and test videos for troubleshooting. The speaker also discusses automating CI/CD using Expo and EAS, which simplified the app build and distribution process. They demonstrate how EAS and MySQL Cloud can be used for reporting and investigation. The power of end-to-end testing is showcased, with a fast CI/CD time and free tests and EAS updates. Maestro has some limitations, but it offers easy test writing and 100 free tests per month, with additional tests available at a cost.
Behind the Scenes of a Visual Regression Test
React Summit 2024React Summit 2024
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.
No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests
Vue.js Live 2024Vue.js Live 2024
21 min
No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests
A single-page application utilized a server-side BFF layer to simplify authentication and data customization. Testing a BFF-based architecture involves contract testing and tool usage. Challenges arise when mocking server-to-server requests in a client-side and server-side architecture. Separate tests should be written for client-side and server-side components, with contract testing to ensure compatibility. Integration testing for the front-end and server-side can be done by replacing microservices with a sub-server.
Upcoming events

Subscribe to the top JS conferences

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

Learn more
Productivity Conf for Devs and Tech Leaders logo
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
Node Congress 2025 logo
Node Congress 2025
Apr 17 - 18, 2025
JSNation 2025 logo
JSNation 2025
Amsterdam, Jun 12 - 16, 2025
React Summit 2025 logo
React Summit 2025
Amsterdam, Jun 13 - 17, 2025
C3 Dev Festival 2025 logo
C3 Dev Festival 2025
June, 2025
TechLead Conference 2025 logo
TechLead Conference 2025
June, 2025
React Advanced 2025 logo
React Advanced 2025
London, October, 2025
JSNation US 2025 logo
JSNation US 2025
New York, November, 2025
React Summit US 2025 logo
React Summit US 2025
New York, November, 2025
TestJS Summit 2025 logo
TestJS Summit 2025
November, 2025