Why Learn Hono
There are already many backend libraries and frameworks for Node.js on the market. I've used Nest.js for some small projects before. It has comprehensive functions and enables rapid project implementation. However, for my small projects, many of its features are really overkill, and it has a high level of encapsulation, leaving little freedom when writing code.
By chance, I came across Hono online. After reading its documentation:
- Ultra-fast ð - The router RegExpRouter is truly fast. It doesn't use linear loops. It's just quick.
-
Lightweight ðŠķ - The
hono/tinypreset is less than 12 kB. Hono has zero dependencies and only uses Web standard APIs. - Multi-runtime ð - It works for Cloudflare Workers, Fastly Compute@Edge, Deno, Bun, Lagon, AWS Lambda, or Node.js. The same code runs on all platforms.
- Capable ð - Hono comes with built-in middleware, custom middleware, third-party middleware, and helpers. It's all-inclusive.
- Pleasant DX ð ïļ - It has a super clean API and excellent TypeScript support. Now, we have "types".
Use Cases
Hono is a simple web application framework, similar to Express, but without a frontend. It allows you to build larger applications when combined with middleware. Here are some use case examples:
- Building web interfaces
- Backend server proxy
- CDN frontends
- Edge applications
- Basic servers for libraries
- Full-stack applications
Great, let's start learning it.
Hello World
https://hono.dev/docs/getting-started/basic
You can modify the port by setting the port.
import { Hono } from 'hono';
const app = new Hono();
app.get('/', (c) => {
return c.text('Hello Hono!');
});
export default app;
To execute:
npm run dev
To access: http://localhost:8787
Routes
HTTP Methods
app.get('/', (c) => c.text('GET /'));
app.post('/', (c) => c.text('POST /'));
app.put('/', (c) => c.text('PUT /'));
app.delete('/', (c) => c.text('DELETE /'));
Hierarchical Routes
const apiRoutes = app
.basePath("/api")
.route("/expenses", route1)
.route("/", route2);
The previous basePath("/api") adds the /api prefix to all routes.
export const route1 = new Hono()
.post("/", async (c) => {
return c.json({ });
});
You can access the above route via http://localhost:8787/api/expenses.
Requests
Get Request Params and Query
app.get('/posts/:id', (c) => {
const page = c.req.query('page');
const id = c.req.param('id');
return c.text(`You want see ${page} of ${id}`);
});
View the result: http://localhost:8787/posts/1?page=12
Get the Content of the Request Body
app.put("/posts/:id{[0-9]+}", async (c) => {
const data = await c.req.json();
return c.json(data);
});
Responses
Besides text(), there are many methods like json(), html(), notFound(), redirect(), etc., to make the request return different types of data. html() can directly return JSX.
JSX
import type { FC } from 'hono/jsx';
const app = new Hono();
const Layout: FC = (props) => {
return (
<html>
<body>{props.children}</body>
</html>
);
};
const Top: FC<{ messages: string[] }> = (props: {
messages: string[]
}) => {
return (HTTP Methods
<Layout>
<h1>Hello Hono!</h1>
<ul>
{props.messages.map((message) => {
return <li>{message}!!</li>;
})}
</ul>
</Layout>
);
};
app.get('/', (c) => {
const messages = ['Good Morning', 'Good Evening', 'Good Night'];
return c.html(<Top messages={messages} />);
});
export default app;
Just change the file extension to .tsx and you can directly write JSX, very React-like.
Validators
Validators are implemented through zod and @hono/zod-validator to check if the requests sent from the client conform to the specified data format.
Installation: yarn add zod @hono/zod-validator
For example, if we need to verify that in a request, the data format sent by the client must be:
account: string; password: string
import { z } from "zod";
import { zValidator } from "@hono/zod-validator";
const loginSchema = z.object({
account: z.string(),
password: z.string(),
});
app.post("/login", zValidator("json", loginSchema), async (c) => {
// do something
const user = c.req.valid("json");
return c.json({ });
});
Learn more from the zod documentation. And the IDE can directly show type hints for user.
Leapcell: The Advanced Serverless Platform for Nodejs Hosting
Finally, let me introduce a platform that is very suitable for deploying Hono apps: Leapcell.
Leapcell is a serverless platform with the following characteristics:
-
Multi-Language Support
- Develop with JavaScript, Python, Go, or Rust.
-
Deploy unlimited projects for free
- Pay only for usage â no requests, no charges.
-
Unbeatable Cost Efficiency
- Pay-as-you-go with no idle charges.
- Example: $25 supports 6.94M requests at a 60ms average response time.
-
Streamlined Developer Experience
- Intuitive UI for effortless setup.
- Fully automated CI/CD pipelines and GitOps integration.
- Real-time metrics and logging for actionable insights.
-
Effortless Scalability and High Performance
- Auto-scaling to handle high concurrency with ease.
- Zero operational overhead â just focus on building.
Explore more in the documentation!
Leapcell Twitter: https://x.com/LeapcellHQ
Top comments (0)