Talks from our events
Latest
All talksBreaking the Code Behind Realtime Collaboration With Websockets
JSNation US 2024

20 min
Breaking the Code Behind Realtime Collaboration With Websockets

Hello, I'm Vitor Norton, a developer advocate at SuperViz. I'm passionate about connecting people, highly dependent on my productivity tools, and love the idea of working anywhere in the world. Working remotely is a top priority, but we also don't want to feel alone. Let's explore some examples of companies that have addressed this issue: Gather Town, Miro, and Microsoft Teams. Collaborative components enable real-time collaboration by synchronizing participants' actions. The mouse pointers component utilizes a room concept to synchronize mouse positions. Channels and WebSockets are used for real-time data synchronization. CR-DTS is a conflict-free data-related type used to handle counter conflicts in collaborative environments.
Micro Frontends and Security
JSNation US 2024Watch video: Micro Frontends and Security

23 min
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.
Temporal: Modern Dates and Times in JavaScript
JSNation 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!
Build RAG from Scratch
JSNation US 2024Watch video: Build RAG from Scratch

20 min
Build RAG from Scratch

Today's Talk explores the concept of Retrieval Augmented Generation (RAG) and its application in building chatbots. RAG involves giving language models more context by retrieving relevant data. This is achieved by creating vectors for each talk and using cosine similarity to compare them. The talk emphasizes the limitations of word-based vectors and the benefits of using embedding models and vector databases. By replacing word-based models with vector search, content can be sorted and retrieved more efficiently. RAG, along with large language models and AI, has the potential to enhance scalability and unleash new possibilities.
Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure
React Summit US 2024Watch video: Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure

15 min
Accelerating Value With HubSpot’s Unique Deployment Process and Team Structure

Welcome to Accelerating Value with HubSpot's deployment process and team structure. HubSpot is a leading growth platform that empowers businesses of all sizes to scale and succeed in the digital age. HubSpot's customer-centric approach focuses on value delivery, prioritizing the user experience, and building trust through consistent interactions. The front-end tech stack includes TypeScript, React, Redux, Styled Components, and GraphQL. HubSpot utilizes various developer tools to streamline workflows and reduce the technical burden on engineers. The testing philosophy at HubSpot emphasizes comprehensive testing, with a focus on unit, integration, and acceptance testing. HubSpot prioritizes customer-centricity, fosters innovation with small teams, and enhances developer efficiency with custom tooling.
Watch Me Run Malware From NPM
JSNation US 2024Watch video: Watch Me Run Malware From NPM

21 min
Watch Me Run Malware From NPM

I'm Zebe, a JavaScript developer with a focus on security. Let's talk about the risks of consuming NPM packages, particularly malicious ones. We explore how to obtain and run malware, as well as evaluate and analyze JavaScript malware in Node.js. Malware can be delivered as pre-compiled bytecode, and defenses involve tools like npm audit. Hardin JavaScript and Lafamote are security tools that protect JavaScript applications and dependencies. Lafamote puts each package in its own compartment and provides tooling to create access policies. It prevents stolen cookies and restricts access to sensitive globals. Limited time offer to help set up projects with Lafamote.
Security Matters for Frontend Too! 7 Steps to More Secure React Apps
React Summit US 2024Watch video: Security Matters for Frontend Too! 7 Steps to More Secure React Apps

29 min
Security Matters for Frontend Too! 7 Steps to More Secure React Apps

This talk covers seven steps to secure React apps, including dependency management, validation, secrets management, code exposure, content security, security implementation, and additional security measures. It emphasizes the importance of understanding dependencies and risks, using tools like NPM Audit and Socker.dev. It also highlights the need for dependency validation and package namespace, as well as input validation using libraries like Zod and Valobot. Secrets should be managed using tools like .env and a secrets manager, while code exposure can be minimized by separating server-side and client-side code. Content security policies and tools like Next Safe and Helmet are recommended for implementation. Additional measures include deep code analysis, code execution monitoring, and strict content security policies.
React Native, Meet node.js Native Addons
React Summit US 2024Watch video: React Native, Meet node.js Native Addons

18 min
React Native, Meet node.js Native Addons

We'll be going over the use cases of Node.js native add-ons and how they are written with NodeAPI. ABI stability allows swapping out older versions of a library for newer ones without recompiling the rest of the app. Node API enables the use of the latest Hermes regardless of React Native Windows. NativeScript is a library for calling native APIs from JavaScript, eliminating the need for dealing with native code. To initialize the addon in React Native, we modified the approach by auto-linking the native script XC framework. We can read the battery level using inline JavaScript and make view changes like setting the background color. React Native reanimated can be used to work on the UI thread. Support for Node.js native add-ons and completion of the official ABI stable Hermes API would open up the ecosystem.
Computer Vision on Your Browser With SVG Filters
JSNation 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.
Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments
JSNation US 2024Watch video: Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments

19 min
Leveraging Data Flow Programming for Scalable and Efficient AI Systems in Distributed Environments

Today's Talk introduces Graphi, a declarative dataflow programming environment for AI. It emphasizes the importance of asynchronous APIs and deep programming environments in the era of AI. The JavaScript version of OpenAPI enables easier handling of multiple asynchronous calls. Declarative dataflow programming improves efficiency and async/await simplifies calling asynchronous API functions. To further optimize asynchronous programming, a dataflow approach is recommended. Graphi allows building conversational graphs and handling cyclic dataflow. It offers advantages like parallelism, resultability, and scalability. Graphi introduces new concepts like nested graphs and distributed computing. It is an open-source project actively being improved and welcomes contributions.
Featured
From Friction to Flow: Debugging With Chrome DevTools
JSNation 2024

32 min
From Friction to Flow: Debugging With Chrome DevTools

The Talk discusses the importance of removing frictions in the debugging process and being aware of the tools available in Chrome DevTools. It highlights the use of the 'Emulate a Focus Page' feature for debugging disappearing elements and the improvement of debugging tools and workflow. The Talk also mentions enhancing error understanding, improving debugging efficiency and performance, and the continuous improvement of DevTools. It emphasizes the importance of staying updated with new features and providing feedback to request new features.
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
React Summit US 2024Watch video: Chrome DevTools: State of the Union 2024 - Debugging React & Beyond

30 min
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Top Content
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.
What's New in Vite 6
JSNation US 2024Watch video: What's New in Vite 6

29 min
What's New in Vite 6

Vite, a popular build tool for front-end development, has seen significant growth since its public release in 2021. It has been downloaded 12 million times and has over 1,000 contributors. Vite offers benefits such as a powerful dev server, hot module reloading, and a plugin API based on Rollup. However, there are limitations with server-side rendering that require extra code and handling of SSR flags. Vite's environment API allows for cleaner communication between the browser and server, and plugins can configure and customize specific environments. The future plans for Vite include stabilizing the environment API and integrating Rolldown Vite for faster builds. Vite is compatible with various front-end frameworks and is used by projects like Vaku and Vinci. The environment API has potential for per-local builds and building on older versions of Node, but may not be recommended for internationalization purposes.
React Query API Design – Lessons Learned
React 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.
Bring the Power of AI to Your Application
C3 Dev Festival 2024

28 min
Bring the Power of AI to Your Application

This Talk covers various aspects of artificial intelligence and user experience in software development. It explores the evolution and capabilities of large language models, the importance of prompt engineering, and the need to design AI applications with human users in mind. The Talk also emphasizes the need to defensively design for AI failure, consider user happiness, and address the responsibility and risks of AI implementation. It concludes with recommendations for further reading and highlights the importance of trustworthiness in AI code tools.
How to Turn Engineering Work into a Promotion
C3 Dev Festival 2024

29 min
How to Turn Engineering Work into a Promotion

This Talk discusses the process of building a toolkit and applying neurolinguistic programming techniques to succeed in software development. It emphasizes the importance of self-promotion and setting effective goals for career advancement. The concept of a brag bank is introduced as a tool to collect and remember achievements. The NNQ method is presented as a way to build a compelling case for promotion using names, numbers, and quotes. It also explores the idea of having a backup plan and considering alternative options when promotion is not feasible. Finally, the Talk touches on the importance of positive thinking, knowing when to move on, and avoiding excessive specialization.
How React Router Became a Framework
React Advanced 2024

31 min
How React Router Became a Framework

My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.
Tanstack Start - A Client-Side First Full-Stack React Framework
React Summit US 2024

30 min
Tanstack Start - A Client-Side First Full-Stack React Framework
Top Content
We surveyed thousands of developers to show that a louder audience leads to a better presentation. There has been a shift in web app development towards server-first architectures, which has improved full-stack capabilities but at the cost of complexity and divergence from the client-centric approach. Tanstec Start is a meta-framework that aims to provide the best client-side authoring experience with powerful server-side primitives. The Tansec Router supports advanced routing features, URL state management, and JSON storage. Combined with the server-side rendering capabilities of TanStack Start, it becomes even more powerful. The TanStack Router has isomorphic loaders and integrates seamlessly with TanStack Query for additional features like polling and offline support. UseSuspenseQuery allows for dynamic streaming of data during SSR. TanStack Start also offers server-side features, API routes, server functions, and middleware. The future plans include RSCs, websockets, real-time primitives, and static pre-rendering. TanStack Start is now in beta and is suitable for building React apps. It is open source.
htmx Is Pro-JavaScript
JSNation 2024

22 min
htmx Is Pro-JavaScript

HTMX is a JavaScript library that extends HTML and works with a JSON API. It generalizes the functionality of links and forms, making any element a potential hypermedia control. HTMX simplifies the implementation of hypermedia functionality with a dozen core attributes. It can achieve powerful UI results without writing much JavaScript. HTMX complements JavaScript libraries and enhances user experience by providing functionality that the browser lacks.
10 Years of Vue: the Past and the Future
Vue.js Live 2024

29 min
10 Years of Vue: the Past and the Future

Hello everyone and welcome to Vue.js Live 2024. In this Talk, Evan Yew, the creator of Vue and Vite, shares a 10-year retrospective on Vue.js, discussing its history, technical impact, and how it is being kept alive. Vue has made significant contributions to the JavaScript ecosystem and is the only mainstream framework that remains independent. The latest release, Vue 3.4, introduced performance improvements and a more efficient reactivity system. Future plans include reactivity efficiency improvements, stabilizing reactive props, and exploring vapor mode. Vue is here to stay and will continue to support the community.
Trending today
Mastering Cache Control: Optimizing Performance for React Applications
React Day Berlin 2024

10 min
Mastering Cache Control: Optimizing Performance for React Applications

Today we're going to talk about utilizing caching to optimize our web application performance. We will discuss caching data and resources outside of our React application, how to control and avoid caching problems, and the benefits of caching for improving web application loading times and reducing server load. We can cache static resources like images, media files, scripts, and CSS, as well as application data like the list of articles or posts. However, we need to be cautious with caching data that may become outdated. The service worker and browser cache can intercept network requests and load responses from their caches. Additionally, headers such as cache control and eTag can be used to control caching behavior. The CDN, a content delivery network, maintains cached resources globally and aims to deliver content efficiently. Different caching points store various types of content, improving performance and enabling offline functionality.
A Look Ahead at Web Development in 2025
JSNation US 2024

32 min
A Look Ahead at Web Development in 2025
Top Content
Today, Wes Boss introduces the new features of the web, including customizable select and temporal, a standardized API for working with dates, time, and duration. The current date API in JavaScript has some problems related to time zones and date manipulation. With the temporal API, you can create dates without a time zone, specify dates without a year, and create durations without being attached to a specific date. The API also provides features for finding the difference between two dates. Invokers is a declarative click handlers API that eliminates the need for JavaScript. Speculation API enables pre-rendering and pre-loading of pages, improving performance. The CSS Anchor API allows positioning elements based on another element's location. Web components are encapsulated, framework-agnostic, and easy to use, offering a standardized approach for building reusable UI components. Building media UI components, like video players, is made easier with web components like Shoelace. Transformers JS allows running AI models in JavaScript for tasks like emotion detection and background removal. Python doesn't run in the browser, but JavaScript does. Small AI models can be loaded and executed faster in the browser using technologies like WebGPU. Animate height auto transition using calc size. Apply starting styles to elements for smooth animations. Use Vue transition for CSS and JavaScript animations. Syntax website with Vue transition for smooth page transitions. CSS relative colors allow for lighter or darker shades. Scope CSS ensures styles only apply to specified div containers. Web primitives facilitate modern JavaScript code. You can create web requests and receive web responses using the same primitives on both the client and server. There are many new web standards that work everywhere and frameworks like Hano and Nitro are built upon them. The select and Popover elements are accessible by default. Most of the discussed features will be available in all browsers by 2025. The future of web development with AI is uncertain, but web developers should embrace AI tools to improve efficiency. Implicit CSS lazy loading depends on whether it's prefetching or pre-rendering. Wes Boss discusses the specific features he is excited about in web development, including starting style, calc auto, and allowed discrete. He shares his preferred way of staying informed on new web development discoveries, emphasizing the importance of being part of the community and keeping up with industry discussions. Wes also mentions reading W3C meeting notes and recommends following the Twitter account Intent2Ship to stay updated on upcoming CSS features. Lastly, he discusses the potential impact of the new Scope CSS feature on developers' management of styles.
Building a JS Engine -- For Fun!
JSNation 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.
The Ai-Assisted Developer Workflow: Build Faster and Smarter Today
JSNation 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.
Search Speed: Making Expedia Flights Faster
JSNation 2024

10 min
Search Speed: Making Expedia Flights Faster

The Talk discusses how the engineering team at Expedia improved the performance of customer flight search by using various metrics and techniques. These include prefetching resources during browser idle time, preemptive search to predict responses, and optimizing performance through micro queries and a micro front-end architecture. The team also focused on improving build and package size limits for better code analysis. Performance monitoring and automation were implemented for ongoing performance improvements.
Building Scalable Multi-Tenant Applications With Next.js
React Summit US 2024Watch video: Building Scalable Multi-Tenant Applications With Next.js

12 min
Building Scalable Multi-Tenant Applications With Next.js

Hello and namaste, New York. I'm excited to talk about building scalable multi-tenant applications with Next.js. We'll cover what multi-tenancy is, its advantages, key considerations, and how Next.js aids in development. Before starting multi-tenancy, let's understand what a tenant is. In multi-tenant architecture, all tenants share the same app but have different access, roles, and permissions. Easy maintenance, efficiency, scalability, and cost-effectiveness are some of the benefits of multi-tenancy. However, challenges include scalability, isolation, security, and customization. Next.js allows for easy organization of different domains and paths. Dynamic routing in Next.js enables the customization of layouts for each tenant, ensuring a personalized look and feel. Next.js API routing allows for isolating data fetching for different tenants. Middleware can handle request validation and provide features like authentication, authorization, server-side redirects, conditional redirects, and data isolation. Next.js offers scalability through caching, a component-based and modular approach, load balancing, serverless functions and platforms, and different types of rendering. Next.js continues to evolve and is a popular choice for multi-tenant architecture.
Using UDP in the Browser for faster Client/Server Connections
JS GameDev Summit 2023

21 min
Using UDP in the Browser for faster Client/Server Connections
Top Content
This talk introduces geckos.io, a real-time client-server communication library using UDP and WebRTC. The speaker discusses the benefits of UDP for real-time multiplayer games and explains how geckos.io enables UDP connections between browsers and Node.js servers. The deployment process for geckos.io involves opening UDP ports and handling signaling through an HTTP request. The speaker demonstrates how geckos.io works with Docker and showcases the ability to host multiple servers on the same machine. Overall, this talk provides an overview of geckos.io and its applications in real-time communication.
The Superpower of ASTs: How We Saved 16% on Our Bundle Size
React Day Berlin 2024

20 min
The Superpower of ASTs: How We Saved 16% on Our Bundle Size

Our story is about a super tool that reduces bundle size without changing code. It removes input statements, improves performance, and reduces bundle size. ASTs are used to optimize constant files by removing references and replacing with values. Bubble is a tool for code manipulation using ASTs. Manipulating code with Bubble paths allows for removing unnecessary variable declarations. Careful handling and testing are necessary when using AST tools. Guarding assumptions and writing exec tests are key practices. Completing the AST development lifecycle ensures correct code updates. ASTs are a powerful tool for software development.
Deep Dive into Undici
Node 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 2024

30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
Short takes
Webdevelopment Tailored for 2024
React 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.
Build Your Own Component Library, With `Shadcn-vue`
Vue.js Live 2024

7 min
Build Your Own Component Library, With `Shadcn-vue`

Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.
Aligning Patterns Across Design and Development
React Summit US 2024

8 min
Aligning Patterns Across Design and Development

I'm Jake, a developer advocate at Figma, and today I'll be discussing aligning patterns between design and development. Collaboration between designers and developers requires recognizing our different perspectives. The goal is to close the gap between design and development, but this is often aspirational. The optimal path between design and development is somewhere in between, depending on factors like friction or waves. By recognizing each other's areas of resistance, we can find ways to make collaboration more effective. Figma's Code Connect fills the gap between Figma component logic and code logic by allowing teams to publish code-based informed component code snippets. CodeConnect currently supports HTML, Web Components, Angular, Vue, React, SwiftUI, and Jetpack Compose, and seeks to support more languages.
Observability Matters: Enhancing Performance of our Node Application with OpenTelemetry
Node 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.
Next.js: Reshaping Web App Architecture for Performance Excellence
React 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.
First Comes Conflict, Then Comes Growth
React Summit 2024

6 min
First Comes Conflict, Then Comes Growth

Conflicts in software development often arise from the roles of victim, persecutor, and rescuer in the drama triangle. Shifting to a creator role helps navigate conflicts by focusing on learning and improving. Navigating conflict involves preventing rescue, providing feedback, and challenging others. Managers can play a crucial role as coaches instead of rescuers. By encouraging a shift to the empowerment dynamic, unnecessary drama and conflict can be avoided.
JSR – Next Generation JavaScript Registry
JSNation 2024

6 min
JSR – Next Generation JavaScript Registry

JSR is a new JavaScript registry that supports TypeScript and offers additional features like GitHub Action integration, provenance attestations, and documentation generation. It provides a simple website with package search, documentation, and a gamified score. The process of publishing a new package in JSR involves creating a JSR.json file with package details and exports, using MPX JSR publish to publish the package, and approving authorization in the browser. However, documentation for the package is not automatically generated and needs to be manually added.
Can AI Turn Us Into 10x Developers?
JSNation 2024

7 min
Can AI Turn Us Into 10x Developers?

AI can help developers become 10x more efficient by leveraging powerful GPUs. Codium is an AI developer tool that can accelerate learning, analyze dependencies, and provide personalized coding experiences. It abstracts away complexity and allows developers to focus on building user experiences. Codium aims to transform the software industry and empower developers to become 10x engineers.
Define the Relationship with Monorepos
React Summit US 2024Watch video: Define the Relationship with Monorepos

6 min
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.
Server-Driven Mobile Apps With React Native
React Summit 2024

8 min
Server-Driven Mobile Apps With React Native

Today, we explore server-driven UI in React Native, which allows for scalable and complex UIs without incurring tech debt. Project Lightspeed simplifies UI definition and reduces code duplication. Server-driven UI, used by industry giants like Shopify and Airbnb, enables flexibility and platform consistency. Additionally, Evan Bacon's talk at ReactConf introduces the vision of universal React server components in server-driven UI.
Popular
React Query - The Bad Parts
React Day Berlin 2024

30 min
React Query - The Bad Parts
Top Content
React Query is a popular library with significant weekly downloads and positive user sentiment. It may have trade-offs like bundle size, but the actual size shipped is smaller. Bundle size optimization can be achieved by exporting only necessary features. React Query's declarative approach eliminates the need for custom data fetching solutions. It offers caching, request duplication, background updates, and more. RackQuery doesn't support normalized caching, but refetching after invalidation works fine. React's vision includes suspense architecture and server components. The documentation could be improved with a more structured flow. TensorStack Query can be a good choice for Next.js apps, but not necessary with mature frameworks. The 10 stack query and router concepts were discussed. Combining React Query with HTTP caching provides a robust caching solution.
Yarn 4 - Modern Package Management
JSNation 2022

28 min
Yarn 4 - Modern Package Management
Top Content
Yarn is a package manager that focuses on stability, performance, and security. It offers unique features like plug and play installation, support for nonmodules, and the exec protocol. Yarn is committed to being a good citizen in the open-source community and contributes to fixing dependencies. It is part of the Node.js Loader's working group and advocates for Corepack. Yarn is still experimental but is improving its user experience and security features. Contributions are welcome, and switching to Yarn can improve performance in large projects.
If You Were a React Compiler
React 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.
Build a 3D Solar System with Hand Recognition and Three.js
JSNation 2022

36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
From Blender to the Web - the Journey of a 3D Model
React Advanced 2021

27 min
From Blender to the Web - the Journey of a 3D Model
Top Content
This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.
Understanding React’s Fiber Architecture
React Advanced 2022

29 min
Understanding React’s Fiber Architecture
Top Content
This Talk explores React's internal jargon, specifically fiber, which is an internal unit of work for rendering and committing. Fibers facilitate efficient updates to elements and play a crucial role in the reconciliation process. The work loop, complete work, and commit phase are essential steps in the rendering process. Understanding React's internals can help with optimizing code and pull request reviews. React 18 introduces the work loop sync and async functions for concurrent features and prioritization. Fiber brings benefits like async rendering and the ability to discard work-in-progress trees, improving user experience.
Killing BFFs with GraphQL and Next.js
React Advanced 2021

21 min
Killing BFFs with GraphQL and Next.js
Top Content
This talk discusses the challenges and benefits of using Backend for Frontends (BFFs) and microservices in software development. It highlights how Next.js can simplify the creation of BFFs and unify the gateway for microservices. The talk also emphasizes the advantages of Next.js API routes in simplifying the development, deployment, and maintenance of APIs. It showcases the implementation of a BFF using Next.js and API routes, and the extension of API routes in an executable way. The speaker also mentions launching a course on using Next.js API routes for building a serverless GraphQL API.
Building a modular monolith with Fastify
Node Congress 2023

30 min
Building a modular monolith with Fastify
Top Content
Fastify is a powerful tool for building web applications and APIs in Node.js, with millions of downloads per month. It promotes encapsulation and structuring through plugins and decorators, allowing for code and data segmentation. The talk emphasizes the importance of modularizing applications by domains and features, and showcases a demo of a typical Fastify application. The speaker also discusses the benefits of using Platformattic for refactoring and launching Fastify applications in the cloud. The Q&A section covers topics such as dependency injection and debugging, while also highlighting the importance of separating business logic from API contracts.
Micro-Frontends With React & Vite Module Federation
React Advanced 2023Watch video: Micro-Frontends With React & Vite Module Federation

20 min
Micro-Frontends With React & Vite Module Federation
Top Content
Microfrontends is an architecture used by big companies to split monolithic frontend applications into manageable parts. Maintaining a consistent look and feel across different microfrontends is a challenge. Sharing styles can be done through Vanilla CSS, CSS modules, or CSS in JS. JavaScript variables can be used in styles, but readability and runtime overhead are considerations. Sharing state in microfrontends can be achieved through custom events, broadcast channels, shared state managers, or custom PubSub implementations. Module federation with Vite allows for client composition and sharing dependencies. Configuration is similar to Webpack, and future work includes working on the QUIC framework.
The Good, The Bad, and The Web Components
JSNation 2023

29 min
The Good, The Bad, and The Web Components
Top Content
Web Components are a piece of reusable UI enabled by web standards and built into the web platform. They offer the potential for faster component initialization and less library overhead. Web Components can be created from scratch and utilized with existing component libraries. Shadow DOM and Declarative Shadow DOM provide benefits such as scoped CSS and server-rendered components. The tradeoff between not repeating oneself and achieving full server-side rendering support is discussed. User experience is deemed more important than developer experience.
JavaScript
Peace, Love and JavaScript
Node Congress 2024

17 min
Peace, Love and JavaScript

The OpenJS Foundation supports the entire JavaScript ecosystem and thousands of open source projects. They follow a neutral nonprofit organization with separate business and technical governance to minimize drama. Rebooting governance and addressing intellectual property can also help reduce conflicts. OpenJS provides collaboration spaces and support in various areas for open source projects. They foster a collaborative environment and invite participation in their projects.
Building a JS Engine -- For Fun!
JSNation 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.
Future of Frontend Frameworks Fireside Chat
React Summit 2024







28 min
Future of Frontend Frameworks Fireside Chat







6 authors
Signals are being adopted by popular frameworks, enabling code reuse and improved tooling. While merging between frameworks is unlikely, they are learning from each other and adopting shared practices. It is important to embrace the diversity of frameworks and libraries. Instead of merging, focus on standardizing the principles behind frameworks. Consider tradeoffs and benefits when choosing a framework, and explore different technologies to learn new ideas.
Testing: Do More With Less
JSNation 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
Is React Really Dying?
React 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.
Build AI Apps in 5 Minutes: Live Demo With Vercel AI Sdk, v0.dev, and Rag!
React 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.
Perfect Pitch: Unveiling the Mathematical Symphony Behind a Guitar Tuner
React 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 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.
The Suspense Quest - Inside React's Magic
React 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.
Let's Build Suspense 🥁
React 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.
Building End-to-End Encrypted Apps (Web & React Native)
React 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.
Sketching with Code: Integrating React and p5.js
React Summit US 2024

30 min
Sketching with Code: Integrating React and p5.js

Hello React Summit! Senior software engineer building educational experiences at NewZella. Passionate about helping people get involved with open source. Creative coding journey started on Neopets. Have a CodePen with examples in p5.js, svg.js, and CSS. Talk is about p5.js and React, building an application to generate a grid pattern. Incorporating user inputs into the creative process using p5.js and React. Art exhibit at the Wellcome Museum inspired by generative art. True shade tiles and the 10 print algorithm inspired the pattern in our example. p5.js is a JavaScript library for creative coding, accessible to different backgrounds. Order is important in p5.js. React is better at managing complex state. Use the p5.js React wrapper to simplify integration. Use p5.js in instance mode to avoid naming collisions. Instance mode is safer and helpful as the project grows. Use destructuring to get values from input. Lerp color function creates color gradients. Use random seed for consistent random numbers in animations. Struggling with making the Canvas mobile-friendly. Animating P5.js sketches without relying on CSS. Optimizing canvas elements. P5.js and WebGL for 3D rendering. Conclusion and appreciation.
React in the Autonomous Robotics Industry
React Summit 2024

11 min
React in the Autonomous Robotics Industry

Hamza Hawi, a software engineer at the Autonomous Robotics Research Center, discusses the use of React and Leaflet in robotics. The research center utilizes a mixed fleet of robots and relies on React for mission planning software, while Leaflet is used for mapping and custom layers. Leaflet offers flexibility for different types of vehicles and supports the creation of custom layers like image and video overlays. Additionally, the talk mentions the use of video overlays for weather forecasts and optimizing joystick usage with a strategy design pattern.
The Art of Ignoring Best Practices for React Performance
React 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.
Node.js
Understanding Package Resolution in Node.js
Node 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.
Parsing Millions of URLs per Second
Node 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.
Making My Node.js API Super Fast
Node 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.
Milo, a New HTTP Parser for Node.js
Node 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.
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
Node 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.
Creating an HTTP Server from Scratch with Node-addon-api, Libuv, and Milo
Node 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 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.
Testing
Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise
JSNation US 2024Watch video: Twenty Years of Web Testing: From Selenium's Dawn to Vitest's Promise

22 min
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.
We May Not Need Component Testing
Vue.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.
Behind the Scenes of a Visual Regression Test
React 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.
Accessibility Granted: Building Inclusive Components One Test at a Time
React Summit US 2024Watch video: Accessibility Granted: Building Inclusive Components One Test at a Time

18 min
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.
Beyond React Testing Library: Testing React Libraries (and library-like code)
React 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.
No More Mocking! Write Better Tests For Your Nuxt Application With Contract Tests
Vue.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.
Testing Alternative Runtimes with Node and Vitest
Node 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 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.
Maestro & Expo: Crafting the Future of Efficient e2e Testing
React 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.
Advanced Playwright Techniques for Flawless Testing
JSNation 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.
Upcoming events
Subscribe to the top JS conferences
and grow in-depth as engineer with insights from library authors and core teams
Learn more