Exploring the basics of Hono, a fast and lightweight alternative to Express.
NT-starling
Posted on September 10, 2023
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
`
Posted on September 10, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
September 10, 2023