Stephen Cooper

Stephen Cooper

@scooper.dev

Senior Developer AG Grid @ag-grid.bsky.social Conference speaker and blogger Typescript, Angular and React Performance ✝️ 4 Children, 2 🐕

511 followers450 following93 posts

Stephen Cooper reposted

Dominik 🔮
@tkdodo.eu

🤔 What if there were a conference without talks? Just hanging out with OSS maintainers & builders, seeing what they’re working on, and learning cool stuff by actually talking to people. 🤯 What if hallway track turned into the whole event! 💡 @tannerlinsley.com is exploring it. Interested? ⬇️

webforgeconf.comWeb Forge Conf - A new kind of web developer conferenceA community funded, not for profit event built for creators and the developers who use their work. Less stage. More story. All signal.
Stephen Cooper
@scooper.dev

It was a pleasure to be able to speak and share what I had learnt while reducing the bundle size of AG Grid.

Angular Connect@angularconnect.com

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/ 🔥

Stephen Cooper
@scooper.dev

Can't wait for this one!!!

Angular Connect@angularconnect.com

📦 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

Stephen Cooper
@scooper.dev

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?

Stephen Cooper
@scooper.dev

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?

Stephen Cooper
@scooper.dev

What makes this even more interesting is that Chrome 136 looks to have improved things. But also the performance only really goes down when DevTools is open.

Stephen Cooper
@scooper.dev

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?

Stephen Cooper
@scooper.dev

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?

Stephen Cooper
@scooper.dev

When profiling it looks to be related to the improved Error reporting that creates a JavaScript Error for each element. This really starts adding up if you have lots of elements on a page.

Stephen Cooper reposted

Jason Cohen
@asmartbear.com

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

longform.asmartbear.comTech Support is salesTech 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.
Stephen Cooper
@scooper.dev

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

Stephen Cooper
@scooper.dev

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-...

epicweb.devWhy I Won’t Use JSDOMExplore how JSDOM's browser simulation works, and learn front-end testing approaches using Vitest Browser Mode for direct browser testing and native APIs
Stephen Cooper
@scooper.dev

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!

Stephen Cooper
@scooper.dev

And finally we have worked hard on providing codemods to do the majority of the upgrade for you, so do try and take advantage of that! Especially if you are an existing module user, the codemod will update all you import statements for you! ag-grid.com/react-data-g...

ag-grid.comReact Grid: Upgrading to AG Grid 33 | AG GridSee whats new in AG Grid, view a full list of changes and migrate your React Data Grid to v33 with our Codemods. Download AG Grid v33.0.0 today: The best React Table & React Data Grid in the world.
Stephen Cooper
@scooper.dev

Re-working our internals means we can now tree shake from a single bundle, greatly simplifying the path to minimal bundle size for our users. Not to mention the simplicity gains for us internally being able to work with just 2 packages instead of getting close to 20 separate ones.

Stephen Cooper
@scooper.dev

Some excellent additional information concerning ref callbacks

Dominik 🔮@tkdodo.eu

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.euRef Callbacks, React 19 and the CompilerReflecting on useCallback, how the Compiler changed my thinking about it, and what React 19 has in store for Ref Callbacks...
Stephen Cooper
@scooper.dev

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?

Ricky@ricky.pt

Interesting! I'm going to try this lib 👏 Btw, created an empty Angular 19 project this afternoon and compared both build versions: ESBuild was ~20Kb larger than Webpack 🤷

Stephen Cooper
@scooper.dev

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.

Stephen Cooper
@scooper.dev

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!

Stephen Cooper
@scooper.dev

One outstanding decision: 1. Organise the import statements that we update. I.e collapse duplicate import paths into one larger import or 2. do the minimal changes and leave duplicate import paths to make the diffs easier for developers to validate

Stephen Cooper reposted

Enea Jahollari
@eneajaho.me

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

github.comfeat(core): add change detection tracing service by eneajaho · Pull Request #58916 · angular/angularThis 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...
Stephen Cooper
@scooper.dev

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...

gitnation.comPerfecting Your Profiling by Stephen CooperA 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...
Stephen Cooper
@scooper.dev

Lots of insights here about callback refs!

Sathya@gsathya.bsky.social

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; } }; ```

Stephen Cooper
@scooper.dev

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

Stephen Cooper reposted

Josh W. Comeau
@joshwcomeau.com

🌠 I’m lucky enough to be a full-time educator. I work exclusively on my blog and courses. A couple of people have recently asked how this happened, how I made it my job. I thought I’d share some info about my experience for anyone else hoping to become a full-time course creator / dev educator!

Stephen Cooper
@scooper.dev

Of course I now want to try this out for AG Grid, that would be a handy thing to include via our new Dev / debug mode to get easily measurable metrics.

daniel r(ooooooh) at jsconf mx 🇲🇽@danielroe.dev

👉 the Chrome team also have a full blog post showing how you can add your own timings + tracks as well

developer.chrome.comCustomize your performance data with extensibility API  |  Chrome DevTools  |  Chrome for DevelopersCustomize performance data with the extensibility API
Stephen Cooper
@scooper.dev

Oh and of course if users record a profile and share it with us we will have consistent measurement timings already annotated in the profile 😊 The only real challenge is finding time to do all these cool things!

Stephen Cooper reposted

Brandon Roberts
@brandonroberts.dev

My chapter at OpenSauced has closed, and I'm looking for my next role! If your team needs someone who knows Angular/Nx/Next.js/Open Source, please reach out! Open to contract work also 🤝 In the meantime, I'll be working on @analogjs.org and NgRx 🥰

Stephen Cooper
@scooper.dev

Anyone else make sure to find their passport a few days before the trip? I do now after a very stressful morning before a previous conference trip! 😬

Stephen Cooper
@scooper.dev

Excited to be heading to #ReactSummitUs next week in New York! 🗽 Definitely going to be aiming to speak to more people again as that is definitely the secret sauce for conferences.

Stephen Cooper
@scooper.dev

Being able to test types is such a great feature, especially within library development.

Vitest@vitest.dev

Check out the 3 @vitest.dev talks of VitestConf 24 here 👋 @erus.dev - The State of Vitest @ariperkkio.dev - Getting Started with Vitest Code Coverage @mmkal.com - Testing Types with Vitest and expect-type