Exploring the basics of Hono, a fast and lightweight alternative to Express.

NT-starling — Sun, 10 Sep 2023 12:59:06 +0000

Express

Express has historically been a popular choice for constructing RESTful APIs and application backends. However, with the emergence of newer tools and technologies, Express's dominant position in these areas is facing competition.

Hono

Hono is such an alternative to express which is an ultrafast web framework which is capable of creating RESTful APIs and backends for your applications. According to a benchmark, It is about 12 times faster than express.

What is Hono?

According to the developers,

Hono - [炎] means flame🔥 in Japanese - is a small, simple, and ultrafast web framework for the Edges. It works on any JavaScript runtime: Cloudflare Workers, Fastly Compute@Edge, Deno, Bun, Vercel, Netlify, Lagon, AWS Lambda, Lambda@Edge, and Node.js.

How to install Hono

To create a new Hono project you can use the following command in the terminal

npm create hono@latest <project-name>

A new folder will be created based on the name you provided.

Install dependencies

Now to install the dependencies, navigate to the folder of your project and run npm i in the terminal.

Congratulations, now you have setup a Hono project that could be used as a backend for your frontend frameworks such as React,Solid,Svelte or Vue.

Understanding the project structure

The Hono project structure is simple and easy to understand. Most of the time, we will be working with the Src folder most of the time as it contains our code. We can also configure our typescript optionns in the tsconfig.json file.

Basic Hello world application using Hono

In the index.ts file, we will delete all of the code and start from scratch.

At first, we import the Hono package which we have installed.

import { Hono } from 'hono'

Initialize the library
const app = new Hono()

Now with using this 'app' variable, we can create various routes for our application.

We will now create our index route '/' using Hono

app.get('/', (c) => c.text('Congrats!'))

We can also send data back in JSON format like a traditional api.

app.get('/users', (c) => c.json({user_1:"Bob",user_2:"Mary"}))

Now we will export the app so that Hono can run it

export default app

The final code should look something like this


import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Congrats!'))

app.get('/users', (c) => c.json({user_1:"Bob",user_2:"Mary"}))

export default app

Creating dynamic routes using Hono

We might need dynamic routes for our app. Dynamic routes allow us to build routes that take a dynamic value. For example when you see a video of youtube, instead of creating a new route for every video, they use a dynamic route. To create a dynamic route in Hono, we can just add a slug like
/user/:id

Here we can use this example

app.get('/user/:id',(c) => c.text("user id is " + c.req.param('id')))

The final code should look like this

import { Hono } from 'hono'

const app = new Hono()

app.get('/', (c) => c.text('Congrats!'))

app.get('/users', (c) => c.json({user_1:"Bob",user_2:"Mary"}))



app.get('/user/:id',(c) => c.text(`user id is ${c.req.param('id')}`))







export default app


### Conclusion

Hono makes it easy and simple to build RESTful APIis for our frontend frameworks such as solid,svelte,vue and react. The performance is also great. Overall it is giving tough competition to Express

DEV Community: NT-starling