Hey, we'll discuss scaling fast and engineering lessons learned in the last 15 years of tech startups. Scaling involves three things: business, team, and tech. Business scalability relies on sales and customer acquisition costs. Engineering is a tool the business uses. Scaling the team is vital as tech problems are often people problems. Team structure affects architecture and product development process. Organize teams based on purpose, not technology. Spend less time being blocked by other teams. Ship features without getting blocked. Own your own mess. Focus on product engineering partnership. Build faster using feedback cycles. Build appropriate solutions for your use case. Let go of ego and experiment with different approaches. Engineers own their own mess. Avoid work in progress. Finish the work and focus on fixing it later. Have a conversation before writing code. Scaling the tech is easier than you think. Pick an off the shelf design. Save innovation for core parts. Pick existing solutions. Focus on solving the problem. Don't waste time trying to predict future scale. Scale will surprise you. Do what works for your business. Push back on unnecessary complexity. Understand the cost of ideas. Modify the situation to fit existing design. Architecture is like a dependency graph on your code. Reduce architectural complexity by organizing code based on what it does. Use vertical models and avoid creating excessive dependencies. On the client, use vertical modules. On the back end, consider a service-oriented architecture. Start with a monolith and transition to microservices if necessary. Use folders instead of microservices when you have a small team. Use vertical models and contract or type-driven development to define clear APIs and interfaces. Avoid highly interconnected code and duplication. Focus on data structures to avoid complexity and the need for translation layers. Building translation layers can lead to slow user experience. Vertical teams aligned with vertical code allow for fast problem-solving, full control of features, and efficient data handling. Understanding the entire domain enables faster development with fewer bugs.

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 at React Advanced 2024, How to Increase Your Impact as a Staff Engineer. In this presentation, I will give actionable tips on increasing your influence as a staff developer. Staff engineers have responsibilities such as identifying inefficiencies, performing background tasks, and balancing sprint work with staff-eng tasks. They also share knowledge through documentation and mentorship, and drive high-impact projects. Staff engineers ensure high-quality code through testing, advocacy for best practices, and innovation. To build influence, lead by example, be a mentor, and prioritize documentation and project management. Strategic thinking and problem-solving are crucial for staff engineers. Broadening expertise, showcasing work, and having public visibility are important for career growth and recognition. Open sourcing code and public engagement are valuable for staff engineers. Thank you for attending the talk!

Welcome to React Advanced London. Today's agenda: what is bun? Features, benchmark, demo, key takeaways. Bun provides a better developer experience, faster CI, and decreased app file size. Building bun on top of Zig prioritizes performance, stability, and compatibility. Install bun with npm or download the binary from the official website. Bun is a comprehensive development toolkit with a fast and efficient package manager. Learn how to benchmark CLI commands using Hyperfine with flags. Compare different package managers. Bond is fast and provides a few features in its package manager: install, add, remove, update, link. Test the bond test runner against vtest and jest using hyperfine. Discover the features supported by the test runner and the importance of bundling in JavaScript applications. Learn about the main.js code, the performance comparison of different bundlers, and the features offered by Bun, including loaders and macros. Explore macros in Bonn and how to optimize the code by including the type macro. Discover the benefits of Bonn, such as reducing CPU usage and fast installation of node dependencies.

Hello everyone. My name is Szymon Chmal and I am a Senior React Native Developer at CallStack. Today I'm going to introduce you to ASTRA, a powerful tool in modern web development that optimizes content delivery while providing the flexibility of modern JavaScript frameworks. ASTRA allows you to create blazing fast static websites without needing any JavaScript by default. It's perfect for sites that are mostly static but have a few interactive features. ASTRA is trusted by industry leaders like Microsoft and Porsche. It's built with content-driven pages in mind and supports integration with popular UI libraries like React, Vue, and Tailwind. ASTRA keeps things simple with file-based routing.

Hi, my name is Julian, and I'm extremely excited to talk about suspense. Suspense allows you to render fallback UI while waiting for asynchronous tasks to resolve, making it the unsung hero of React components. In today's talk, I will explain why suspense is crucial for React server components. Before diving into server components, let's understand the history of web rendering and the problems it posed. We then introduced server-side rendering (SSR) and static-side generation (SSG) to address these issues. However, SSR had problems like large bundle sizes, slow hydration, and sluggish initial server response time. React server components solve these problems by allowing us to differentiate between static and dynamic components. But to address the third problem, we need suspense. Today, we'll build a simplified version of suspense on the server to demonstrate its conceptual working and how it improves the rendering process from classical SSR to streaming and out-of-order streaming. Let's dive into the code by building a movie app called Notflix. We have different sections like the title, cast members, and similar movies. The components fetch their own data asynchronously, making them server components. In the classical way of server-side rendering, we loop through the children, execute them as server components, and render the HTML response. To improve the user experience, we introduce streaming, which allows us to start the response on the server, keep the connection open, and add to the response document as data becomes available. By using the write method provided by Express, we can write to the response stream instead of collecting all the HTML. Dealing with promises in sequence ensures that components are rendered in the correct order. Although the server-side rendering has improved, there is still no loading state or proper handling of suspended children. To address this, we introduce suspense on the server and build a suspense component with a fallback UI and children. We keep track of suspended children using a simple object with unique identifiers. In the renderer, we check the suspended object and loop through the entries to handle each suspended child. To replace the loading state with the content once it's available, we need to execute asynchronous functions to collect and concatenate the content, delete the entry from the suspended object, and use JavaScript to handle the swapping of elements in the browser. To replace the fallback renderer with the content, we need to wrap the fallback in a diff and add an identifier using a data attribute. We can use the CSS trick of 'display: contents' to prevent the diff from affecting the layout. Next, we wrap the available content in a template tag to add it to the document without rendering. Finally, we use custom elements and a connected callback to swap the loading boundary with the content based on the identifier. This allows us to replace multiple fallback renderers. By wrapping each section in its own boundary, the user experience is significantly improved as each section can load independently. This approach also emphasizes the importance of using the platform's existing features and functionality, such as browser caching, to enhance performance. Thank you for watching and enjoy the rest of the conference!

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.