Stephen Cooper
@scooper.dev
Senior Developer AG Grid @ag-grid.bsky.social
Conference speaker and blogger
Typescript, Angular and React Performance
✝️ 4 Children, 2 🐕
Conference speaker and blogger
Typescript, Angular and React Performance
✝️ 4 Children, 2 🐕
It was a pleasure to be able to speak and share what I had learnt while reducing the bundle size of AG Grid.
A huge thank you to our Premium Sponsor @ag-grid.bsky.social for powering Angular Connect 2025! 🚀
👏 @scooper.dev inspired us with his talk “A Practical Guide to Reducing Bundle Size”
👏 James Swinton-Bland impressed with the power of AG-Charts at the booth
Check out 👉 www.ag-grid.com/charts/ 🔥
👏 @scooper.dev inspired us with his talk “A Practical Guide to Reducing Bundle Size”
👏 James Swinton-Bland impressed with the power of AG-Charts at the booth
Check out 👉 www.ag-grid.com/charts/ 🔥
September 16, 2025 at 2:24 PM
It was a pleasure to be able to speak and share what I had learnt while reducing the bundle size of AG Grid.
Reposted by Stephen Cooper
🎉 Just 2 months until AngularConnect!
@scooper.dev from @ag-grid.bsky.social shares why you should be there!
Our Premium Sponsor @ag-grid.bsky.social offers blazing-fast Charts!
🆓 Free forever
🚀 Built for big data
📊 Financial-ready
🏢 Enterprise features - no trial needed
🔗 ag-grid.com/charts
@scooper.dev from @ag-grid.bsky.social shares why you should be there!
Our Premium Sponsor @ag-grid.bsky.social offers blazing-fast Charts!
🆓 Free forever
🚀 Built for big data
📊 Financial-ready
🏢 Enterprise features - no trial needed
🔗 ag-grid.com/charts
July 15, 2025 at 1:45 PM
🎉 Just 2 months until AngularConnect!
@scooper.dev from @ag-grid.bsky.social shares why you should be there!
Our Premium Sponsor @ag-grid.bsky.social offers blazing-fast Charts!
🆓 Free forever
🚀 Built for big data
📊 Financial-ready
🏢 Enterprise features - no trial needed
🔗 ag-grid.com/charts
@scooper.dev from @ag-grid.bsky.social shares why you should be there!
Our Premium Sponsor @ag-grid.bsky.social offers blazing-fast Charts!
🆓 Free forever
🚀 Built for big data
📊 Financial-ready
🏢 Enterprise features - no trial needed
🔗 ag-grid.com/charts
Can't wait for this one!!!
📦 Talk Reveal: A Practical Guide to Reducing Bundle Size by Stephen Cooper (@scooper.dev)!
Learn how to avoid common pitfalls in tree-shaking & minification and trim your bundles like a pro. Real tips, real tools, real results. 🚀
📅 Sept 12–13, London
🎟️ angularconnect.com
#AngularConnect
Learn how to avoid common pitfalls in tree-shaking & minification and trim your bundles like a pro. Real tips, real tools, real results. 🚀
📅 Sept 12–13, London
🎟️ angularconnect.com
#AngularConnect
June 20, 2025 at 12:08 PM
Can't wait for this one!!!
With an Angular app that includes an Angular lib I am seeing different bundle sizes based on changes in the versions used.
Lib 17 + app 19 smaller than lib 18 + app 19
But lib 20 + app 20 is significantly smaller than both.
No code changes, just package.json
Is this expected / known about?
Lib 17 + app 19 smaller than lib 18 + app 19
But lib 20 + app 20 is significantly smaller than both.
No code changes, just package.json
Is this expected / known about?
May 29, 2025 at 9:12 PM
With an Angular app that includes an Angular lib I am seeing different bundle sizes based on changes in the versions used.
Lib 17 + app 19 smaller than lib 18 + app 19
But lib 20 + app 20 is significantly smaller than both.
No code changes, just package.json
Is this expected / known about?
Lib 17 + app 19 smaller than lib 18 + app 19
But lib 20 + app 20 is significantly smaller than both.
No code changes, just package.json
Is this expected / known about?
May 15, 2025 at 5:56 PM
I am in the process of evaluating the changes in React performance between v18 and v19.
Prod fairly stable.
Dev 19 is significantly slower.
I know we should never measure performance in Dev but in reality a lot of developers are doing just that!
Has anyone else noticed this?
Prod fairly stable.
Dev 19 is significantly slower.
I know we should never measure performance in Dev but in reality a lot of developers are doing just that!
Has anyone else noticed this?
May 7, 2025 at 7:07 PM
I am in the process of evaluating the changes in React performance between v18 and v19.
Prod fairly stable.
Dev 19 is significantly slower.
I know we should never measure performance in Dev but in reality a lot of developers are doing just that!
Has anyone else noticed this?
Prod fairly stable.
Dev 19 is significantly slower.
I know we should never measure performance in Dev but in reality a lot of developers are doing just that!
Has anyone else noticed this?
Reposted by Stephen Cooper
added a little diagram at the end
⚛️📝 New on Overreacted: What Does "use client" Do?
What Does "use client" Do? — overreacted
Two worlds, two doors.
overreacted.io
April 26, 2025 at 1:30 AM
added a little diagram at the end
Reposted by Stephen Cooper
I used JS private members for a long time, because they are awesome and really private.
But I haven't thought about that the bundler can mangle the names, because they are private!
All makes sense now... Thank you, @scooper.dev
youtu.be/B8qrGmAbJFU
But I haven't thought about that the bundler can mangle the names, because they are private!
All makes sense now... Thank you, @scooper.dev
youtu.be/B8qrGmAbJFU
How We Reduced the Bundle Size of AG Grid w/ Stephen Cooper 🌟 #WeLearnTogether | TechStackNation.com
YouTube video by Tech Stack Nation
youtu.be
February 24, 2025 at 8:08 PM
I used JS private members for a long time, because they are awesome and really private.
But I haven't thought about that the bundler can mangle the names, because they are private!
All makes sense now... Thank you, @scooper.dev
youtu.be/B8qrGmAbJFU
But I haven't thought about that the bundler can mangle the names, because they are private!
All makes sense now... Thank you, @scooper.dev
youtu.be/B8qrGmAbJFU
It's been a good day 😊
Always nice deleting code
Always nice deleting code
February 14, 2025 at 6:00 PM
It's been a good day 😊
Always nice deleting code
Always nice deleting code
Reposted by Stephen Cooper
Smart Bear would have failed had I not listened to what customers were really saying.
And almost always they were saying it via tech support, not via interviews, not via reviews, not via feature-submission forms.
Support == product development
And almost always they were saying it via tech support, not via interviews, not via reviews, not via feature-submission forms.
Support == product development
Tech Support is sales
Tech support isn’t just troubleshooting; it’s the face of your company. Which means it’s your brand, your positioning, and when it’s excellent, it is sales.
longform.asmartbear.com
February 7, 2025 at 5:09 PM
Smart Bear would have failed had I not listened to what customers were really saying.
And almost always they were saying it via tech support, not via interviews, not via reviews, not via feature-submission forms.
Support == product development
And almost always they were saying it via tech support, not via interviews, not via reviews, not via feature-submission forms.
Support == product development
Does anyone know of a tool that can run over a Typescript code base and suggest possibly unused public methods?
What to automate the process of finding unused methods following code changes with the aim of minimal bundle size.
(I don't fancy doing find for 500 that are marked public...)
What to automate the process of finding unused methods following code changes with the aim of minimal bundle size.
(I don't fancy doing find for 500 that are marked public...)
February 1, 2025 at 12:34 PM
Does anyone know of a tool that can run over a Typescript code base and suggest possibly unused public methods?
What to automate the process of finding unused methods following code changes with the aim of minimal bundle size.
(I don't fancy doing find for 500 that are marked public...)
What to automate the process of finding unused methods following code changes with the aim of minimal bundle size.
(I don't fancy doing find for 500 that are marked public...)
I am relieved to see this view point expressed from a testing authority as this is what we have started telling people in support.
I can't imagine the time that has been lost to unexpected test failures, especially when "it works fine in my browser"
www.epicweb.dev/why-i-won-t-...
I can't imagine the time that has been lost to unexpected test failures, especially when "it works fine in my browser"
www.epicweb.dev/why-i-won-t-...
Why I Won’t Use JSDOM
Explore how JSDOM's browser simulation works, and learn front-end testing approaches using Vitest Browser Mode for direct browser testing and native APIs
www.epicweb.dev
January 30, 2025 at 10:34 PM
I am relieved to see this view point expressed from a testing authority as this is what we have started telling people in support.
I can't imagine the time that has been lost to unexpected test failures, especially when "it works fine in my browser"
www.epicweb.dev/why-i-won-t-...
I can't imagine the time that has been lost to unexpected test failures, especially when "it works fine in my browser"
www.epicweb.dev/why-i-won-t-...
I spent yesterday converting a load of AG Grid Angular examples to use signals.
I love the DX and how easy it has become to enable OnPush with confidence.
computed - the way you can just use signals and let Angular take care of the dependency updates is 🔥!
Good work @angular.dev team!
I love the DX and how easy it has become to enable OnPush with confidence.
computed - the way you can just use signals and let Angular take care of the dependency updates is 🔥!
Good work @angular.dev team!
January 28, 2025 at 8:49 AM
I spent yesterday converting a load of AG Grid Angular examples to use signals.
I love the DX and how easy it has become to enable OnPush with confidence.
computed - the way you can just use signals and let Angular take care of the dependency updates is 🔥!
Good work @angular.dev team!
I love the DX and how easy it has become to enable OnPush with confidence.
computed - the way you can just use signals and let Angular take care of the dependency updates is 🔥!
Good work @angular.dev team!
Reposted by Stephen Cooper
😎Check out the talk recording "What Refs Can Do for You" by @scooper.dev.
Watch it here⤵️
gitnation.com/contents/wha...
Watch it here⤵️
gitnation.com/contents/wha...
December 30, 2024 at 1:23 PM
😎Check out the talk recording "What Refs Can Do for You" by @scooper.dev.
Watch it here⤵️
gitnation.com/contents/wha...
Watch it here⤵️
gitnation.com/contents/wha...
Introduction Over the past 15 years, the JavaScript ecosystem has expanded rapidly,... dev.to/filipsobol/d...
Downsize your JavaScript: Mastering Bundler Optimizations
Introduction Over the past 15 years, the JavaScript ecosystem has expanded rapidly,...
dev.to
December 17, 2024 at 9:11 PM
Introduction Over the past 15 years, the JavaScript ecosystem has expanded rapidly,... dev.to/filipsobol/d...
This release has to be one of the greatest step forwards we have ever implemented! Really proud of what we have managed to achieve here.
blog.ag-grid.com/whats-new-in...
blog.ag-grid.com/whats-new-in...
What's New in AG Grid 33
What's new in AG Grid 33 - bundle size reduction via modularization, async context menu items, customization of default column header content
blog.ag-grid.com
December 14, 2024 at 4:48 PM
This release has to be one of the greatest step forwards we have ever implemented! Really proud of what we have managed to achieve here.
blog.ag-grid.com/whats-new-in...
blog.ag-grid.com/whats-new-in...
Some excellent additional information concerning ref callbacks
Ref Callbacks got an upgrade with React 19, and the presence of the React Compiler has further changed my thinking about using useCallback for those in some situations.
tkdodo.eu/blog/ref-cal...
Thank you @gsathya.bsky.social for starting the discussion about this 🙇♂️
tkdodo.eu/blog/ref-cal...
Thank you @gsathya.bsky.social for starting the discussion about this 🙇♂️
Ref Callbacks, React 19 and the Compiler
Reflecting on useCallback, how the Compiler changed my thinking about it, and what React 19 has in store for Ref Callbacks...
tkdodo.eu
December 9, 2024 at 9:00 AM
Some excellent additional information concerning ref callbacks
Is this a trade off for speed of build times with esbuild becoming the default in v19?
Or is this offset by people using deferable components and hydration?
Or is this offset by people using deferable components and hydration?
December 5, 2024 at 8:43 AM
Is this a trade off for speed of build times with esbuild becoming the default in v19?
Or is this offset by people using deferable components and hydration?
Or is this offset by people using deferable components and hydration?
Anyone experienced a different bundle size output with the new Angular esbuild builder as opposed to the webpack one?
Validating an Angular 19 app importing AG Grid and get very different bundle size outputs.
Looks like a difference in tree shaking capabilities.
Validating an Angular 19 app importing AG Grid and get very different bundle size outputs.
Looks like a difference in tree shaking capabilities.
December 3, 2024 at 6:03 PM
Anyone experienced a different bundle size output with the new Angular esbuild builder as opposed to the webpack one?
Validating an Angular 19 app importing AG Grid and get very different bundle size outputs.
Looks like a difference in tree shaking capabilities.
Validating an Angular 19 app importing AG Grid and get very different bundle size outputs.
Looks like a difference in tree shaking capabilities.
Reposted by Stephen Cooper
✅ Just updated the #Angular #vitest @stackblitz.com starter to Angular v19.0.1
🔗 Give it a try stackblitz.com/edit/angular...
🔗 Give it a try stackblitz.com/edit/angular...
November 29, 2024 at 4:07 PM
✅ Just updated the #Angular #vitest @stackblitz.com starter to Angular v19.0.1
🔗 Give it a try stackblitz.com/edit/angular...
🔗 Give it a try stackblitz.com/edit/angular...
Busy writing codemods for the next major release of AG Grid so that we can land some of the biggest changes in a major yet.
And when I say biggest, these changes will enable some of the smallest bundle sizes yet.
Looking like a possible 40% reduction based on the features actually used!
And when I say biggest, these changes will enable some of the smallest bundle sizes yet.
Looking like a possible 40% reduction based on the features actually used!
November 28, 2024 at 7:33 PM
Busy writing codemods for the next major release of AG Grid so that we can land some of the biggest changes in a major yet.
And when I say biggest, these changes will enable some of the smallest bundle sizes yet.
Looking like a possible 40% reduction based on the features actually used!
And when I say biggest, these changes will enable some of the smallest bundle sizes yet.
Looking like a possible 40% reduction based on the features actually used!
Reposted by Stephen Cooper
Together with @Jean__Meche we've been cooking something delicious 🥘!
What if Angular warns you if you're running change detection too often [configurable] over a given period of time [configurable too] !?
More here 👇
github.com/angular/angu...
#angular
What if Angular warns you if you're running change detection too often [configurable] over a given period of time [configurable too] !?
More here 👇
github.com/angular/angu...
#angular
feat(core): add change detection tracing service by eneajaho · Pull Request #58916 · angular/angular
This will warn users when they are rendering too much based on the config they provide. Linked to #58540
It works somehow like this:
// More than 10 change detections in 1 second triggers a warning...
github.com
November 26, 2024 at 10:34 PM
Together with @Jean__Meche we've been cooking something delicious 🥘!
What if Angular warns you if you're running change detection too often [configurable] over a given period of time [configurable too] !?
More here 👇
github.com/angular/angu...
#angular
What if Angular warns you if you're running change detection too often [configurable] over a given period of time [configurable too] !?
More here 👇
github.com/angular/angu...
#angular
My talk from React Advanced London is now available. 😊
I dive into different profiling techniques and also look at how Web Vitals Metrics are now available directly in the Chrome Performance Panel.
gitnation.com/contents/per...
I dive into different profiling techniques and also look at how Web Vitals Metrics are now available directly in the Chrome Performance Panel.
gitnation.com/contents/per...
Perfecting Your Profiling by Stephen Cooper
A software engineer from AGGrid discusses profiling and optimization in React DevTools and Chrome DevTools. The React DevTools allow for analyzing and optimizing renders, and can help improve Core Web...
gitnation.com
November 26, 2024 at 8:50 AM
My talk from React Advanced London is now available. 😊
I dive into different profiling techniques and also look at how Web Vitals Metrics are now available directly in the Chrome Performance Panel.
gitnation.com/contents/per...
I dive into different profiling techniques and also look at how Web Vitals Metrics are now available directly in the Chrome Performance Panel.
gitnation.com/contents/per...
Lots of insights here about callback refs!
I'd store the id in a ref and check that manually and not depend on useCallback:
```
const idRef = useRef(null);
const scroller = (node) => {
if (idRef.current === null || idRef.current !== id) {
node?.scrollIntoView({ behavior: "smooth" });
idRef.current = id;
}
};
```
```
const idRef = useRef(null);
const scroller = (node) => {
if (idRef.current === null || idRef.current !== id) {
node?.scrollIntoView({ behavior: "smooth" });
idRef.current = id;
}
};
```
November 22, 2024 at 2:25 PM
Lots of insights here about callback refs!
Today I learnt that @vuejs.org can, (what feels like magic) take a Typescript interface and turn that into property coercions for a component's properties!
I had to double check it, I hadn't seen this before as part of a framework,
User Types -> Actual Code
I had to double check it, I hadn't seen this before as part of a framework,
User Types -> Actual Code
November 21, 2024 at 7:43 PM
Today I learnt that @vuejs.org can, (what feels like magic) take a Typescript interface and turn that into property coercions for a component's properties!
I had to double check it, I hadn't seen this before as part of a framework,
User Types -> Actual Code
I had to double check it, I hadn't seen this before as part of a framework,
User Types -> Actual Code