Published 📅: ....
Last modified 📝: ....
Share this post on BlueskySee discussion on Bluesky
While JavaScript classes aren't exactly all the rage anymore (although I think they are finding a nice niche, and I recommend developers check them out for specific use cases), I've been working with them a decent amount as of late while working with webpack and rspack plugins.
One of the challenges that we've run into at work is needing to instantiate a new instance of the plugins, but doing so with some async dependencies.
If you're unfamiliar, class constructors can't be async in JavaScript, they syncronously return with a class instance, so if you need to do some async computation before creating the instance you usually would need to do that work outside of the class and then pass the result into the class constructor, e.g.:
class MyClass {
constructor() {}
}
async function computeSomething() { /* ... */ }
// do async operation:
let result = await computeSomething();
// pass result to the MyClass constructor
let classInstance = new MyClass(result);However this breaks some of the nice encapsulation we get out of the box with JavaScript classes.
At work, we've had to come up with a nice pattern for handling async instantiation without breaking some of the encapsulation we get with classes!
class MyClass {
// ✨ "Magic" ✨
static async createMyClass() {
// do some async operations
let result = await (/* ... */);
return new MyClass(result)
}
constructor(/* ... */) {}
}
// usage:
// call the static async method, get back a class instance!
let classInstance = await MyClass.createMyClass();This isn't all that different from the first code snippet above - but at least now we've nicely coupled the initialization logic within the class, making the code a bit more portable in the case that we might need to move it around.
Loading...
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!
Published: ....
A few thoughts on what to do after you launch a new project
Published: ....
A quick tip outlining how to provide specific TypeScript type definitions for a local module!
Published: ....
A quick look at a small but powerful pattern I've been leveraging as of late!
Published: ....
A proposal for a minimal variant of TypeScript!
Published:
A quick overview of the new lifecycle methods introduced in React 16.3
A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?