#performance

Subscribe
Building swift yet functional apps should be what all developers aspire to. And since you do, we put together a collection of talks and tutorials on application performance and made them available for free. Whether your challenge is on the front-end or the back-end, these talks and workshops will give your great tips and inspire you to try new solutions.
Brace Your React, New Core Web Vitals are Coming
React Day Berlin 2023React Day Berlin 2023
30 min
Brace Your React, New Core Web Vitals are Coming
Watch video: Brace Your React, New Core Web Vitals are Coming
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.
R3ACT: A Frightening Look At Performance Figures
React Summit US 2023React Summit US 2023
27 min
R3ACT: A Frightening Look At Performance Figures
Watch video: R3ACT: A Frightening Look At Performance Figures
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.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
Watch video: Power Fixing React Performance Woes
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.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
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.
React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Building WebApps That Light Up the Internet with QwikCity
JSNation 2023JSNation 2023
170 min
Building WebApps That Light Up the Internet with QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Building instant-on web applications at scale have been elusive. Real-world sites need tracking, analytics, and complex user interfaces and interactions. We always start with the best intentions but end up with a less-than-ideal site.
QwikCity is a new meta-framework that allows you to build large-scale applications with constant startup-up performance. We will look at how to build a QwikCity application and what makes it unique. The workshop will show you how to set up a QwikCitp project. How routing works with layout. The demo application will fetch data and present it to the user in an editable form. And finally, how one can use authentication. All of the basic parts for any large-scale applications.
Along the way, we will also look at what makes Qwik unique, and how resumability enables constant startup performance no matter the application complexity.
Server Components: The Epic Tale of Rendering UX
React Summit 2023React Summit 2023
26 min
Server Components: The Epic Tale of Rendering UX
Top Content
Watch video: Server Components: The Epic Tale of Rendering UX
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.
DEADScript: The Role Of JavaScript In Web Sustainability
JSNation 2023JSNation 2023
21 min
DEADScript: The Role Of JavaScript In Web Sustainability
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 Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
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.
Speeding Up Your React App With Less JavaScript
React Summit 2023React Summit 2023
32 min
Speeding Up Your React App With Less JavaScript
Top Content
Watch video: Speeding Up Your React App With Less JavaScript
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?
JSNation 2023JSNation 2023
31 min
Building a Web-App: The Easy Path and the Performant Path. Why Are They Not the Same?
Misko Havry introduces himself and discusses the impact of JavaScript on performance. The concepts of reconciliation, hydration, and resumability are explored, along with the importance of clean code and compiler optimization. The Talk includes demos of application components and showcases the power of code extraction. The QUIC framework is highlighted for its ability to optimize code loading and prioritize interactions. The service worker is used to selectively download components for improved performance. SEO and debugging in QUIC are also discussed, along with comparisons to other frameworks.
When Optimizations Backfire
JSNation 2023JSNation 2023
26 min
When Optimizations Backfire
Top Content
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 on the Edge
Vue.js London 2023Vue.js London 2023
30 min
Nuxt on the Edge
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.
A Saga of Web Rendering Woes
Vue.js London 2023Vue.js London 2023
28 min
A Saga of Web Rendering Woes
This Talk discusses the problems faced in building and rendering web applications, different rendering methods and strategies, and the benefits of the Yamstack architecture. It covers server-side rendering, static site generation, incremental static regeneration, and edge rendering. The speaker demonstrates how to build a static site using a Hello CMS and the JAMstack architecture. Other topics include connecting Storyboard with a Nuxt application, mock data, hybrid rendering, and handling I18N with a static site generator.
How Bun Makes Building React Apps Simpler & Faster
React Day Berlin 2022React Day Berlin 2022
9 min
How Bun Makes Building React Apps Simpler & Faster
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.
Building High-Performing Cross-Cultural Teams
React Day Berlin 2022React Day Berlin 2022
25 min
Building High-Performing Cross-Cultural Teams
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.
A Guide to React Rendering Behavior
React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
This transcription provides a brief guide to React rendering behavior. It explains the process of rendering, comparing new and old elements, and the importance of pure rendering without side effects. It also covers topics such as batching and double rendering, optimizing rendering and using context and Redux in React. Overall, it offers valuable insights for developers looking to understand and optimize React rendering.
The Future of Performance Tooling
JSNation 2022JSNation 2022
21 min
The Future of Performance Tooling
Top Content
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.
Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
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.
Navigating Modern Frontend Innovations
React Summit 2024React Summit 2024
16 min
Navigating Modern Frontend Innovations
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.
The Art of Ignoring Best Practices for React Performance
React Summit 2024React Summit 2024
19 min
The Art of Ignoring Best Practices for React Performance
This Talk introduces the concept of being a 'React bad boy' by ignoring best practices and optimizing React rendering. It explains how to avoid unnecessary rerenders using React.memo and React DevTools. It also covers advanced techniques like isolating state changes and lazy loading hooks. The Talk explores reducing component rerenders using Svelte stores and optimizing with swap stores in Redux. These techniques improve React performance without the need for major refactors or rewrites.
Next.js: Reshaping Web App Architecture for Performance Excellence
React Summit 2024React Summit 2024
9 min
Next.js: Reshaping Web App Architecture for Performance Excellence
This Talk discusses how Next.js was used to reshape web app architecture for performance excellence. Next.js allows for server-side rendering (SSR) and client-side rendering (CSR), improving performance and user experience. The implementation of Next.js on the application resulted in faster initial page loads, reduced white screen time, and improved loading states. It is important to use the different rendering options correctly to maximize performance.
How Data Privacy Literacy Is Shaping Infrastructure
React Summit 2024React Summit 2024
19 min
How Data Privacy Literacy Is Shaping Infrastructure
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.
Webdevelopment Tailored for 2024
React Summit 2024React Summit 2024
7 min
Webdevelopment Tailored for 2024
Today's Talk covers native features in browsers, including upcoming ones and the Interop Project. Native features offer speed, compatibility, and improved debugging. Notable examples include dynamic viewport units, flexbox/grid gap, container queries, and motion path. The Interop Project ensures consistent web platform features across different browsers. Upcoming features like native CSS nesting and entry/exit animations are on the horizon.
Web Performance: The African Case
JSNation 2024JSNation 2024
22 min
Web Performance: The African Case
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.
LLRT JavaScript Runtime: Redefining Serverless Latency
JSNation 2024JSNation 2024
20 min
LLRT JavaScript Runtime: Redefining Serverless Latency
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.
Search Speed: Making Expedia Flights Faster
JSNation 2024JSNation 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.
Say WAT Now!? Turbocharged JavaScript With Hand Crafted WASM
JSNation 2024JSNation 2024
11 min
Say WAT Now!? Turbocharged JavaScript With Hand Crafted WASM
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 Oxc Project, and the Effect of Performance Engineering
JSNation 2024JSNation 2024
18 min
The Oxc Project, and the Effect of Performance Engineering
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.
From Chaos to Clarity: Leveraging RFCs in High-Performance Environments
TechLead Conference 2024TechLead Conference 2024
10 min
From Chaos to Clarity: Leveraging RFCs in High-Performance Environments
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.
From Business Buzzwords to Meaningful Change: Measuring and Improving Engineering Productivity
C3 Dev Festival 2024C3 Dev Festival 2024
26 min
From Business Buzzwords to Meaningful Change: Measuring and Improving Engineering Productivity
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.
Maximizing Your Potential in Tech Interviews: The Three Cs to Success
C3 Dev Festival 2024C3 Dev Festival 2024
21 min
Maximizing Your Potential in Tech Interviews: The Three Cs to Success
Tech interviews are becoming more competitive due to increasing layoffs in the tech industry. Building connections and having referrals are crucial in securing job opportunities. Building your brand and online presence can lead to job opportunities without traditional interviews. Sharing your expertise through content creation and networking can help build connections and raise awareness. Confidence, effective communication, and showcasing soft skills are key to succeeding in technical interviews.
The Path to High-Performance Canvas Rendering in React
React Summit 2024React Summit 2024
10 min
The Path to High-Performance Canvas Rendering in React
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.
Invisible Hand of React Performance
React Summit 2024React Summit 2024
31 min
Invisible Hand of React Performance
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.
Improve Your App Performance With Background Jobs
React Summit 2024React Summit 2024
29 min
Improve Your App Performance With Background Jobs
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.
What's Hot On Tresjs V4
Vue.js Live 2024Vue.js Live 2024
20 min
What's Hot On Tresjs V4
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.
Build Your Own Component Library, With `Shadcn-vue`
Vue.js Live 2024Vue.js Live 2024
7 min
Build Your Own Component Library, With `Shadcn-vue`
Shed CN Vue is a component library that allows for easy customization of components and styling. It is built on top of RedixView, which enables the use of primitives and element customization. Tailwind CSS is used for easy customization of layout, styling, animations, classes, and icons. The documentation provides more details on how to leverage these features.
More Secure Vue & Nuxt Apps - By Default
Vue.js Live 2024Vue.js Live 2024
21 min
More Secure Vue & Nuxt Apps - By Default
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.
Optimizing Microservice Architecture for High Performance and Resilience
Node Congress 2024Node Congress 2024
24 min
Optimizing Microservice Architecture for High Performance and Resilience
Today's Talk discusses microservices optimization strategies for distributed systems, specifically focusing on implementing casual consistency to ensure data synchronization. Vector clocks are commonly used to track the casual relationship between write events in distributed systems. Casual consistency allows for concurrent and independent operations without synchronization, maximizing parallelism and system resource utilization. It enables effective scalability, better latency, and fault tolerance in distributed systems through coordination, resilience, reconfiguration, recovery, and data replication.
AWS Lambda Performance Tuning
Node Congress 2024Node Congress 2024
25 min
AWS Lambda Performance Tuning
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.
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
Node Congress 2024Node Congress 2024
25 min
The Need for Speed: How AWS New JS Runtime is Redefining Serverless Latency
Serverless services like AWS Lambda allow developers to build modern applications without provisioning servers or additional infrastructure. LLRT is a low latency runtime designed specifically for serverless environments and JavaScript applications. LLRT uses a lightweight JavaScript engine called Quick.js, achieving fast execution and performance with minimal memory consumption. LLRT is ideal for latency-critical applications, high-volume functions, and integration with AWS services. It significantly improves performance, reducing cold starts and providing consistent warm start times. Users are encouraged to test LLRT and contribute to its development.
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
React Day Berlin 2023React Day Berlin 2023
13 min
Daily Brush for Website Speed: Embrace the Performance Budget Ritual
Watch video: Daily Brush for Website Speed: Embrace the Performance Budget Ritual
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.
How Much RAM Is Your UseMemo Using? Let’s Profile It!
React Day Berlin 2023React Day Berlin 2023
20 min
How Much RAM Is Your UseMemo Using? Let’s Profile It!
Watch video: How Much RAM Is Your UseMemo Using? Let’s Profile It!
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.
Deconstructing Distributed Tracing
React Day Berlin 2023React Day Berlin 2023
8 min
Deconstructing Distributed Tracing
Watch video: Deconstructing Distributed Tracing
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.
We've Rested Long Enough, What's Next?
TestJS Summit 2023TestJS Summit 2023
17 min
We've Rested Long Enough, What's Next?
This Talk compares RESTful APIs, event-driven architectures, and low latency performance APIs. It discusses the limitations of RESTful APIs and the need for newer technologies like GraphQL. The Talk explores event-driven architecture using webhooks and web sockets, as well as the benefits of gRPC as a performant alternative. It also highlights the integration of gRPC with front-end development and the use of protocol buffers for improved performance. Lastly, it emphasizes the importance of considering team familiarity and infrastructure when choosing an API architecture.
Measure and Improve Frontend Performance by Using Test Automation
TestJS Summit 2023TestJS Summit 2023
22 min
Measure and Improve Frontend Performance by Using Test Automation
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.
How We Test Storybook Itself
TestJS Summit 2023TestJS Summit 2023
30 min
How We Test Storybook Itself
This Talk discusses the use of TypeScript and Storybook in software development. It covers the premise of components and the complexity of testing Storybook. The setup process for Next.js and Storybook is explained, along with the testing workflow and CI integration. The Talk also touches on caching, bug reports, and the release process. Documentation management and improving test run time are discussed, as well as testing feature flags and mobile usage.
Virtual DOM: Back in Block
React Summit US 2023React Summit US 2023
9 min
Virtual DOM: Back in Block
Watch video: Virtual DOM: Back in Block
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.
Using the React Ecosystem With the World's First O(1) Javascript Framework?
React Summit US 2023React Summit US 2023
18 min
Using the React Ecosystem With the World's First O(1) Javascript Framework?
Watch video: Using the React Ecosystem With the World's First O(1) Javascript Framework?
Reshapability in the next generation of front-end frameworks with OOV one loading time. Quick is a web framework that loads instantly and does not require hydration. QUIC allows lazy loading of specific code components, minimizing initial JavaScript downloads. QUIC CD is a metaframework built around QUIC, offering directory-based routing, nested layouts, file-based menus, and data endpoints. This represents a significant shift in front-end frameworks.
Breaking the 'useEffect' Habit
React Summit US 2023React Summit US 2023
22 min
Breaking the 'useEffect' Habit
Watch video: Breaking the 'useEffect' Habit
Mike North discusses breaking the use-effect habit in React and explores alternative approaches to improve maintainability, flexibility, and code simplicity.
Beyond First Load Speed with INP
React Summit US 2023React Summit US 2023
8 min
Beyond First Load Speed with INP
Watch video: Beyond First Load Speed with INP
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.
If You Aren’t First You’re Last
React Summit US 2023React Summit US 2023
27 min
If You Aren’t First You’re Last
Watch video: If You Aren’t First You’re Last
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.
React Concurrency × Core Web Vitals
React Summit US 2023React Summit US 2023
26 min
React Concurrency × Core Web Vitals
Watch video: React Concurrency × Core Web Vitals
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.
Rendering: To Sync or Not to Sync?
React Summit US 2023React Summit US 2023
28 min
Rendering: To Sync or Not to Sync?
Watch video: Rendering: To Sync or Not to Sync?
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.
React Performance Debugging
React Advanced Conference 2023React Advanced Conference 2023
148 min
React Performance Debugging
Workshop
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
Winning the Performance Race
React Advanced Conference 2023React Advanced Conference 2023
21 min
Winning the Performance Race
Watch video: Winning the Performance Race
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.
Flashlight, a Lighthouse for Mobile Apps
React Advanced Conference 2023React Advanced Conference 2023
7 min
Flashlight, a Lighthouse for Mobile Apps
Watch video: Flashlight, a Lighthouse for Mobile Apps
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.
How to NOT use useEffect?
React Advanced Conference 2023React Advanced Conference 2023
24 min
How to NOT use useEffect?
Top Content
Watch video: How to NOT use useEffect?
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.
Speeding Up Your React App With Less Javascript
React Advanced Conference 2023React Advanced Conference 2023
15 min
Speeding Up Your React App With Less Javascript
Watch video: Speeding Up Your React App With Less Javascript
Quick React is a tool that speeds up React applications with less JavaScript, and Builder.io is a visual CMS that empowers marketing teams. Web performance is a challenge, with most websites scoring poorly. Island architecture and reasonability are alternative approaches to hydration that improve performance. QUIC allows for resumable applications and Quick React enables island architecture for faster startup times. Hydration and inter-island communication are crucial for interactivity in React applications.
Patterns for Performance
React Advanced Conference 2023React Advanced Conference 2023
28 min
Patterns for Performance
Watch video: Patterns for Performance
This Talk discusses patterns for performance in React development, including addressing slow resizing in custom cell renderers. It explores optimizing React render performance by reducing excessive re-rendering and using direct style updates. The use of layout effect and callback refs is also highlighted as techniques to improve performance. Additionally, the Talk mentions the AG Grid and TanStack Table libraries, as well as upcoming features like grid state restoration.
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
React Advanced Conference 2023React Advanced Conference 2023
28 min
The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
Watch video: The Rocky Journey of Data Fetching Libraries in React’s New Streaming SSR
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.
Leveraging the Event Loop for Blazing-Fast Applications!
React Advanced Conference 2023React Advanced Conference 2023
35 min
Leveraging the Event Loop for Blazing-Fast Applications!
Watch video: Leveraging the Event Loop for Blazing-Fast Applications!
This talk covers the event loop, microtask queue, and provides a live demo. JavaScript is single-threaded but can perform tasks that only a multithreaded environment can. The event loop consists of a call stack and microtask queue, which allow JavaScript to run non-blocking operations. Leveraging the microtask queue can lead to significant performance improvements in applications, such as React. However, it is important to use it correctly to avoid issues like infinite loops.
Building Team Thinking Games At Synthesis
JS GameDev Summit 2023JS GameDev Summit 2023
16 min
Building Team Thinking Games At Synthesis
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.
Why Is Building a Multiplayer Game So Hard and What Can We Do to Fix It for Everyone
JS GameDev Summit 2023JS GameDev Summit 2023
18 min
Why Is Building a Multiplayer Game So Hard and What Can We Do to Fix It for Everyone
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.
Migration from WebGL to WebGPU
JS GameDev Summit 2023JS GameDev Summit 2023
21 min
Migration from WebGL to WebGPU
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.
TypeScript Performance: Going Beyond the Surface
TypeScript Congress 2023TypeScript Congress 2023
34 min
TypeScript Performance: Going Beyond the Surface
Top Content
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.
Improve Your Website's Speed and Efficiency with Partytown
React Summit 2023React Summit 2023
20 min
Improve Your Website's Speed and Efficiency with Partytown
Watch video: Improve Your Website's Speed and Efficiency with Partytown
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.
Overcoming Performance Limitations in React Components for Low-end Devices
React Summit 2023React Summit 2023
9 min
Overcoming Performance Limitations in React Components for Low-end Devices
Watch video: Overcoming Performance Limitations in React Components for Low-end Devices
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.
Responsive Images for Your Website
JSNation 2023JSNation 2023
7 min
Responsive Images for Your Website
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 Performance for JS Developers
JSNation 2023JSNation 2023
21 min
HTTP/3 Performance for JS Developers
Top Content
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.
Comparing JavaScript Frameworks Performance Using Real-World Data
JSNation 2023JSNation 2023
28 min
Comparing JavaScript Frameworks Performance Using Real-World Data
Top Content
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.
Modern Approaches for Creating Extremely Fast Websites
React Summit 2023React Summit 2023
24 min
Modern Approaches for Creating Extremely Fast Websites
Watch video: Modern Approaches for Creating Extremely Fast Websites
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.
Optimising Images in Web and Native
React Summit 2023React Summit 2023
21 min
Optimising Images in Web and Native
Watch video: Optimising Images in Web and Native
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.
Moving on From Runtime Css-In-Js at Scale
React Summit 2023React Summit 2023
29 min
Moving on From Runtime Css-In-Js at Scale
Watch video: Moving on From Runtime Css-In-Js at Scale
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.
Top Core Web Vitals Recommendations for 2023
JSNation 2023JSNation 2023
29 min
Top Core Web Vitals Recommendations for 2023
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.
Prefetch Strategies to Boost the Performance of Your Vue.JS App
Vue.js London 2023Vue.js London 2023
21 min
Prefetch Strategies to Boost the Performance of Your Vue.JS App
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.
You’re Probably Using Lighthouse Wrong: How We Got Tricked by a Single Magic Number
Vue.js London 2023Vue.js London 2023
29 min
You’re Probably Using Lighthouse Wrong: How We Got Tricked by a Single Magic Number
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 - Quick Win for Improving Performance in Vue & Nuxt Apps
Vue.js London 2023Vue.js London 2023
31 min
Image Optimization - Quick Win for Improving Performance in Vue & Nuxt Apps
Top Content
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.
Maximize App Performance by Optimizing Web Fonts
Vue.js London 2023Vue.js London 2023
49 min
Maximize App Performance by Optimizing Web Fonts
WorkshopFree
Lazar Nikolov
Lazar Nikolov
You've just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we're going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Table of Contents:What’s CLS and how it’s calculated?How fonts can cause CLS?Font loading strategies for minimizing CLSRecap and conclusion
Measuring the Cost of a GraphQL Query with mercurius-explain
Node Congress 2023Node Congress 2023
7 min
Measuring the Cost of a GraphQL Query with mercurius-explain
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.
Things I learned while writing high-performance JavaScript applications
Node Congress 2023Node Congress 2023
31 min
Things I learned while writing high-performance JavaScript applications
Top Content
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.
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up
Wait, React Is Multi-Threaded?
React Day Berlin 2022React Day Berlin 2022
22 min
Wait, React Is Multi-Threaded?
Top Content
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.
Accelerate Innovation
React Day Berlin 2022React Day Berlin 2022
10 min
Accelerate Innovation
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.
Remixing a Symfony
Remix Conf Europe 2022Remix Conf Europe 2022
19 min
Remixing a Symfony
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.
A Medley of Frontend and Backend Performance Testing
TestJS Summit 2022TestJS Summit 2022
34 min
A Medley of Frontend and Backend Performance Testing
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.
Zero Bundle Size Server Components
React Advanced Conference 2022React Advanced Conference 2022
17 min
Zero Bundle Size Server Components
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.
Server-Side Rendering Using WebAssembly
React Advanced Conference 2022React Advanced Conference 2022
12 min
Server-Side Rendering Using WebAssembly
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.
Ladle: The Story About Modules and Performance
React Advanced Conference 2022React Advanced Conference 2022
16 min
Ladle: The Story About Modules and Performance
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.
Treat your users right with Segmented Rendering
React Advanced Conference 2022React Advanced Conference 2022
21 min
Treat your users right with Segmented Rendering
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.
Automated Performance Regression Testing with Reassure
React Advanced Conference 2022React Advanced Conference 2022
16 min
Automated Performance Regression Testing with Reassure
Today's Talk introduces Reacher, a performance monitoring tool for React and React Native codebases. It highlights the need for catching performance regressions early in the development process and identifies JavaScript misusage as a common source of performance issues. ReaSure, developed by Covstack, is presented as a promising library that integrates with existing ecosystems and provides reliable render time measurements and helpful insights for code review. Considerations for operating in a JavaScript VM are discussed, including JIT, garbage collection, and module resolution caching. Statistical analysis using the z-score is mentioned as a method for determining the significance of measurement results.
Instant websites using Fresh and Deno on the Edge
React Advanced Conference 2022React Advanced Conference 2022
33 min
Instant websites using Fresh and Deno on the Edge
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.
Building full-stack applications on the Edge
React Advanced Conference 2022React Advanced Conference 2022
9 min
Building full-stack applications on the Edge
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.
The Clinic.js Workshop
JSNation 2022JSNation 2022
71 min
The Clinic.js Workshop
Workshop
Rafael Gonzaga
Rafael Gonzaga
Learn the ways of the clinic suite of tools, which help you detect performance issues in your Node.js applications. This workshop walks you through a number of examples, and the knowledge required to do benchmarking and debug I/O and Event Loop issues.
High-performance Next.js
React Summit 2022React Summit 2022
50 min
High-performance Next.js
Workshop
Michele Riva
Michele Riva
Next.js is a compelling framework that makes many tasks effortless by providing many out-of-the-box solutions. But as soon as our app needs to scale, it is essential to maintain high performance without compromising maintenance and server costs. In this workshop, we will see how to analyze Next.js performances, resources usage, how to scale it, and how to make the right decisions while writing the application architecture.
You don't want to Server-side Render your Next.js App
React Summit 2022React Summit 2022
28 min
You don't want to Server-side Render your Next.js App
Top Content
Next.js is a framework that allows for client-side rendering and easy page transitions. Server-side rendering offers a more secure application and better search engine optimization but requires a server. Static site generation provides outstanding performance and scalability but has limitations. Incremental static regeneration solves the problem of rebuilding the entire website. Choosing the right rendering strategy depends on the specific scenario, and for e-commerce websites, static site generation with incremental static regeneration is recommended.
Performance is User Experience: Optimizing the Frontend for the Users
JSNation 2022JSNation 2022
8 min
Performance is User Experience: Optimizing the Frontend for the Users
Today's Talk discusses software performance and optimizing the frontend for the user. It emphasizes the importance of passive performance, which is a subjective measure of how well users perceive the application's performance. Techniques to improve performance include using a shared cache, HTTP2, preloading requests, and CDN. Optimizing frontend performance involves avoiding blocking the main thread, loading necessary resources first, using progress bars, and implementing optimistic patterns. It also highlights the importance of considering users' changing expectations throughout their interaction with the application.
High-Speed Web Applications: Beyond the Basics
JSNation 2022JSNation 2022
30 min
High-Speed Web Applications: Beyond the Basics
This talk covers the latest features in Chrome DevTools, including network tab analysis, performance tab optimization, and user flows. It discusses optimizing HTTP requests with fetch priority to improve loading time. The performance tab provides insights on frame drops, long tasks, and the importance of minimizing total blocking time. The talk also highlights the optimization of page rendering and introduces user flows in Chrome DevTools.
Let’s Talk about Re-renders
React Summit 2022React Summit 2022
23 min
Let’s Talk about Re-renders
Top Content
This Talk discusses React performance and how re-renders can affect it. It highlights common mistakes and misconceptions, such as the overuse of useMemo and useCallback hooks. The importance of React.memo in preventing unnecessary child component re-renders is emphasized. Creating components in render functions is identified as a major performance killer, and the benefits of moving state down and wrapping state around children are explained. The Talk also covers optimizing component rendering through memoization and provides a recap of the key points.
The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering
React Summit 2022React Summit 2022
9 min
The Only Way to Eat an Elephant - Code Splitting With Server Side Rendering
The Talk discusses the challenges of handling DOM manipulation with JavaScript and the performance issues that arise from using SPAs. It explores the solution of server-side rendering (SSR) to address SEO concerns but notes that bundle size remains an issue. Code splitting is introduced as a way to load content dynamically, but it presents challenges for SSR. The speaker suggests a solution using vanilla.js that solves the problem without scalability issues.