In this guide, we’ll compare one of the most commonly used frameworks for building web applications with Node.js, Express.js, with tinyhttp, one of its most popular alternatives.
Here’s what we’ll cover:
tinyhttp is a modern web framework similar to Express.js that is written in TypeScript. It uses a very minimal amount of dependencies compared to Express.js, which makes it super fast.
tinyhttp delivers routing, req/res extensions, and much more, all while depending on only six modules — four of which are tinyhttp’s own.
All the middleware that was created for Express.js works smoothly with tinyhttp. Check out this tinyhttp + Express/GraphQL integration for an example of how to use Express.js middleware with tinyhttp.
tinyhttp also supports async/await for routes, which is not the case in Express.js. There are proper typings and a function checker inside tinyhttp, which resolves async functions. In other words, both sync and async work fine in tinyhttp. Check out these async and MongoDB examples to see how to make async handlers.
Here is a short list of the most important features of tinyhttp, according to the official docs:
Express.js is a flexible Node.js framework that provides a robust set of features for web and mobile applications. Creating robust APIs is very easy because Express.js comes with lots of middleware and other in-built support.
Express.js doesn’t come with a database; this is left up to third-party modules, which allows you to interface with nearly any database. Express.js supports myriad template engines that go with the (path, locals, callback)
signature.
This framework is built in such a way that it acts as a minimal and flexible Node.js web application framework, providing a robust set of features for building single, multipage, and hybrid web applications.
Some features of Express.js:
For a high-level comparison of tinyhttp and Express v4, let’s look at the minimum Node.js version supported, ECMAScript version, test coverage, etc.:
Criteria | tinyhttp | express v4 |
---|---|---|
Minimum supported Node.js version | 12.4.0 | 0.10.0 |
Minimum supported ECMAScript version | ES2019 | ES5 (?) |
req / res extensions |
✔️ | ✔️ |
Test coverage | 92% | 100% |
Compiled to native ESM | ✔️ | ✖️ |
TypeScript support | ✔️ | ✖️ |
Package size (core only) | 35.2 kB | 208 kB |
Built-in middleware | ✖️ | ✔️ |
Some notes on the table above:
req
is an object containing information about the HTTP request that raised the event. In response to req
, you use res
to send back the desired HTTP response. Both tinyhttp and express v4 support req
/res
extensionsWith the basics out of the way, let’s look at a performance report using the fastify benchmarking tool. Here we use parameters as req/s, transfer/s, and latency to measure the performance of both frameworks.
Below are some notes on the hardware, system, and conditions used for this benchmark.
Framework | req/s | transfer/sec | latency |
---|---|---|---|
@tinyhttp/app (w/o exts) | 24575 | 3.81 MB | 3.37 ms |
@tinyhttp/app (esm) | 22820 | 3.54 MB | 4.04 ms |
@tinyhttp/app (cjs) | 22637 | 3.51 MB | 4.08 ms |
[email protected] | 12986 | 2 MB | 7.11 ms |
req/s
is number of requests per second. Latency
refers to the delay between a user’s action and a web application’s response to that action, also referred to as total round-trip time.
From the table above, we can see that tinyhttp is capable of making more transfers per second with lower latency than Express.js v4
Note: Benchmarks aren’t completely accurate and may be different on every run and on every machine. The key is to compare proportions instead of absolute values.
To conclude our performance benchmark, tinyhttp (without extra req
/res
extensions) is ~1.9 times faster than Express.js.
Now it’s time to build a simple example app so we can see tinyhttp and Express.js in action side by side.
You can use any package manager to install tinyhttp and Express. I will use npm for demonstration.
To install tinyhttp:
npm i @tinyhttp/app
To install Express.js:
npm install express
Express.js and tinyhttp app are structured quite similarly. If you know Express.js, then you also know tinyhttp.
tinyhttp:
import { App } from '@tinyhttp/app' const app = new App() const PORT = 3000 app .get('/', (_, res) => void res.send('<h1>Hello World</h1>')) .listen(PORT, () => console.log(`Started on http://localhost:${PORT}!`))
Express.js:
const express = require('express'); const app = express(); app.get('/', (req, res) => { res.send('Hello world'); }); app.listen(3000, () => console.log('listening on port 3000'));
You probably noticed that instead of require
, we used ESM imports. tinyhttp is designed to be used with Native ESM. Unlike Express, tinyhttp is compiled to both ESM and CommonJS module systems. Meanwhile, somehow, it’s still much smaller than Express.js.
You can use import
/export
syntax in Node.js with it. To set up a Node ESM package, put "type": "module"
in the package.json
file, like this:
{ "type": "module" }
Another option is to use an .mjs
extension. That way, you don’t need to put that "type"
field in package.json
. For more information, check out the ECMAScript Modules Node.js documentation.
Because the most popular Express.js middleware also uses outdated modules, tinyhttp provides a set of its rewrites/remakes of popular wares, such as logger
, session
, and so on.
Now let’s walk through how to handle some basic routing in both tinyhttp and Express.js. Express.js contains a lot of helper functions in their req
and res
objects. tinyhttp fully implements Express.js APIs using methods such as res.send
, res.download
, res.redirect
, and so on.
tinyhttp:
import { App } from '@tinyhttp/app' import { once } from 'events' const app = new App() const PORT = 3000 app.get('/', (req, res) => { res.send('Sent a GET!') }) app.post('/', async (req, res) => { // Nothing complex here, we just listen to 'data' event and return the data as a promise to a `data` variable const data = await once(req, 'data').then(d => d.toString()) // And then we send it res.end(`Sent some data: ${data}`) }) app.listen(PORT, () => console.log(`Started on http://localhost:${PORT}!`))
Express.js
var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send("Send a GET!"); }); app.post('/', function(req, res){ res.send("hello'!\n"); }); app.listen(3000);
tinyhttp is fast and light, and you can start using it today for backend applications. The tinyhttp repository contains a lot of examples, including MongoDB and GraphQL integrations. I would recommend using tinyhttp when you need to quickly get started with bare-minimum code.
That said, Express.js is still popular and will continue to be used in major projects and industries because of its wide open source community support and easy learning curve.
Deploying a Node-based web app or website is the easy part. Making sure your Node instance continues to serve resources to your app is where things get tougher. If you’re interested in ensuring requests to the backend or third-party services are successful, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording literally everything that happens while a user interacts with your app. Instead of guessing why problems happen, you can aggregate and report on problematic network requests to quickly understand the root cause.
LogRocket instruments your app to record baseline performance timings such as page load time, time to first byte, slow network requests, and also logs Redux, NgRx, and Vuex actions/state. Start monitoring for free.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowReact Native’s New Architecture offers significant performance advantages. In this article, you’ll explore synchronous and asynchronous rendering in React Native through practical use cases.
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
2 Replies to "tinyhttp vs. Express.js: Comparing Node.js frameworks"
Interesting article. But why are you doing different things or things differently, when you do side by side code comparisons. That’s very confusing.
The first code snippet for example is exactly the same (except for the import part) but you are defining variables on different places or use curly braces only in the express example (for no reason).
In the second comparison you do different things. Responding with the body on one example but not the other.
That’s makes it difficult to see the real differences between these two.
Async callback functions in routes work in Express.