Metaframeworks for React, Angular and Vue

Introduction

In the web development world, numerous JavaScript frameworks are popular. Every web developer probably knows names like React, Vue and Angular. In addition to the “big three”, there are numerous smaller frameworks, all of which have gained a certain specialization and their own place in the market. Well-known ones include Svelte and Qwik.

However, frameworks are primarily suited to core functionalities. Think of building web applications with components, communication between components, http communication with a backend, routing and so on.

This means that as a programmer you spend quite a bit of time setting up a complete application with homepage, overview pages, detail pages and more. Frameworks are known for (or: infamous for) the amount of boilerplate code required to get a complete application up and running.

Metaframeworks

This is exactly the hole that metaframeworks fill! They extend the core capabilities of the basic frameworks by adding additional functionality and abstractions. Metaframeworks automate common tasks when creating a web application. This works because they have a series of agreements (conventions) that you as a programmer need to know. After that, you work a lot faster.
The best known metaframeworks are:

• For React - Next.js
• For Angular - Analog.js
• For Vue - Nuxt

Metaframeworks are full-stack frameworks. They consist of a client and a server part.

Convention on configuration

For example, metaframeworks often state that when components are in a specific directory /pages in the application, these components automatically become a route.

You then no longer have to program the router and maintain routes and components yourself. The metaframework picks up all pages and makes sure routes exist.

This principle is taken much further by using special naming for parameters, grouping pages, rendering pages on the server for better SEO and much more.

Essential features

Metaframeworks have many similarities. These include:

• Server-Side Rendering (SSR): metaframeworks support SSR allowing you to pre-render pages on the server for better findability in Google (SEO), faster load times and an improved visitor experience as pages load faster.
• Static Site Generation (SSG): metaframeworks allow you to render static HTML pages on the server during the build phase of the application. This also benefits the speed of the application. Via configuration files, you can always specify which pages in the application should be generated and which should not.
• File Based Routing: by placing files in a special folder (such as /pages), the router is automatically configured. You immediately get a navigation structure for your application. This saves a lot of time because you don't have to set it up yourself.
• API routing: metaframeworks often provide built-in support for serverless functions (or: api routing). This simplifies communication with a backend. In some cases, a separate API server is even completely unnecessary. In any case, it prevents you from having to apply separate CORS settings to your server because it runs at the same address as your frontend application (a route such as /v1/api is often defined). Again, this is done based on conventions. You can deviate from this via configuration files, but this is not absolutely necessary.
• Bundling and code-splitting: metaframeworks intelligently split code into separate modules and bundle code that needs each other. This also improves speed.
• Hot Module Replacement: as a developer, it is convenient that during development, only modules that you have actually modified are replaced - without recompiling the entire application. This improves the development experience or developer experience (DX).
• SEO optimization and metatag management: most metaframeworks provide tools for managing the title and metatags on a page and other SEO elements such as Open Graph tags for Facebook and X.

When to choose a metaframework?

If you have a small project, using a metaframework may create additional overhead you don't want.

In many other cases, however, it will save you a lot of time. Deploying a metaframework is ultimately a time-saving action. You have to do some setup at first - and, of course, learn the conventions of the framework in question - but ultimately the Return on Investment is quite significant.

Use a metaframework for:

• SEO-intensive projects: if your application depends on SEO, such as e-commerce and content-rich sites, metaframeworks make SSR and SSG easier. This improves searchability and Google page ranking.
• Performance Optimization: if you need fast load times, SSR, SSG and optimized bundling help improve speed. Especially in JavaScript-rich applications such as Vue, React and Angular, this is a big plus.
• Fast Prototyping: metaframeworks speed up development because they have standard solutions for routing, API endpoints and code-splitting. This, of course, is ideal for startups and proof-of-concept applications (POC).
• Scalability and maintainability: as the app grows, metaframeworks provide good practices and structure. This can simplify the onboarding of new developers. Of course, the condition then is that the principle of convention-over-configuration is well followed and documented.

Conclusion

Metaframeworks can make a developer's life quite pleasant. They speed up the process of application development.

If you are creating a small application with limited scope that does not require a lot of complicated configuration - and that you know will not be needed in the future! - deploying a metaframework is probably unnecessary because of the extra overhead. Then it's better to keep things lean.

In all other cases, it pays to deploy a metaframework that fits the technology of your choice.

---

(This article was originally published in Dutch on the blog https://www.kassenaar.com/blog/post/2024/10/30/Metaframeworks-voor-React-Angular-en-Vue.aspx)

-- Peter Kassenaar