Schedule

The talk will introduce you to the React Compiler, its architecture, the rules for using it, and the React 19 code base. We will learn the power of app optimizations by including React Compiler in an existing application. Lastly, we will get into the internals of the React compiler's compilation phases using the playground, and a few tips and tricks around it.

A history of how code transformation has affected the industry. And how it led to changes in how we write CSS

In this talk we'll break down key Generative AI concepts like Vector Search and Vector Embeddings and how can React Developers leverage them with technologies like LangChainJS to build intuitive AI powered apps. We will discuss different AI enabled search experiences like vector and hybrid search approaches, exploring how each method works, their advantages and disadvantages, and practical use cases.The talk will break down what can be overly complex concepts into practical takeaways for our everyday work as React/JavaScript developers. By the end of the session you'll have a better understanding of when and how to use different search techniques to optimize your user experience. Most importantly you will also learn how as a React developer we use can use these search techniques using open source tooling and libraries including some powerful search engines written in TS/JS and create AI powered applications in React.

Introduction to ESLint's new flat config format and see how it can bring new possibilities and enhancements to your development workflow and experience.

Twitter influencers would have you believe that if you just use the semantic html tag for elements instead of a div, your components will be accessible. but there's a lot more that goes into it!Let's zoom in on one component from GitHub (one that you've probably used before!) and look at all the accessibility considerations involved and interesting challenges in implementing them.

Does your React app serve a global audience, but is only available in English? Let's change that. In this talk, I'll show you how i18n can become an automatic part of your CI/CD workflow, enabling your team, regardless of size, to deliver your React app in over 100 different languages without any extra effort.

Do you love standards but hatehatehate the DX of web components? Me too.As a reformed skeptic of Web Components due to my DX concerns, I encountered an interesting challenge at SuperTokens: creating a UI library that supports all the frameworks and remains future-proof. After some research, I discovered that SolidJS compiles to Web Components, offering a familiar, React-like developer experience - exactly what was needed to convert me into a believer. After a couple of rounds of experimentation, I fell in love with web components.This talk will share insights from our journey towards adopting Web Components for our next-gen authentication UI library at SuperTokens and why web components are a great idea that's here to stay.

Are our UI tests a chore, or do they help us move faster? Let’s examine what makes testing great and not so great. We’ll focus on test strategies that help us code with confidence and clarity, and where they can cost us time and energy. The secret to good testing lies in how it shapes our developer experience.

Ever wondered how to truly connect and collaborate with designers? Want to learn the best strategies for clear and effective communication? Curious about how to get designers to deliver exactly what you need? Discover how to refine your communication skills, integrate designers seamlessly into your workflows, and create a harmonious, productive environment for future projects.

When it comes to testing library code, the (usually amazing!) "Testing Library" approach quickly hits its limitations: We often need to test hot code paths to ensure additional guarantees, such as a specific order of DOM changes or a particular number of renders.As soon as we start adding Suspense to the picture, it even gets almost philosophical:How do we count a render that immediately suspended, and how do we distinguish it from a "committed" render?How do we know which parts of the Component tree rerendered?In the Apollo Client code base, we're using the React Profiler to create a stream of render events, enabling us to switch to a new stream-based testing method.After testing this approach internally for a year, we have released it in a library that we want to present to the world.I'll also briefly look into other "testing-related" problems far outside the norm that we've come across and share our solutions:How to test libraries that bundle different code for React Server Components, streaming SSR runs, and the Browser: Testing your growingly complex `exports` fields and ensuring all those environments export the package shape you expect.We'll even briefly look into rendering React components in different environments to test them in isolation - be it in Server Components, Streaming SSR, or simulating stream hydration in the Browser.

Did you ever need a hamburger menu icon and you you looked out for one in an icon library? Actually, it's only a few lines of code with SVG. And SVGs combined with React open up a whole new world. You can generate diagram, graphics or animation, make an interactive game or app.

When discussing frontend performance, there are usually two topics: Lighthouse scores, and rerenders. But when working on applications that deal with large amounts of data and pagination is not an option, entirely different categories of optimizations become necessary.Through the case study of Axiom's trace viewer, we will examine the solutions that keep your application running (and running fast!) each time your data size grows by an order of magnitude.

Website performance is paramount, and effective caching strategies can make a significant difference. In this talk, we will dive deep into frontend caching techniques specifically tailored for React applications. Learn how to control the caching of both static resources and dynamic data requests, understand where and for how long these resources are cached, and explore various layers of caching from the server to the client. By the end of this session, you'll have the knowledge to implement robust caching strategies that enhance the speed and efficiency of your React applications.

Discover the untapped potential of Abstract Syntax Trees (ASTs) in this transformative session. Learn how we achieved a remarkable 16% reduction in our bundle size by inlining constant objects directly into the referencing code, eliminating the need for large files in the output. This method even outperforms Terser's tree shaking used by Webpack.We will cover:* Introduction to ASTs: What they are and why they’re invaluable.* Overcoming AST Challenges: How to navigate the difficulties of working with ASTs.* Best Practices: Proven techniques for effective AST utilization.* Avoiding Pitfalls: A secret tip to prevent common mistakes.ASTs are everywhere, and their applications are vast. This session will empower you with the knowledge and confidence to transform your code, revealing when and how to use ASTs for remarkable results.Join me for an inspiring journey into the world of ASTs and unlock their potential to revolutionize your coding practices!

Performance optimization is key to user satisfaction in any mobile application, especially those built with React Native. This talk dives into common performance pitfalls in React Native apps and provides practical techniques for diagnosing and resolving these issues. We'll explore tools and methods for performance monitoring, efficient rendering techniques, and optimizing JavaScript thread utilization. Additionally, the session will cover advanced topics such as memory management, the use of Hermes JavaScript engine, and strategies for smooth animations and transitions.

This talk dives into Critical CSS as a method to enhance web performance and user experience. It covers what critical CSS is and best practices for effective implementation.

Web security is crucial in a constantly evolving environment where potential threats are always present. To better understand this concept, we can imagine our web application as a garden or a home that needs to be protected from possible attacks. We can draw parallels with the popular game "Plants vs. Zombies," which aims to safeguard your garden from intruders.Our automated tests function as diligent guardians whose primary objective is to identify and address potential vulnerabilities, much like the diverse plant arsenal in the game.