#performance

I'm Nadia, a developer experienced in performance, re-renders, and React. The React team released the React compiler, which eliminates the need for memoization. The compiler optimizes code by automatically memoizing components, props, and hook dependencies. It shows promise in managing changing references and improving performance. Real app testing and synthetic examples have been used to evaluate its effectiveness. The impact on initial load performance is minimal, but further investigation is needed for interactions performance. The React query library simplifies data fetching and caching. The compiler has limitations and may not catch every re-render, especially with external libraries. Enabling the compiler can improve performance but manual memorization is still necessary for optimal results. There are risks of overreliance and messy code, but the compiler can be used file by file or folder by folder with thorough testing. Practice makes incredible cats. Thank you, Nadia!

The Talk discusses the NextPaint metric, a new performance metric introduced by Google that measures the speed of clicks or keyboard input on a page. It explores how React rendering can impact the NextPaint metric and offers optimization techniques such as using the useTransition hook in React 18. The Talk also covers the changes introduced in React 18's rendering process, the impact of wrapping with suspense, and the replacement of the First Input Delay metric with the interaction to the next page. The limitations of useTransition and general React performance optimization strategies are also discussed.

This Talk on web performance and React explores various metrics such as time to first bite, largest contentful paint, cumulative layout shift, and first input delay. It highlights the challenges of JavaScript in impacting total blocking time and user experience. Mobile usage and device performance are discussed, along with the importance of measuring and improving page performance. The speaker also mentions the abundance of technologies in today's web and emphasizes the need to prioritize user experience over sending excessive JavaScript.

This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

This Talk introduces server components in React, which provide an intermediate format for rendering and offer advantages for both client-side and server-side rendering. Server components reduce bundle size on the client and improve search engine optimization. They abstract the rendering process, allowing for faster rendering and flexibility in choosing where to render components. While server components are still in the experimental stage, Next.js is a good starting point to try them out.

This Talk discusses digital sustainability and the role of JavaScript in web sustainability. It highlights the impact of electricity carbon intensity and page weight on carbon footprints. The Talk also examines JavaScript's contribution to the carbon footprint on mobile devices and emphasizes the importance of reducing unnecessary requests. The introduction of the carbon control tool, which provides performance data and estimates carbon footprints, is also mentioned.

React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.

The Talk discusses cases where common optimizations can make the app slower instead of faster, highlighting the impact of a CDN implementation on performance. The delay in the CDN connection process caused the first contentful paint to be delayed. Code splitting, while reducing bundle size, resulted in delayed rendering and worsened performance. Lazy loading images can cause performance issues, and image optimization needs to be carefully managed. Link, pre-connect, and pre-load headers can help with connection and loading cascades, but only if files are loaded later.

Nuxt is a web framework with many features including server-side rendering, client-side rendering, static site generation, edge site rendering, and more. The Edge is a limited environment running on CDN nodes, such as Cloudflare network. Database options on the Edge include Postgre with Neon, Versel on Neon, Superbase, MySQL with plan scale, HyperDB, and KV with redis and Cloudflare storage. The speaker demonstrates creating a demo with a votes table, handling API requests, adding authentication, saving votes, and displaying results. The roadmap to a full stack Nuxt 3 with an edge-first experience is in progress. Copilot is a helpful tool for developers. Integrating SSO with GitHub and improving the developer experience are important considerations for Nuxt 3.

BUN is a modern all-in-one JavaScript runtime environment that achieves new levels of performance. It includes BUN dev, a fast front-end dev server, BUN install, a speedy package manager, and BUN run, a fast package runner. BUN supports JSX, has optimized React server-side rendering, and offers hot module reloading on the server. The priorities for BUN include stability, node compatibility, documentation improvement, missing features in BUN install, AST plugin API, native Windows support, Bundler and Minifier optimization, and easier deployment to production. BUN's AST plugin API allows for bundle-time JavaScript execution and embedding code, potentially inspiring new frameworks.

The Talk discusses the importance of effective communication and collaboration in cross-cultural teams. It emphasizes the impact of culture on communication and performance evaluation. The speaker highlights the differences between low-context and high-context communication styles and the need to understand cultural nuances. It also explores the challenges of giving feedback in multicultural teams and suggests ways to improve communication and create a feedback culture. The influence of language on communication and the importance of transparency and honesty in feedback are also discussed.

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.

Today's Talk discusses the future of performance tooling, focusing on user-centric, actionable, and contextual approaches. The introduction highlights Adi Osmani's expertise in performance tools and his passion for DevTools features. The Talk explores the integration of user flows into DevTools and Lighthouse, enabling performance measurement and optimization. It also showcases the import/export feature for user flows and the collaboration potential with Lighthouse. The Talk further delves into the use of flows with other tools like web page test and Cypress, offering cross-browser testing capabilities. The actionable aspect emphasizes the importance of metrics like Interaction to Next Paint and Total Blocking Time, as well as the improvements in Lighthouse and performance debugging tools. Lastly, the Talk emphasizes the iterative nature of performance improvement and the user-centric, actionable, and contextual future of performance tooling.

PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.

Hello, everybody. Today, I'm going to talk about how I solved actual challenges in React using only CSS. One of the main packages I maintain is EmojiPicker React, with hundreds of thousands of weekly downloads. It has all the features you'd expect from an EmojiPicker, but the search capability was slow. I managed to fix it using CSS. Let me show you how. The search functionality relies on global state and requires updating each emoji individually, resulting in excessive DOM work. Virtualization or virtual scrolling is not a viable solution due to the non-uniform emoji list. By examining the DOM, I discovered that each emoji had an area label with search-related information. This led me to investigate further and implement a solution from scratch. We create a new component called CSS search, which takes a value as a string. If the value is empty, we return null. We remove all emojis from the emoji list if there are search results. Emojis that match the search term are displayed. Performance is instantaneous. Empty categories are removed using the CSS has attribute. The CSS not and has selectors are used to remove empty categories. A counter is used to display the count of emojis found. By using flexbox and order, we can position the after element at the beginning of the list. CSS nesting allows us to nest everything under the emoji list, simplifying the structure. The performance of the search is still very fast. I created the flareup package, a CSS in JS library specifically for NPM packages. Flareup solves compatibility issues and works on SSR and CSR. Emoji-picker-react uses flareup to render emojis without JavaScript. Flareup places a style element on the DOM, making it easy to use.

Welcome to my talk on long frames and INP, understanding the post-load performance. The rail model introduced in 2015 provides recommendations for responsiveness and organizing JavaScript work around user input. Metrics like FCP, FMP, and LCP measure visual completeness, while metrics like first interactive and CPU idle assess CPU idleness. Total blocking time measures the impact of long tasks on page responsiveness, and TTI assesses when the browser can respond to interactions reliably. INP is a user-centric responsiveness metric that encompasses all potential causes of slow interactions. The long animation frame API improves attribution and helps pinpoint performance problems. Tools like Vercel toolbar and trace viewer on PerfLab can visualize interaction to next paint. INP and long animation frames provide valuable insights for improving web experiences.

I'm Rohit, a founding engineer at Tria. We're working on bringing the world to web 3 using names. The talk focuses on optimizing performance by shifting from runtime to build time. Build time optimization improves performance, error detection, and bundle size. Case studies include GlueStack and React Native UStyle. React Native UStyle allows importing virtual components, while compilers transform source code and transpilers manipulate code structure. Babel is a JavaScript transpiler that offers benefits for React. AST Explorer is used to build a custom Babel plugin for removing console logs. The talk also covers bundlers like webpack, modules, loaders, and plugins in the bundling process.

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.

This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.

I'm going to be speaking about concurrency within React and how you can use it to improve performance within your applications. Concurrency is crucial for optimizing responsiveness and ensuring a good user experience in complex applications. React breaks up the rendering process into render and commit phases, allowing interruption of the render phase for prioritizing user interactions. React's task scheduler handles tasks in small chunks, ensuring a fluid user experience and responsiveness. High-priority tasks include user interactions, while lower priority tasks involve fetching data or rendering long lists. React introduced new hooks, useTransition and useDeferredValue, for handling state update priorities. The deferred value hook allows for deferring the updates of non-critical UI values, while Suspense for Data Fetching improves the performance of data fetching in React applications. Concurrency is useful for handling real-time search inputs, seamless tab or component switching, rendering large lists, and animating transitions. However, there are drawbacks to concurrency, such as potential delays in non-urgent updates and limited benefits for expensive components. Concurrency may add CPU strain and requires an understanding of React's background behavior for effective debugging. Use suspense on parent level components for data fetching. Performance profiling can help test the effectiveness of transition hooks.

Today's Talk explores modern front-end frameworks React, SolidJS, and Quick. React's popularity is attributed to its component-based architecture and extensive ecosystem. SolidJS distinguishes itself with fine-grained reactivity, efficient memory usage, and developer-friendly API. Quick (QUIC) stands out for its fast load times, resumability, server-side rendering, and prioritization of developer experience. QUIC's on-demand loading feature improves initial page load time by deferring non-critical code execution.

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.

Today's Talk explores the blurring boundaries of infrastructure design, driven by user involvement and evolving technology. User technical literacy and changing technology are reshaping the design landscape, blurring the lines between interface and infrastructure design. Privacy and user needs now play a crucial role in infrastructure design decisions. React's experimental APIs and common UX tools aid in designing infrastructure with user needs in mind. Identifying concerns and security vulnerabilities and collaborating with cross-functional partners are essential for robust infrastructure design.

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.

Today's Talk discussed web performance and internet penetration in Africa, highlighting the challenges of limited data plans and less powerful devices. The importance of considering internet accessibility when developing websites was emphasized, as slow-loading websites can result in negative reviews and lost customers. The concept of resumability, which delivers only necessary JavaScript for improved performance, was explored, along with the implementation of the QUIC framework to achieve this. QUIC framework was also discussed in terms of lazy execution and its ability to improve website performance and resource consumption.

Swift responsiveness is essential, and LLRT is a new JavaScript runtime optimized for serverless environments that offers improved performance and cost savings compared to other runtimes. LLRT achieves fast performance by removing complexities, leveraging Rust, and optimizing the AWS SDK for Lambda. It starts almost six times faster than Node.js and provides a cost saving of 2.9 times and a time saving of 3.7 times compared to Node.js.

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.

JavaScript became successful due to its association with the browser as the only runtime. WebAssembly (WASM) is a virtual machine that can run anywhere and has a different computation model. WebAssembly code can be analyzed and converted into a more readable format. It can be used to accelerate code and enhance performance. Check out Austin Theroux's repository for examples.

The Talk discusses the JavaScript oxidation compiler (OXC) project and the impact of performance engineering. The OXC project consists of JavaScript tools written in Rust, including a parser, linter, and resolver, that are significantly faster than existing alternatives. Testimonials highlight the progress of the OXC project and the speed and effectiveness of the OXLint tool. The emphasis on performance in OXLint is demonstrated through cross-file linting and parallel processing. Performance improvements in the OXC project are achieved through benchmarking and can drive innovation in JavaScript infrastructure. The talk also discusses the need for faster website loading and the goal of creating a new minifier for better compression and performance in OXC.

Mateus Palino from Quintana Roo presents From Chaos to Clarity, Leveraging RFCs in High-Performance Environments. Quintana Roo aims to improve delivery quality and reduce design time through RFCs. They have created a group called RFCs Advisors and focused on empowering focal points, training managers, and creating tools, guides, and processes. By implementing tailored training initiatives and optimizing design review meetings, they have increased the number and quality of RFCs, resulting in better solutions deployed.

This Talk focuses on the importance of productivity, efficiency, and effectiveness in software development. It highlights the evolving role of leadership, the need for clarity in understanding these terms, and the significance of metrics in driving behaviors and outcomes. The Talk emphasizes the value of aligning with business goals, involving teams in defining productivity measures, and continuously improving productivity to achieve goals.

An overview of the top 3 approaches you can apply to boost the rendering performance of HTML Canvas in your React application, based on the lessons we learned during the development of AG Charts.

React's improvements in performance, such as the introduction of useEffect, have gone unnoticed. useEffect simplifies synchronizing logic and improves performance by eliminating forced layout calculations. Update batching optimizes rendering by combining multiple set-state calls into a single render. React 18 introduces batched set-state calls for faster performance. React Suspense and selective hydration improve user experience and debugging performance issues is best done practically. Server components, recommended debugging tools, and framework choices are also discussed.

This is a background jobs one-on-one talk focusing on the challenges and benefits of using background jobs in software development. It explores the complexity of software development and the impact of distributed applications. The talk highlights the use of Ingest as a reliable solution for executing functions in the background and building drip campaigns. It emphasizes the importance of reliability and architectural choices in software development and discusses the features and capabilities of Ingest, including local development, handling failures, and data retrieval.

Threads.js, a Vue custom renderer for creating declarative 3D scenes, has gained popularity with over 1,700 GitHub stars, 9K monthly NPM downloads, and a strong developer community. Version 4 introduces performance improvements, on-demand rendering, typing support, and memory management. Event bubbling and primitive creation are key features, along with enhanced memory management and scene inspection capabilities. The roadmap includes translated documentation, a new cookbook, and the launch of post-processing and XR VR packages. Performance enhancements, a new 3D course, and updates to Tres Leches UI library are also in the works.

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.

Handling security in front-end development is crucial, and the OWASP Top 10 is a valuable resource for secure coding. The list of security risks is constantly evolving, and the Nuxt security module provides features like security headers, rate limiting, and cross-site request forgery protection. Frontend developers should prioritize security to avoid information leaks and mitigate risks. Understanding the difference between public and private tokens is important for secure token handling.

This Talk covers various optimization techniques for Lambda functions, including parameter fetching, code minification and bundling, observability with Power Tools and X-Ray, baseline testing with load testing tools, caching with Elastic Cache and Redis, and optimizing code size and memory usage. The importance of library choices, power tuning for cost and performance, leveraging subprocesses and sandboxes, and adjusting concurrency limits are also discussed. Overall, these techniques can significantly improve Lambda function performance.

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.

This Talk provides an introduction to web performance and emphasizes the importance of setting performance goals and budgets. It explains the steps for creating and applying a performance budget and suggests various tools for performance budgeting. The Talk also highlights the need to make the performance budget concrete and meaningful, connect it to business goals, and integrate it into the development pipeline. It concludes by emphasizing the importance of maintaining performance and connecting with the speaker for more information.

Memory usage is often overlooked in web applications, but excessive memory usage impacts performance and user experience. It's important to analyze memory usage and optimize it, considering concepts like count versus size and shallow versus retain memory. The Chrome Memory Profiler and Memlab are useful tools for analyzing memory usage. By optimizing React components and using tools like Memlab, memory usage can be reduced significantly. React hooks can be expensive for large-scale projects, and memory analysis is a challenging task.

Distributed tracing is a powerful technique for tracking requests and operations in a system, especially in full stack and microservice applications. The reinvention of distributed tracing introduces the concept of a trace and spans to capture debugging data. Enhancements include tags and a status field for better analysis, and the distribution of traces using a trace context for continued tracing.

The Talk focuses on the importance of testing and gathering information for building good applications. It highlights the use of test automation for performance monitoring and logging for performance measurement. The Talk also discusses the impact of performance on user engagement and search engine rankings. It emphasizes the use of Cypress plugins for monitoring performance metrics and setting thresholds for tests. Overall, the Talk emphasizes the value of test automation tools in providing valuable information at a low cost.

Hi, I'm Annembae, the author of MillionJS, a fast virtual DOM replacement for React. The virtual DOM can be slow depending on the components it powers. The block virtual DOM introduces an O(1) optimization to the traditional virtual DOM, resulting in faster updates with fewer DOM manipulations. MillionJS and the Block Virtual DOM offer a faster alternative to existing virtual-dom libraries like React. It has the potential to revolutionize the way we write React applications.

Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.

The Talk discusses the Core of Vitals and IMP, which are metrics used to measure user experience in browsers. IMP measures multiple actions such as tab, click, and key press until the next screen updates. It also addresses the issue of rage clicks and their impact on user experience. The Talk emphasizes the importance of optimizing for IMB by avoiding blocking the main thread and suggests using multiple tasks and yield to main thread for optimization. Additionally, it mentions the use of navigatorScheduling.isInputPending to handle user input, with a caveat that support may vary across browsers.

Performance is a puzzle that requires different approaches for different problems and sites. User feedback is crucial in evaluating performance, rather than relying solely on metrics like Lighthouse scores. Measuring performance and identifying issues can be done through tools like the performance tab and user timings. Understanding the main thread and using tools like React Profiler and Chrome Tracing can provide insights into performance problems. Optimizing performance involves doing less work, avoiding main thread blocking, and considering options like virtualization and Canvas. Communicating the impact of optimization to leadership and exploring different uses of Canvas are also important topics discussed in the Talk.

The Talk discusses the InteractionToNextPaint metric, which measures the speed of clicks or keyboard inputs on a page. It explores the impact of slow interactions and slow React renders on user experience. The Talk also covers optimization techniques for React rendering, including the use of concurrent features and the StartTransition function. React 18 introduces changes to the rendering process that improve interaction speed. Concurrent rendering and suspense boundaries are highlighted as features that can enhance the performance of React apps.

This Talk discusses rendering and synchronization in React 18. It addresses issues such as flashing rows and wiping out when scrolling. The use of usync-externalstore for concurrent reads and the potential misuse of APIs are explored. Debugging techniques using React Profiler and flush-sync are discussed. The talk also covers performance considerations for different machines and the importance of testing and considering alternative solutions.

Today's Talk focuses on improving the performance of Wix websites through an architecture change that reduced JavaScript size and improved Core Web Vitals metrics. The implementation of a feature with saved data required rewriting components and calculating view data on a separate frontend server. This approach led to a smaller and faster client application and allowed for caching in the CDN. The key takeaways include reducing JavaScript download, using feature-specific components, and caching server responses.

Today's Talk introduces Flashlight, a tool for measuring mobile app performance. Flashlight provides a performance report that highlights issues like high CPU usage on low-end devices. To fix these issues, the Shopify component Flashlist can be used. Flashlight can also be used locally to measure performance changes in React Native apps, with the ability to see the score rapidly changing and improved performance after implementing fixes. More information can be found in the documentation and an article comparing scrolling performance in React Native.

Welcome to how not to use UseEffect. UseEffect is a hook introduced in React 16.8 as a replacement for component dismount and update in class components. It runs your callback once when the component mounts and when there are changes in dependencies. UseEffect allows performing side effects such as fetching data. UseEffect executes its callback asynchronously to allow the browser to render and show something to the user without blocking the main thread. Setting a state in a useEffect without a dependency array can cause nasty loops. Sometimes you are using use effects to take care of calling parent events. Nasty Fetch. Sometimes, when fetching articles, loading and race conditions need to be considered.

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.

This Talk discusses the journey of data fetching libraries in React's new streaming SSL, focusing on the use of suspense for data fetching. It covers the backstory of suspense and data fetching, the plan and green light for its implementation, challenges with Next.js app router and SSR, data transport and flushing timing, the importance of timing and data transport, delayed rehydration and stream closure, the need for remaining data and required functionalities, challenges faced by vanilla React users, and audience questions about React server components.

Today's Talk is about building team thinking games at Synthesis, an enrichment program aiming to build a generation of super collaborators. The key insight is that design is the main constraint, not graphics or AI. Synthesis uses open-source software and develops its own tools for game design and networking. The architecture of Synthesis games involves a server-native approach and a client-authoritative model for movement. The modular approach allows for quick iteration and flexibility in game development, and investing in content pipeline tools enables the creation of fresh content every week.

Asad Nehman discusses the challenges of making multiplayer games and suggests ways to simplify the process. He highlights the need for a backend, such as a Node.js server with Socket.io, to handle player connections. Rooms are introduced to connect players and their friends, allowing communication within each room. Hosting options like AWS EC2, Vercel, and Netlify can help scale the game globally. Playroom framework eliminates the need for server code, lobby systems, and managing player profiles.

This talk explores the differences between WebGL and WebGPU, with a focus on transitioning from WebGL to WebGPU. It discusses the initialization process and shader programs in both APIs, as well as the creation of pipelines in WebGPU. The comparison of uniforms highlights the use of uniform buffers for improved performance. The talk also covers the differences in conventions between WebGL and WebGPU, including textures, viewport and clip spaces. Lastly, it mentions the differences in depth range and projection matrix between the two APIs.

Today's Talk provides an overview of TypeScript performance and tools to address performance issues. It covers the compiler process, including the parser, binder, checker, and transformers steps. The Talk emphasizes the importance of keeping TypeScript up to date for better performance. It also discusses strategies for optimizing TypeScript compilation and debugging, analyzing build performance using trace files, and improving performance by simplifying types and avoiding overloading union types.

Today's Talk discusses improving site speed and efficiency using PartyTown, a tool that runs third-party scripts from a web worker, minimizing their impact on the main UI thread. The inclusion of third-party scripts in webpages should be carefully considered due to their potential impact on performance. Real-world testing is crucial to identify performance issues that may not surface during development. PartyTown offers features like white-listing script capabilities and supports various frameworks for easy integration. It was built by the team at builder.io to ensure websites can scale without sacrificing performance.

This Talk discusses overcoming performance limitations in React components for low-end devices, focusing on app launch time and scrolling performance. The speaker shares techniques for improving app launch and scrolling performance, such as pre-rendering, generating HTML at build time, and using the Virtual List component. The Virtual List component recycles dominoes and uses Translate3D function for improved performance. Delegating scrolling to the browser in NativeMode and supporting scrolling via remote control keys are also mentioned. Overall, the Talk highlights the importance of optimizing performance for low-end devices and provides practical solutions for achieving better performance in React components.

The Talk discusses various aspects of serving images on websites, including where to store images, image transformation options, and image formats. It also explores different approaches for handling image versions and sizes, such as preparing them in advance or using a proxy server. The speaker highlights the importance of optimizing images for performance and mentions the progress made in adopting new image formats. Overall, the Talk provides insights into best practices for managing and serving responsive dynamic images.

HTTP 3, also known as H3, is the latest version of the HTTP protocol with new performance-related features. Enabling HTTP 3 requires minimal effort and provides significant benefits, but limits fine-grained control over performance features. Zero RTT has limitations due to security reasons and restrictions on allowed requests. Resource loading and prioritization in HTTP 3 have some problems, as browsers may not agree on resource importance. Fetch priority allows fine-grained control over resource loading order, and resource discovery can be improved with 103 Early Hints. Web transport provides low-level access to QUIC and HTTP3 features for real-time use cases.

The choice of framework impacts website performance. Lab tests and field data are used to measure performance. Core Web Vitals are important metrics for performance evaluation. New frameworks that prioritize speed are emerging. MetaFrameworks like QUIC, SolidStart, Astro, and Nuxt show promise in improving performance. React frameworks like Gatsby and Remix perform well. Wix has a significant impact on React's performance. Framework choice significantly impacts the probability of building a fast website. Improvement is needed in framework performance.

The Talk discusses performance optimization in software development and engineering. It covers topics such as optimizing requests, anticipating future needs, and comparing single-page apps to multiple-page apps. It also explores the advantages of single-page apps and the use of Remix for building pages. The Talk emphasizes code splitting, optimizing data fetching, and solving client-side state. It concludes with a discussion on pre-rendering, Remix adoption, and prerendering with React.

This Talk focuses on optimizing images for mobile and web. It emphasizes the importance of image dimensions in optimizing images and shares a story about crashes encountered in a mobile app due to heavy image content. The Talk discusses image rendering and sizing, using dimensions and pixel density, optimizing images for different devices and screen sizes, and the importance of image size and format optimization. It recommends tools like Cloudinary for image optimization.

This Talk explores the evolution of styling architecture, dynamic theming with style components, and optimizing style updates. It discusses the challenges of CSS migration and the choice between JavaScript and CSS native tooling. The Talk also touches on CSS tools and libraries, including Tailwind CSS and CSS in JS major libraries like MUI. The importance of picking a stack based on team members' strengths and the use of namespacing CSS for conflict-free dependency trees are highlighted.

Google has introduced Core Web Vitals, three new metrics for measuring user experience on websites. They have also provided recommended limits for each metric and announced a new metric called IMP. The talk focuses on web performance recommendations, including optimizing HTML parsing, using the fetch priority API, and optimizing CLS. It also covers optimizing JavaScript performance, avoiding unnecessary third-party content, and optimizing rendering and DOM. These recommendations aim to improve web performance and user experience.

Welcome to my Vue.js talk on prefetching strategies and boosting app performance. A crucial part of web performance is optimizing for the network. Caching and resource hints, such as DNS prefetch, preconnect, preload, and module preload, can improve website performance. Prefetching non-critical sources and using different strategies can enhance user experience. Libraries like unhead and get.js offer customization and predictive prefetching based on Google Analytics data.

The Talk discusses the importance of performance and mobile consumption in e-commerce, as well as the use and limitations of Google Lighthouse for measuring page quality. It highlights the challenges and considerations in using Lighthouse, including the difference between lab data and real-world data, and the need to understand user experience beyond a single score. The Talk also touches on the potential use of AI in evaluating website performance, optimizing third-party libraries, and setting a JavaScript budget for better performance.

Image optimization is crucial for website performance and user experience. Services like IPX and Cloudinary can help optimize images on the fly. Cloudinary offers additional functionalities and transformations for image management. Lazy loading and the lazy pattern can improve website performance by deferring image loading. Optimized images deliver a better user experience. Fallbacks can mitigate the impact of service failures.

Today we're going to talk about measuring the cost of a GraphQL query with Mercury's Explain. GraphQL allows us to create a list of items we want without needing to know their locations. NearForm created Mercurius Explain, a plugin that adds a Profiler to your GraphQL instance. This plugin provides detailed information about the resolution time and number of resolver calls for each field, making it easier to optimize and debug queries. Mercurius Explain is a valuable tool for understanding the cost of your GraphQL queries.

This talk explores the creation of a full-text search engine in JavaScript, highlighting the challenges with existing search engines like Algolia and the advantages of using JavaScript. The speaker emphasizes the importance of code optimization and performance enhancement techniques in JavaScript. The talk also discusses the evolution of the Lyra search engine into the open-source project Orama, which offers a feature-rich and highly performant full-text search engine for JavaScript. The speaker addresses questions about language choice, scalability, and deployment, and showcases the benefits of deploying an immutable database to a CDN.

This Talk explores the use of web workers in React to improve user experience and performance. It discusses the limitations of JavaScript rendering and how web workers can offload tasks to separate threads. The Talk also highlights the benefits of using concurrent mode in React and introduces the UseWebWorkerHook library for simplifying the creation of web workers. It emphasizes the considerations when using web workers and concludes with a mention of Postman's hiring and new feature release.

Today's Talk focuses on accelerating innovation and the importance of solving the right problem. Design Thinking and the product life cycle are discussed as tools for product innovation. The R approach, which involves constant experimentation and learning, is introduced. The idea of syncing production components from storybook to Figma is explored. Finally, the Talk emphasizes the role of developers as the new creators, unlocking their powers to innovate.

This Talk discusses Harvey's performance journey and how it led to the adoption of Remix. The engineering team addressed scaling and performance issues through backend fixes and frontend improvements. The redesign focused on loading products by category and prioritizing performance. The implementation of Remix resulted in improved performance and a reduction in API requests. The focus on long-term scalability is essential for handling a growing product list and customer base.

Performance testing is the practice of measuring and evaluating system response. Front-end and back-end performance testing are crucial for identifying bottlenecks. XK6 Browser is a new tool that allows for browser automation and end-to-end web testing. K6 is a versatile testing tool that covers various use cases. The combination of browser and protocol level testing provides a comprehensive view of performance.

React Server Components is a recent feature introduced with the React team and launched with Next.js 12. They allow for rendering components on the server, improving performance and data fetching. Server components can be used alongside client-side rendering and provide direct access to server resources. However, they are still in the experimental stage and have some limitations, such as not being able to use hooks or event handlers. Challenges include importing server components in client components and making third-party API calls.

Shivai Lamba presents server-side rendering using WebAssembly. Learn how to enable server-side rendering with WebAssembly using a Create React app. See the changes in the app before and after enabling server-side rendering. Support for React 18 and the ability to create streaming applications using WebAssembly. Connect with me on Twitter at TheCloudWeb for more information on WebAssembly.

Hello everyone, my name is Wojta Mikšu. I work at Uber as a web infrastructure engineer. Today, I will tell you about a new open tool that supercharges developing and testing your React components. This talk covers the history of JavaScript modules, the introduction of Vite and Ladle, and future predictions. Ladle is an open-source tool built on top of Vite for developing and testing React components through stories. It offers features like different viewports, component variations, event handler logging, theme switching, and more. Ladle has received positive feedback and shows improvements in dev server startup and hot module replacement.

The Talk discusses the concept of segmented rendering for personalization in web development. It explores different rendering techniques, including server-side rendering, static seed generation, and dynamic rendering. The issue of rich guests and poor customers is addressed through segmented rendering. The implementation of segmented rendering with Next.js involves a lightweight proxy server and URL rewriting. The Talk also highlights the benefits of invisible server-side rendering and suggests a future unified API for server rendering.

The Talk discusses the concept of instant websites, aiming to minimize the time between user interaction and unblocking the user. It emphasizes prioritizing the loading of primary content and delaying the loading of secondary content to improve page loading times. Server-side rendering is highlighted as a faster alternative to client-side rendering, reducing network round trips and improving rendering times. The concept of island architecture is introduced, where only the JavaScript needed for interactive components is shipped to the client. The Fresh web framework is presented as a speed-focused framework for Deno, offering automatic CSS inlining and using Preact for client-side interactivity.

This Talk explores building full stack applications on the edge and the blurring line between front end and back end development. It discusses the benefits of using the JAMstack and APIs for scalable web development. The Talk also highlights the improvements in edge technology, such as serverless functions and efficient data storage, and the deployment of functions and durable objects on the edge network. Overall, the Talk emphasizes the importance of delivering high-quality experiences with low latency through edge computing.