DEV Community

Cover image for Exploring the basics of Hono, a fast and lightweight alternative to Express.
NT-starling
NT-starling

Posted on

6

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

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

Enter fullscreen mode Exit fullscreen mode


`

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

Enter fullscreen mode Exit fullscreen mode


`

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



Enter fullscreen mode Exit fullscreen mode


`

Billboard image

Imagine monitoring that's actually built for developers

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (1)

Collapse
 
mcbbugu profile image
bugu β€’ β€’ Edited

Thank your share. I have a question. I am a new programmer, can I use Hono for my Mac app project. I use Electron and React.

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

πŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay