Log in
Stephen Cooper

Stephen Cooper

Stephen is a Senior Developer at AG Grid. An active blogger writing about web tech who speaks at conferences and meet-ups worldwide, sharing practical and experience-based tips, tricks, and case studies.
AG Grid, UKscooper.devscooperdevStephenCooper
What Refs Can Do for You
React Summit US 2024React Summit US 2024
Recording pending
What Refs Can Do for You
While Refs are considered an escape hatch there are times when you might just need to use them.In this talk, with the help of real world examples, we will look at what Refs can do for us in terms of code clarity and also performance gains. Think along the lines of minimising renders and avoiding flickering UIs. We will cover the restrictions for safe usage and for those of you already using these patterns make sure you are prepared for the changes coming in React 19.
react 19
Perfecting Your Profiling
React Advanced 2024React Advanced 2024
29 min
Perfecting Your Profiling
One skill that will always be relevant is profiling. No matter the framework, no matter the version, at some point you will have to dive into why your application is not performing at its best. In this talk, we will show how you can use React Dev Tools alongside the standard Dev Tools to identify and resolve performance and memory issues. There are some hidden gems within Dev Tools profiling panel that goes beyond just measuring how much time is spent executing a function and we will discover them together including new features released this year.
devtools
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?
Let’s dive deep into React rendering and evaluate the implication of Concurrent Rendering and automated batching on code that previously relied on the synchronous nature of v17. Does it always make things better? With a real world case study, we evaluate useSyncExternalStore and flushSync as tools to restore synchronous rendering to avoid “visual tearing”. Working through the trade-offs of these approaches will give us new insights into React rendering and hints on how we can optimise our applications.
performanceconcurrent renderingreact flushsync
Patterns for Performance
React Advanced 2023React Advanced 2023
28 min
Patterns for Performance
Watch video: Patterns for Performance
When working with React it is important that we use the right tool for the right job. If not we will be missing out on the best performance and developer experience. While optimising AG Grid React Table we discovered a number of patterns that made significant improvements to the tables performance.
reactperformancepatterns
Supercharged Code Refactoring via Abstract Syntax Trees
React Summit 2023React Summit 2023
29 min
Supercharged Code Refactoring via Abstract Syntax Trees
Watch video: Supercharged Code Refactoring via Abstract Syntax Trees
When refactoring large code bases, Find and Replace even with Regexes, can only get you so far. When that fails don’t fallback to painful manual updates instead reach for Abstract Syntax Trees (AST). In this session we introduce AST’s and show how they can be used to reason about / generate code. You will leave with a greater understanding of how you can automatically update code and new insights into how code linters work under the hood. 
deep divedeveloper challenges
Get started with AG Grid Angular Data Grid
JSNation 2022JSNation 2022
116 min
Get started with AG Grid Angular Data Grid
WorkshopFree
Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.
Contents:- getting started and installing AG Grid- configuring sorting, filtering, pagination- loading data into the grid- the grid API- add your own components to the Grid for rendering and editing- capabilities of the free community edition of AG Grid
dataangular
Automatically maintaining thousands of code demos across multiple framework variations
JSNation 2022JSNation 2022
7 min
Automatically maintaining thousands of code demos across multiple framework variations
At AG Grid, we maintain thousands of code demos, with the same demo in Angular, React, Vue, and Vanilla JS. Additionally, each framework has different variations covering JavaScript, TypeScript, Modules, Packages, Hooks, Classes, Vue 2, and Vue 3. How do we do it? We automate. This session will explain how we start with a single TypeScript version and automatically convert it to every combination we need and finally use Cypress to test the converted example.
case studydevopsci cd