is Hono a good alternative to itty-

is Hono a good alternative to itty-router for a small API endpoint? i won't use the JSX rendering engine.
11 Replies
Avi
Avi•10mo ago
any reason you're looking to migrate from itty-router? we use it ourselves so just curious if there's something cool we're missing out on :)
Firu
FiruOP•10mo ago
they claim better benchmarks and also the option to render JSX templates would be pretty handy for frameworks like HTMX also the syntax feels like a drop-in replacement of ExpressJS which feels pretty comfy to me i haven't gone in-depth with itty yet tho, so take me opinions with a grain of salt
Vero
Vero•10mo ago
^ @yusukebe
yusukebe
yusukebe•10mo ago
Hi. Can I see the benchmark results? Thanks. Once loaded into memory, the Hono router is the fastest of all JavaScript routers, including the itty router. But, on Cloudflare Workers, memory is cleared after a time. Bootups are better if the file size is small, so it may be better to use simple apps with less access
Firu
FiruOP•10mo ago
thanks for creating Hono @yusukebe! i just began creating a CF Pages app with it using the premade template and i'm loving the DX so far 🔥 One questio - do you have any examples of TailwindCSS integration with it? My current setup is to run npm run dev in parallel with tailwindcss -i ./public/static/index.css -o ./public/static/_tailwind.css --watch to build a new CSS file to link to my renderer.tsx layout:
import { jsxRenderer } from 'hono/jsx-renderer';
import Header from './components/Header';
import Footer from './components/Footer';

export const renderer = jsxRenderer(
({ children, title }) => {
return (
<html lang="en">
<head>
{/* this is where it imports the built tailwind css file */}
<link href="/static/_tailwind.css" rel="stylesheet" />
<title>{title || 'Hyper Task'}</title>
</head>
<body class="flex flex-col h-screen">
<Header />
<main class="py-8 sm:py-12">{children}</main>
<Footer />
</body>
</html>
);
},
{
docType: true,
}
);
import { jsxRenderer } from 'hono/jsx-renderer';
import Header from './components/Header';
import Footer from './components/Footer';

export const renderer = jsxRenderer(
({ children, title }) => {
return (
<html lang="en">
<head>
{/* this is where it imports the built tailwind css file */}
<link href="/static/_tailwind.css" rel="stylesheet" />
<title>{title || 'Hyper Task'}</title>
</head>
<body class="flex flex-col h-screen">
<Header />
<main class="py-8 sm:py-12">{children}</main>
<Footer />
</body>
</html>
);
},
{
docType: true,
}
);
Then, I have an npm-run-all script to watch for any new TailwindCSS classes to bundle & new changes for vite to rebuild the components.
"scripts": {
"dev:server": "vite",
"dev:css": "tailwindcss -i ./public/static/index.css -o ./public/static/_tailwind.css --watch",
"dev": "npm-run-all --parallel dev:server dev:css",
"build": "vite build",
"preview": "wrangler pages dev dist",
"deploy": "$npm_execpath run build && wrangler pages deploy dist"
},
"scripts": {
"dev:server": "vite",
"dev:css": "tailwindcss -i ./public/static/index.css -o ./public/static/_tailwind.css --watch",
"dev": "npm-run-all --parallel dev:server dev:css",
"build": "vite build",
"preview": "wrangler pages dev dist",
"deploy": "$npm_execpath run build && wrangler pages deploy dist"
},
At the end, I'm able to achieve hot reload with components & TailwindCSS classes. However, I was wondering if there are any other alternatives that are considered "best practices" with Hono. this is the GitHub repo so far
yusukebe
yusukebe•10mo ago
Hi. Tomorrow v4 will be released and new examples will be available, so you'll see how to use Tailwind CSS there.
Firu
FiruOP•10mo ago
great news! looking forward to it 💪 @yusukebe I tried out Hono 4.0 and couldn't get it to work on my windows & Ubuntu WSL environment using the new HonoX template. - notably, the components render, but the event handlers don't work (for the counter button). However, I'm quite excited for future developments and I'd be happy to contribute in the future when I get the chance. Is it possible that the React Hooks will come to previous versions JSX rendering? Or will it only work with HonoX and the Island Architecture? Cheers.
Kevin
Kevin•9mo ago
Those are synthetic single-thread benchmarks, which: - are pretty relevant if in a standalone service (e.g. Node/Bun), less so for serverless - More importantly, show that all of the routers in question add appx ~0ms to the response latency (100,000ops/sec ~= 0.1ms). Your other code and network latency will be the bottleneck, effectively neutralizing any advantage one router has over another. So it's def a cool bragging right for Hono, but not something that really matters aside from marketing.
yusukebe
yusukebe•9mo ago
Hi Kevin. You are right. It may only be for marketing purposes. The time for non-router matters is a big factor. And most simple apps are usually faster enough on the edge.
yusukebe
yusukebe•9mo ago
Sorry, missed your message, I think the Windows issue has been fixed with this PR. https://github.com/honojs/honox/pull/116
GitHub
fix: transform island components on Windows by mrtska · Pull Reques...
This PR resolves island components doesn't transform on Windows. On Windows, island components doesn't transform html correctly. Input: import { createRoute } from 'honox/factory' i...
Kevin
Kevin•9mo ago
That said, I love the work you’ve done and I’m glad you took things past where I kept them w itty. We’ll continue to target the low byte size, meaning we’ll naturally be less feature rich than you guys 🙂
Want results from more Discord servers?
Add your server