Written by Shubham Kumar ✏️

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:

• What is tinyhttp?
• What is Express.js?
• tinyhttp vs. Express.js: A basic comparison
• Performance benchmark
• tinyhttp and Express.js in action: A simple example

What is tinyhttp?

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:

• 2.5x faster than Express
• Full Express middleware support
• Async middleware support
• Native ESM and CommonJS support
• No legacy dependencies, just the JavaScript itself
• Types out of the box
• No built-in middleware support

What is Express.js?

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:

• Open source community support
• Fast app development
• Easy to learn
• Template engine support
• I/O handling
• Built-in middleware support

tinyhttp vs. Express.js: A basic comparison

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.:

Some notes on the table above:

• The minimum Node.js version that is required for tinyhttp to work is 12.4.0, whereas with Express v4, we can start working with even Node.js 0.10.0
• The minimum supported version for tinyhttp is ES2019 (ES10), whereas in Express v4, we need ES5
• 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 extensions
• Test coverage for the codebase is 92 percent for tinyhttp and 100 percent for Express.js v4
• The ESM (EcmaScript Modules) specification introduced with the ES6 (or ES2015) norm describes how to import and export modules in JavaScript. We can natively use ESM with tinyhttp ,but we need external support, such as Babel, for Express.js
• Unlike Express.js, tinyhttp comes with TypeScript support
• The core package size of tinyhttp is 35.2kB, compared to 208kB for Express.js
• tinyhttp doesn’t come with built-in middleware. Express.js does have built-in middleware

Performance benchmark

With 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.

• Hardware:
  • Xiaomi Pro 2019 Edition (Laptop)
  • CPU: Intel Core i7-8550U
  • RAM: 16GB
• System:
  • kernel: 5.7.19-2
  • node: 15.5
• Conditions:
  • 100 connections
  • 10 pipelines
  • 40s duration

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.

tinyhttp and Express.js in action: A simple example

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

‘Hello World’

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.

Routing

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);

Conclusion

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.

200’s only ✔️ Monitor failed and slow network requests in production

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 apps, recording literally everything that happens on your site. 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.