React Summit

React Summit 2023

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 🤐)

React Performance Debugging Masterclass

Ivan Akulov

React Advanced

React Advanced Conference 2023

Planby is a React based component for a quick implementation of Schedules, Timelines, Electronic Program Guide, Music/Sport events, Calendar Planner  and many more ideas.  It uses a custom virtual view which allows you to operate on a really big number of data. The component has a simple API that you can easily integrate with other third party UI libraries. The component theme is customised to the needs of the application design.

Implementation of Schedules and Timelines

Karol Kozer

TS Congress

TypeScript Congress 2023

This talk will explore more advanced ways to write static analysis rules in ESLint using ESLint's control flow APIs. I will quickly explain what a control flow graph is and how you can use it to find issues in your code. I will show you how to detect when a value is assigned to variable uselessly and other logical problems you can detect using this technique.

Advanced linting rules with ESLint 

Tibor Blenessy

GraphQL is a powerful and useful tool, especially popular among frontend developers. It can significantly speed up app development and improve application speed, API discoverability, and documentation. GraphQL is not an excellent fit for simple APIs only - it can power more advanced architectures. The separation between queries and mutations makes GraphQL perfect for event sourcing and Command Query Responsibility Segregation (CQRS). By making your advanced GraphQL app serverless, you get a fully managed, cheap, and extremely powerful architecture.

Advanced GraphQL Architectures: Serverless Event Sourcing and CQRS

Slobodan Stojanović

React Advanced Conference 2022

How do you start your app on your simulator in the morning? Do you always run react-native run-ios? If so, you might be wasting a lot of time. Let’s check out together what a React Native app looks like under the hood. It will help us to be more efficient on a daily basis. We’ll identify the shortest steps to execute daily actions, like starting our apps as fast as possible (no more unnecessary compilations of native modules!), or dealing with pesky red errors that metro throws at us.

What Happens When You Build Your App

Charlotte Isambert

GraphQL Galaxy

GraphQL Galaxy 2021

There are always a lot of questions and conference talks about bringing GraphQL servers into production, but there aren’t a lot of good concrete steps and actions to follow. In the workshop Uri (The founder of The Guild) will walk you through The Guild’s process of bringing GraphQL Server into production. We will add: - Powerful Caching - Logging, Monitoring and tracing - Security features like Auth, Error Masking, Persisted Operations, Depth and Rate limit If you are planning to have your GraphQL server running in production, this is a must have workshop for you! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Everything You Need to Get Your GQL Server Production Ready

Uri Goldshtein

React Advanced Conference 2021

In this talk, you will discover how to manage async operations and request cancellation implementing a maintainable and scalable API layer and enhancing it with de-coupled cancellation logic. You will also learn how to handle different API states in a clean and flexible manner. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Advanced Patterns for API Management in Large-Scale React Applications

Thomas Findlay

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Don’t Know How React State Hooks Work

Adam Klein

React Summit Remote Edition

React Summit Remote Edition 2021

With React 16.0, Facebook has released an update to the React core reconciliation algorithm which was named ""Fiber"". Fiber allows React to break the limits of the call stack and pause/start rendering work at will. In this talk, we will explore why Fiber was necessary, cover some of the internal implementation details of Fiber, and see Fiber in action with React's experimental Concurrent Mode. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Inside Fiber: An Overview of React's Reconciliation Algorithm

Elad Tzemach

We use them all the time, and we think we know state hooks work (useState, useReducer). But under the hood, as expected, things are not what you imagine. This talk is about update queues, batching, eager and lazy updates, and some other cool things learned from looking at Hooks source code. It also contains practical takeaways that will help you better understand and debug your code. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

We Don’t Know How React State Hooks Work 

Put up your thinking caps with Suspense and Concurrent mode! In this talk, I would discuss how to improve the existing user experience with the magic of React’s Suspense and Concurrent mode for non-blocked rendering. The talk would highlight the best practices and guidelines for the same. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#advanced