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

aroman•8mo 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•8mo 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•8mo ago

^ @yusukebe

yusukebe•8mo 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•8mo 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•8mo ago

Hi. Tomorrow v4 will be released and new examples will be available, so you'll see how to use Tailwind CSS there.

Firu•8mo 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•6mo 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•6mo 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•6mo 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•6mo 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 🙂

Gaming

Programming

is Hono a good alternative to itty-