Tony Sullivan

The hidden costs of JS metaframeworks

tony-sull

tony @tonysull.co

3 min read

There are some really important implications of building your web product with a metaframework. These don't get talked about enough.

The term “metaframework” isn’t particularly well defined, though its generally used to refer to tools like NextJS, NuxtJS, and SvelteKit.

There are plenty of benefits to these types of tools. I won’t go into the reasons why you would use one here, mainly because the tools do a good job highlighting benefits themselves. Maybe I’ll write a future post going down that rabbit hole, but the tl;dr; is that metaframeworks are great to start projects quickly if you’re okay with scrapping the codebase and starting over later if the project actually scales.

The problem

Picking a metaframework for your next project defines your team structure and hiring goals.

The lines between backend and frontend blur, to the point that there may not be a distinction anymore.

Infrastructure, maintainability, testability, and scaling considerations all change.

Hiring

Almost every technical hire you make will likely need to be a full-stack engineer, bonus points if they specialize a bit.

Your SQL specialist will need to understand bundlers, JS tooling, and may need to know what “import server”, “use server”, and “use client” all do.

Your HTML/CSS and accessibility experts will need to know how to work in your JS component framework of choice. If you pull in Tailwind because styling in JS can be painful, they’ll need to know that as well.

APIs

If you have, or plan to have,a public API it may need to be entirely separate from your own frontend project. This isn’t a bad thing, I personally prefer separate backend and frontend code bases, but this flies in the face of a core benefit of a metaframework.

Now that RPCs are new stew rather than 3 day old halibut (RIP Anthony Bourdain), your project is likely using APIs created by the bundler without versioning or documentation.

Bug reproducibility

Bug reproducibility is going to be tricky too.

Application flow now moves between SSR, client rendering, and functions marshaled back to the server via RPC calls. When a user hits an error, where do you look? How do you recreate it locally? And how do you automate a test?

I’ll assume that you’re deploying to a serverless or edge environment. In that case, you likely can’t recreate the production environment locally if you wanted to.

Developers won’t be able to locally reproduce the deployed hardware, production OS, or the production network. The same goes for end users’ hardware and network conditions, reproducing client rendering and network issues will be tricky or impossible.

Moral of the story

I’m sure there’s more I’m missing here, and I haven’t touched on the pros though I know there are some.

The moral of the story, though, is to avoid diving into a brand new metaframework because its the most hyped online. These tools are brand new and are an amalgamation of so many different concepts (both new and repurposed) that we don’t yet know what we don’t know.

Picking your tech stack can have a profound impact in the long term. Choose your dependencies carefully, sticking with “boring” tech as much as possible.

Throwing in a couple carefully picked bets on newer tech is totally reasonable, but those bets really shouldn’t be so all-encompassing that you need to reconsider your organizational structure or hiring practices.

Mentions

They define your team structure and hiring goals

The lines between backend and frontend blur, to the point that there may not be a distinction anymore

Infrastructure, maintainability, testability, and scaling all change

????

tonysull tonysull

Almost every technical hire you make will likely need to be a full-stack engineer, bonus if they specialize a bit

Your SQL specialist will need to understand bundlers, JS tooling, and may need to know what "import server", "use server", and "use client" all do

Your HTML/CSS and accessibility experts will need to know how to work in your JS component framework of choice

If you pull in Tailwind because styling in JS can be painful, they'll need to know that as well

????

tonysull tonysull

If you have, or plan to have, a public API it may need to be entirely separate from your own frontend project

Now that RPCs are new stew rather than 3 day old halibut (RIP Anthony Bourdain), your project is using APIs created by the bundler without versioning or documentation

????

tonysull tonysull

Bug reproducability is going to be tricky too

Application flow now moves between SSR, client rendering, and functions marshaled back to the server via RPC calls

When a user hits an error, where do you look? How do you recreate it locally? And how do you automate a test?

????

tonysull tonysull

I'll assume that you're deploying to serverless or edge

In that case, you likely can't recreate the production environment if you wanted to

Devs won't be able to locally reproduce the deployed hardware, OS, or network. Same for the end user's hardware and network conditions

????

tonysull tonysull