Express.js is as old as Node.js itself, and while Express is still a phenomenal back-end framework, a new breed of tools and kits are leaving their mark.
Most notably, the trend has shifted towards meta frameworks, where a popular framework like React is repurposed to support full-stack development. The advantage of this approach is that you can maintain your expertise in a specific framework, but also work on back-end stuff simultaneously. In other words, do full-stack development.
How was this data sourced?
Instead, I’ve compared the number of stars gained in the past year. Which is a solid indicator of how active a certain project is, but also how well developers respond to it.
If you want to try any of these frameworks in a real-time environment, check out my article on hosting platforms for developers. Each platform has a free plan, and almost all of them let you import a GitHub repo and host it directly. E.g. You can take any repo and have it live in a matter of minutes.
The current Node.js trends
One of the things you’ll notice throughout this post is that many of the frameworks mentioned in this article are based on top of a front-end framework. This is also referred to as a meta framework. So, what’s the deal with this, and why this approach?
And this will keep happening every time the user interacts with the page. Even though the HTML remains as is, different route requests mean the browser has to keep going back and forth to render the content that the user wants.
This is also often referred to as SPA or a Single Page Application.
And here are the downsides to this – CSR – approach:
So, in this context, the idea behind frameworks like Next and Nuxt is to take the front-end framework, but give it SSR (Server-Side Rendering) through Node.js.
Speaking of SSR – Nick Johnstone published an interesting gist titled, “The absurd complexity of server-side rendering“. And there is also a corresponding Hacker News thread with quite a lot of discussion on the topic. While not much will change in the near future, I do believe some of these concepts will drive a significant change in how some of these frameworks operate.
The core concept behind Next.js is that it uses React as the foundation, but performs all the server-side rendering structure through its own specification. Because rendering is done server-side, you don’t have to render pages on the client-side, providing enormous benefits in performance, but also SEO where it is concerned.
One of the reasons why Next has seen such mass adoption is that it eliminates the need to build your own back-end. All the while, providing meaningful ways to optimize the performance of your apps out of the box. It is maintained by Vercel.
NestJS has quietly managed to attract a rather significant approval from the back-end community. One of the main philosophies behind Nest is that while frameworks like React accelerate front-end development, a lot of such frameworks struggle to solve the issue of application architecture. Nest solves this through an architecture-first approach.
Which is specific to the back-end, of course.
Nest is based on three core components (inspired by Angular) – Controllers, Providers, and Modules. The use of Modules is how Nest tries to solve the problem of complex application hierarchy. Each component can be categorized in a separate module, within which you configure its own controllers, dependencies, and specific providers.
Headless is all the rage in the current front-end narrative. And Strapi has done a great job at positioning itself as one of the leading Headless CMS frameworks.
So, what is Strapi? In the most practical terms, Strapi is the back-end of your front-end application. In a sense, Strapi eliminates the need for you to learn a framework like Express because it can do the majority of the legwork through its API.
That includes managing your content through a custom UI, on-the-fly endpoints for GraphQL & REST, user management (roles, etc.), and a separate plugin interface you can build upon. Strapi is completely framework-agnostic and integrates with practically any language, framework, or front-end library.
Remix is a full-stack framework that’s built by the same people who made React Router.
I do believe Remix is also one of the fastest-growing full-stack frameworks that we’ve seen in recent years. So, how come? For one, Remix tries to integrate as much as possible with Web Standards by providing concise APIs for common status codes and user interactions.
Nuxt 3 (for Vue 3) is in open-beta: keep an eye out.
Nuxt builds on top of Vue as a full-stack framework for building robust applications. It’s also a meta-framework, created to drastically improve the experience of full-stack Vue development. Nuxt supports SSR, SPA, and Static Generated Pages.
The main advantage for Vue developers is that Nuxt is able to pre-render views and serve them as static files. This naturally has great results for SEO optimization and provides a significant boost in interactivity. But there are some downsides, too.
Whereas Vue has a persistent client-side channel, Nuxt doesn’t. So, interacting with the DOM after Nuxt has already rendered the page might prove difficult.
Svelte has the cool kid status in the current front-end era, and the team is working on SvelteKit – a full-stack framework that builds on top (replaces it) of Sapper. SvelteKit stands out with an intricate file-based routing system.
The primary goal of SvelteKit is to accelerate web development by removing some of the more common bottlenecks. By implementing Snowpack, Vite, and other external tools – SvelteKit is able to provide a feature-rich development experience.
Lastly, SvelteKit implements the process of Hydration. The ability to retain active state for DOM elements that have been server-side rendered.
The Fastify framework is all about performance, and individual benchmarks have shown it can handle up to 60,000 requests per second. You can extend Fastify (on top of already great tooling) through the use of Hooks and Plugins. And, despite not being a TypeScript-first framework, Fastify does support TypeScript.
Speaking of Plugins, a lot of Fastify development happens through them. So much so that Fastify has an official repository for both community-made and plugins made by the Fastify team. The idea behind plugins is that it provides a clean system architecture, and removes the need to jump to alternative frameworks. This makes Fastify particularly useful for building low-overhead APIs with strong real-time performance.
Do you love APIs? Do you like JAMStack? If the answer is yes, you are going to love RedwoodJS. It’s a full-stack web app framework utilizing a lot of modern technologies. And those technologies include GraphQL, Prisma, Storybook, and Jest. The front-end in Redwood is built on top of React, and you also get full-on TypeScript support.
Has Express fallen from grace? Not exactly. The framework is still extremely popular and loved, just not as much as the other big players. For a team that has been working with Express for years, it doesn’t make sense to switch to something else since there aren’t any fundamental issues. In fact, a lot of frameworks still build upon Express.
Adonis is a TypeScript-first back-end MVC framework built for Node.js. Keep in mind that despite Adonis describing itself as a back-end framework, it’s just as fine to do full-stack development with it.
One of the key reasons developers love Adonis is due to its native support for TypeScript.
But also, support for ORM (Object Relational-Mapping), strong security practices, and easy-to-follow documentation.
Last but not least, Adonis integrates with the Node.js ecosystem on a fundamental level, so having prior experience in Node development is pretty much a must-have.
The last Node.js framework in this list is Keystone. And much like Express, it has been around almost since day one. This makes Keystone a mature framework, providing concrete tooling and integrations to create a developer-friendly experience.
Some notable features (many of which have been refined over the years) in Keystone include automated CRUD through the GraphQL API, which you can further extend. Additionally, you can create and implement your own React.js components.
Keystone is used in a variety of development fields, it works fine with mobile apps, practical websites, eCommerce storefronts, and much more.
Meta, native, and a pinch of Headless
It has been quite a while since I last did an overview like this. Things were a lot simpler back then, and while Compound and Locomotive are nowhere to be found, it’s nice to see Keystone and Express make their way through the test of time.
I can also say that there’s quite a bit of buzz surrounding Node.js at the moment. I do believe some people are unhappy and feel stuck with it. And the idea of package managers (npm) is also starting to grow old as packages keep adding piles upon piles of unnecessary bundle sizes to an otherwise small-scale project.
But, whatever the case may be – the popularity of each framework speaks for itself. Overall, developers are happy to work with meta frameworks, and some of it might have to do with the fact that it also streamlines full-stack development. Which is mostly due to the fact that it eliminates the need to relearn a new favorite framework from scratch.