Tech talks & workshops by core teams and top engineers

Home of React and JavaScript insights directly from framework authors, early adopter engineers and big tech from - talk recordings, hands-on workshops and articles.
Upcoming events
JSNation 2025
JSNation 2025
Jun 12 - 16, 2025
React Summit 2025
React Summit 2025
Jun 13 - 17, 2025
Productivity Conf for Devs and Tech Leaders
Productivity Conf for Devs and Tech Leaders
Mar 27 - 28, 2025
Node Congress 2025
Node Congress 2025
Apr 17 - 18, 2025
TechLead Conference 2025
TechLead Conference 2025
June, 2025
C3 Dev Festival 2025
C3 Dev Festival 2025
June, 2025
React Advanced 2025
React Advanced 2025
October, 2025
JSNation US 2025
JSNation US 2025
November, 2025
React Summit US 2025
React Summit US 2025
November, 2025
TestJS Summit 2025
TestJS Summit 2025
November, 2025
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
Articles
Top ideas
Trending today
Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos
JSNation US 2024JSNation US 2024
28 min
Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos
Watch video: Monorepos & Spaceships – Navigating Successfully Through Code and Cosmos
Hello everyone. I'd like to start off by telling you a story about a guy named Dan. He's a mechanic and his job is fixing spaceships. Dan is a metaphor for all of us developers. Let's talk about monorepos as you've probably guessed from the title. I'll start off by talking about polyrepos, what they do well, but also where they fall short. Then I'll talk about monorepos and what issues they solve, as well as why you need good monorepo tooling, especially at scale. A Monorepo is a single repository containing multiple distinct projects with well-defined relationships. It allows teams to work together in a unified manner. Monorepos help with velocity, safety, and mobility. Monorepos can be adopted incrementally and good tooling can help with running tests. CI time is now coupled to the size of the change made, rather than the size of the monorepo. By generating a task graph from the project graph, we can optimize the build process by parallelizing and scheduling tasks. NX offers a solution by distributing tasks across multiple agents, allowing for time and cost optimization. Visit monorepo.tools or nx.dev to learn more and achieve focus and contentment like Dan.
Conquering Complexity: Refactoring JavaScript Projects
JSNation 2024JSNation 2024
21 min
Conquering Complexity: Refactoring JavaScript Projects
Today's Talk explores the complexity in code and its impact. It discusses different methods of measuring complexity, such as cyclomatic complexity and cognitive complexity. The importance of understanding and conquering complexity is emphasized, with a demo showcasing complexity in a codebase. The Talk also delves into the need for change and the role of refactoring in dealing with complexity. Tips and techniques for refactoring are shared, including the use of language features and tools to simplify code. Overall, the Talk provides insights into managing and reducing complexity in software development.
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.
Patterns for Performance
React Advanced 2023React Advanced 2023
28 min
Patterns for Performance
Watch video: Patterns for Performance
This Talk discusses patterns for performance in React development, including addressing slow resizing in custom cell renderers. It explores optimizing React render performance by reducing excessive re-rendering and using direct style updates. The use of layout effect and callback refs is also highlighted as techniques to improve performance. Additionally, the Talk mentions the AG Grid and TanStack Table libraries, as well as upcoming features like grid state restoration.
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
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.
React Query API Design – Lessons Learned
React Advanced 2024React Advanced 2024
26 min
React Query API Design – Lessons Learned
Top Content
I'm super excited to be here today, giving my first live talk at an in-person conference. Dominik, the maintainer of React Query, walks through the API design decisions, including success stories, trade-offs, and mistakes. Tener Linsley designed React Query's medium-sized query API to be minimal, intuitive, powerful, and flexible. Major versions in open source require marketing efforts, but not primarily for adding new features. TypeScript is crucial for building projects and managing user demands in open source can be challenging. The addition of the max pages option improved performance and avoided unnecessary refetches. Inversion of control gives users flexibility, but mistakes can happen in API design. Open source requires time management and feedback from users. API design is influenced by typing ease and good TypeScript support. Getting involved in open source involves trial and error and joining community platforms like TanStack Discord. Dominik's journey started during the pandemic and he can be found on Twitter, TanStack Discord, and his blog.
PrimeVue | The Next-Gen UI Component Library
Vue.js Live 2024Vue.js Live 2024
24 min
PrimeVue | The Next-Gen UI Component Library
Prime Vue is a comprehensive UI component suite with over 90 components, including date pickers, buttons, tables, and grids. It offers flexibility through styled and unstyled modes, allowing for customization using design tokens or Tailwind. Prime Vue is WCAG compliant and supports Material design. The upcoming version 4 introduces a new theming API using CSS variables, and it includes features like dark mode switching and integration with Figma. The team has plans to release a UI Designer, advanced components, and a drag-and-drop UI Builder in the future.
A Guide to React Rendering Behavior
React Advanced 2022React Advanced 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
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.
The Ai-Assisted Developer Workflow: Build Faster and Smarter Today
JSNation US 2024JSNation US 2024
31 min
The Ai-Assisted Developer Workflow: Build Faster and Smarter Today
AI is transforming software engineering by using agents to help with coding. Agents can autonomously complete tasks and make decisions based on data. Collaborative AI and automation are opening new possibilities in code generation. Bolt is a powerful tool for troubleshooting, bug fixing, and authentication. Code generation tools like Copilot and Cursor provide support for selecting models and codebase awareness. Cline is a useful extension for website inspection and testing. Guidelines for coding with agents include defining requirements, choosing the right model, and frequent testing. Clear and concise instructions are crucial in AI-generated code. Experienced engineers are still necessary in understanding architecture and problem-solving. Energy consumption insights and sustainability are discussed in the Talk.
Featured
Short takes
Generating TypeScript with TypeScript
DevOps.js Conf 2024DevOps.js Conf 2024
8 min
Generating TypeScript with TypeScript
This talk discusses how TypeScript definitions are automatically generated for CloudFlare workers using runtime type information. The encoding and transformation of type information is explained, with runtime API types being encoded in C++ and further processed in TypeScript. The process of improving type definitions and achieving compatibility is also covered, including fixing problems with iterators and using human input to improve developer ergonomics. The talk concludes with a plan to build Types as a Service, a Cloudflare worker that dynamically generates NPM packages containing TypeScript definition files.
The Entanglement of Concerns between People and Software Development
TechLead Conference 2024TechLead Conference 2024
8 min
The Entanglement of Concerns between People and Software Development
The Talk explores the entanglement of concerns between people and the software they develop, emphasizing the importance of considering people and teams instead of just coding. It highlights the time constraints faced by developers and the potential for code optimization to improve understandability and usefulness. The Talk also discusses the significance of revamping outdated software and embracing continuous improvement in software development. It concludes by emphasizing the interconnectedness of software builders, thinkers, users, maintainers, and payers, and encourages the development of user-friendly software systems that adapt to change and consider the needs of all stakeholders.
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.
Define the Relationship with Monorepos
React Summit US 2024React Summit US 2024
6 min
Define the Relationship with Monorepos
Watch video: Define the Relationship with Monorepos
Monorepos are single repositories containing multiple distinct projects with well-defined relationships. Relationships in code are based on distance, where code in different files is the closest relationship. By importing code from one file to another, dependencies are established, allowing for changes in one file to immediately impact the other. This enables fast iteration and development. When we separate code into packages or APIs, it increases the distance between code pieces, making it slower to understand the impact of changes. However, when multiple projects are combined in a monorepo, the relationships between them are reduced, enabling faster development. Monorepos make relationships explicit and provide tools to understand their impact. To learn more, visit monorepo.tools or nx.dev for information on managing monorepos with NX.
Serverless Observability: Where SLOs Meet Transforms
DevOps.js Conf 2024DevOps.js Conf 2024
8 min
Serverless Observability: Where SLOs Meet Transforms
This Talk provides an introduction to Serverless Observability and SLOs, explaining the concept of SLOs and their dependency on transforms. It highlights the codependency between SLOs, SLAs, and SLIs and discusses the importance of well-defined SLOs. The Talk also demonstrates how to create and monitor SLOs and alert rules, emphasizing the benefits of burn rate alerting in reducing alert fatigue and improving user experience.
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.
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.
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.
Pear Runtime: Zero-Infrastructure, P2P High-Scale Applications
JSNation 2024JSNation 2024
8 min
Pear Runtime: Zero-Infrastructure, P2P High-Scale Applications
Pair Runtime is a fully peer-to-peer runtime that operates on user devices, with no data stored in the cloud. Pair is a development and deployment tool that enables creating and running Pair applications on user devices. Pair is a platform for building terminal, desktop, and mobile applications, providing all the necessary tools and resources. It offers inherent data security and uses a hole-punching algorithm to connect peers. Pair is designed for simplicity and true security.
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.
Latest
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.
From Lag to Lightning: Boosting React Native Performance
React Day Berlin 2024React Day Berlin 2024
17 min
From Lag to Lightning: Boosting React Native Performance
Hello, everyone. Today I'll talk about boosting React Native app performance. We'll explore optimization techniques, practical strategies, tools, and examples. Performance is crucial for mobile apps. Slow apps lead to frustration, abandonment, and revenue loss. We need to maintain 60 frames per second and overcome performance challenges. Let's understand the React Native architecture, legacy model, and the new architecture with JSI, fabric renderer, and turbo modules. Performance issues in React Native arise due to the single-threaded nature of JavaScript. The React Native bridge can be overwhelmed by large payloads, so using JSI for direct native communication is a more efficient solution. Profiling tools like Flipper, Chrome dev tools, React dev tools, Xcode instruments, and Android profiler help identify bottlenecks. Offloading heavy computations to web workers or JSI can improve JavaScript performance. Enable Hermes engine for improved performance. Optimize flatlist usage, delay non-urgent tasks, and prevent memory leaks for better app performance. Use initial numToRender and maxToRenderPerBatch props, memoize render item, and clean up side effects for optimized rendering. Preload and cache images, delegate gesture processing to the native thread, and continuously test the app under real-world conditions for smooth rendering and fluid UI.
Mastering React Server Components and Server Actions in React 19
React Summit US 2024React Summit US 2024
150 min
Mastering React Server Components and Server Actions in React 19
Featured Workshop
Maurice de Beijer
Maurice de Beijer
Calling all React developers! Join us for an immersive 4-hour workshop diving deep into React Server Components and Server Actions. Discover how these game-changing technologies are revolutionizing web development and learn how to harness their full potential to build lightning-fast, efficient ap...
Make Real: Tldraw’s Accidental AI Play
React Day Berlin 2024React Day Berlin 2024
32 min
Make Real: Tldraw’s Accidental AI Play
I'm Steve Ruiz, the founder and CEO of Tealdraw. TLDR is a canvas app in React that allows developers to build with their SDK. TLDR pays attention to details that enhance the canvas experience and can be used to interact with different elements. TLDR's demos showcase its versatility, but may not perform well on social media. TLDR's AI collaboration features allow users to quickly turn their drawings into AI-generated images. The Make Real project helps users create user interfaces by drawing and providing prompts, generating working prototypes. The system behind Make Real can handle complex interactions and ambitious projects. OpenAI integration and the Steel Draw Computer enable building workflows and multi-stage generations. The goal is to bring the Canvas from being specialized to a primitive for the web. Teal Draw is free for open source and non-commercial use, with options to purchase licenses for additional features.
Experimentation Driven Development
JSNation US 2024JSNation US 2024
10 min
Experimentation Driven Development
Watch video: Experimentation Driven Development
Hi, I'm Graham, co-founder of GrowthBook, and in this lightning talk, I'll cover experimentation-driven development. We'll explore how we build products today, the issue of knowing if our shipped products actually work, and the solution: experimentation-driven development. A-B testing is a controlled way of measuring the impact of changes on real users. It involves starting with a hypothesis, assigning users to different groups, exposing them to different variants, and tracking their behavior. Examples from Airbnb and Netflix show the varying success rates of A-B tests. On average, only one-third of tests are successful in moving the desired metrics. Without testing, you're just guessing. Common objections include relying on before and after data without controlled experiments. A-B testing helps control for variants and noise in data, allowing you to determine causation. User testing with small sample sizes may not provide accurate insights. Integrating A-B testing into the development process helps define hypotheses, track metrics, and iterate quickly. Use feature flags to easily test and roll out changes. Feature flags add safety by separating code deployment from feature release. A-B testing allows conditional feature release and provides statistical results. A-B testing replaces differences of opinion and celebrates learning from failures. Hypothesis testing is crucial for determining the success of a project. Experimentation driven development is easy and should be done on every project.
Micro Frontends and Security
JSNation US 2024JSNation US 2024
23 min
Micro Frontends and Security
Watch video: Micro Frontends and Security
Welcome to a session about micro-frontends and security. This Talk discusses the vulnerabilities in micro-frontend systems, including injections, insecure design, and security misconfiguration. It also explores identification and authentication flaws, and suggests mitigation strategies like using session cookies and secure HTTP channels. The Talk highlights the importance of implementing a gateway for enhanced security and addresses concerns about insecure design. It emphasizes integrity verification of JavaScript files and the prevention of code injection. The use of environment variables and configuration mismanagement is also discussed, along with the importance of vulnerability scanning and testing. The Talk concludes by emphasizing the need for authenticity and monitoring in micro-frontend development.
LLMs: What They Are and How to Leverage Them?
React Summit US 2024React Summit US 2024
112 min
LLMs: What They Are and How to Leverage Them?
Workshop
Nathan Marrs
Alexandra Vargas
2 authors
Join Nathan and Alexa 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 wi...
From Hip-Hop to Code
React Day Berlin 2024React Day Berlin 2024
26 min
From Hip-Hop to Code
Today, Elisabeth Oliveira shares her journey from being a hip-hop artist to becoming a design engineer. She highlights her experiences as an artist, including collaborations with Nike and Cristiano Ronaldo, but also the challenges of exploitation and cyberbullying. Transitioning into coding, she faced setbacks but found success as a coder in Dublin. She discusses her project, Cassette Tape, which automates illustrations and won the React Amsterdam award. Elisabeth also demonstrates her SVG audio player and performs a karaoke version of her song. She encourages combining passions with code and emphasizes the importance of open source. She concludes with insights on reconciling with hip-hop and starting projects. Overall, she shares her experiences in bridging the music and tech worlds.
It’s Time to Fall in Love With CSS (Again)
JSNation US 2024JSNation US 2024
11 min
It’s Time to Fall in Love With CSS (Again)
Watch video: It’s Time to Fall in Love With CSS (Again)
Hi, I'm Tony Alisea, a developer with over 25 years of experience. CSS won in the 90s due to its separation of structure and presentation, cascade concept, and powerful selectors. JavaScript developers fell out of love with CSS when they started using frameworks to construct the DOM. Instead of looking at the DOM holistically, we began to think in terms of componentization. CSS has continued to grow and add extraordinary features, such as CSS nesting and cascade layers. CSS layers give more control over the layering of CSS styles. Container queries allow us to respond to the size of the container instead of the viewport. The has pseudo class enables selecting parent elements. CSS is now more component-friendly and improves the user experience.
Computer Vision on Your Browser With SVG Filters
JSNation US 2024JSNation US 2024
22 min
Computer Vision on Your Browser With SVG Filters
I'm Adam Klein, the CTO and co-founder of Cover with Double V, a swag store platform. We use computer vision to create cool effects with SVG filters. In this talk, I'll share two magic tricks and teach you how to create a green screen filter using SVG markup. I can apply different filters on text, images, and videos using HTML or SVG. SVG filters allow easy debugging and parameter manipulation. The displacement map is a simple primitive that displaces pixels based on the red and green values. The frosted glass effect is achieved by using the displacement map filter. The green screen filter selectively reduces the opacity of green pixels while keeping other pixels opaque. After experimenting with different values, I discovered a formula that effectively applies the green screen filter using SVG filters. SVG filters are widely used in production and are supported in all major browsers. They are highly performant, running on the GPU. Working with SVG filters requires creativity and experimentation to achieve desired effects.
Popular
JavaScript
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.
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!
Master JavaScript Patterns
JSNation 2024JSNation 2024
145 min
Master JavaScript Patterns
Top Content
Featured Workshop
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...
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.
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.
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.
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.
React
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.
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.
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.
AI for React Developers
React Advanced 2024React Advanced 2024
142 min
AI for React Developers
Featured Workshop
Eve Porcello
Eve Porcello
Knowledge of AI tooling is critical for future-proofing the careers of React developers, and the Vercel suite of AI tools is an approachable on-ramp. In this course, we’ll take a closer look at the Vercel AI SDK and how this can help React developers build streaming interfaces with JavaScript and...
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.
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
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.
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.
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.
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.
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.
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
WorkshopFree
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
WorkshopFree
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
WorkshopFree
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...
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
WorkshopFree
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
JSNation 2024JSNation 2024
88 min
How to Build Front-End Access Control with NFTs
WorkshopFree
Solange Gueiros
Solange Gueiros
Understand the fundamentals of NFT technology and its application in bolstering web security. Through practical demonstrations and hands-on exercises, attendees will learn how to seamlessly integrate NFT-based access control mechanisms into their front-end development projects.
Building Your Generative AI Application
React Summit 2024React Summit 2024
82 min
Building Your Generative AI Application
WorkshopFree
Dieter Flick
Dieter Flick
Generative AI is exciting tech enthusiasts and businesses with its vast potential. In this session, we will introduce Retrieval Augmented Generation (RAG), a framework that provides context to Large Language Models (LLMs) without retraining them. We will guide you step-by-step in building your ow...
Build Peer-to-Peer Applications with Pear Runtime
JSNation 2024JSNation 2024
152 min
Build Peer-to-Peer Applications with Pear Runtime
WorkshopFree
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
WorkshopFree
Brian Love
Brian Love
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn...
AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store inf...
Upcoming events
GitNation Logo
Korben
Dallas
[email protected]
Want to have access to all events for 4x less?
JSNation 2025 logo
JSNation 2025
Amsterdam, Jun 12 - 16, 2025
React Summit 2025 logo
React Summit 2025
Amsterdam, Jun 13 - 17, 2025
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
TechLead Conference 2025 logo
TechLead Conference 2025
June, 2025
C3 Dev Festival 2025 logo
C3 Dev Festival 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