Hono wants it all

Issue #265.February 22, 2024.2 Minute read.
Bytes

Today’s issue: The React gods at Meta make it rain, Node.js follows Steve Buscemi’s lead, and Jamstack tries to come back from the dead (again).

Welcome to #265.


Eyeballs logo

The Main Thing

Snoop Dogg dressed up as Buzz Lightyear

Hono getting ready to go to infinity and beyond

Hono wants it all

Almost exactly one year ago, we wrote about Hono — the edge-first framework created by Cloudflare engineer Yusuke Wada.

Hono means “flame” in Japanese, because it represents the flame of eternal hope that one day we won’t need Express.js anymore. Ok I made that up, but it does come with everything you’d want from a next-gen server framework:

  • It runs on any JavaScript runtime (including Bun and Deno), thanks to its use of Web Standard APIs and a Node.js adapter.

  • It’s really fast, thanks to its RegExpRouter, which it calls “the fastest router in the JS world.”

  • It comes with helpful DX features like first-class TypeScript support and a batteries-included approach to middleware and helpers.

But it turns out that Hono had even bigger dreams than we thought. Earlier this month, they launched v4 with the express goal (pun intended) of expanding to the client and becoming a full-stack framework.

It did that by introducing three major new features, which probably look familiar to you:

  • Static site generation — You can use Hono’s new SSG helper or its new Vite plugin to instantly generate static pages.

  • Client components — Hono has already been experimenting with server-side JSX, but v4 introduces client-side JSX for the first time, allowing you to use React-flavored hooks like useEffect and useContext to create client components.

  • File-based routing — They created a separate package (dare we say a meta-framework?) called HonoX that provides file-based routing, “ultra-fast” SSR, islands hydration, and middleware.

Bottom Line: Hono has already grown 6x since we last wrote about them 12 months ago. Will expanding from server to client (AKA reverse-speedrunning React’s evolution) help them unlock another stage of hypergrowth? Stay tuned.

        

Postman logo

Our Friends
(With Benefits)

DW from Arthur standing outside a fence looking sad

When that tech conference FOMO hits

The POST/CON speaker lineup is next-level 👀

We’ve talked a lot about how the biggest API conference of the year is happening in San Francisco on April 30 - May 1, 2024.

But why is POST/CON going to be such a big deal? Because it combines uniquely hands-on workshops with a phenomenal speaker lineup that includes:

  • Tech executives like Gail Frederick (CTO of Heroku), Ankit Sobti (Co-founder and CTO of Postman), and Lauren Long (Co-founder and CTO of Ampersand)

  • First-class educators like James Quick (200k+ YouTube subscribers) and Sid Maestre (VP of Developer Relations at APIMatic)

  • Engineering leaders like Ojus Save (Lead Developer Advocate at Zoom) and Suresh Muthu (Principal Engineer at Intuit)

Reserve your spot now to avoid FOMO later.


Spot the Bug logo

Spot the Bug

Sponsored by Clerk

Start for free today and see how effortlessly you can scale enterprise-ready authentication.

class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

function treeDepth(node) {
  let leftDepth = treeDepth(node.left);
  let rightDepth = treeDepth(node.right);
  return Math.max(leftDepth, rightDepth) + 1;
}

let root = new TreeNode(1);
root.left = new TreeNode(2);
root.right = new TreeNode(3);
root.left.left = new TreeNode(4);
root.left.right = new TreeNode(5);

console.log("Depth of the tree:", treeDepth(root));

Cool Bits logo

Cool Bits

  1. Meta just released React Strict DOM, an experimental integration of React DOM and StyleX that aims to “improve and standardize the development of styled React components.” Nothing like an upcoming conference deadline to really get things moving.

  2. Remix 2.7 just launched with stable support for Vite and a new SPA mode.

  3. Basedash uses AI to build you a full admin panel *for free*. Just connect your database, and it’ll instantly create a beautiful suite of customizable internal tools like dashboards, charts, and a multiplayer data editor. [sponsored]

  4. Hemanth wrote a quick post covering all the Updates from the 100th TC39 meeting. It’s hard to believe we’ve been building JavaScript apps for a whole century now, but if you do what you love you’ll never work a day in your life, amirite?

  5. RedwoodJS just launched v7.0 with a new observability tool called Redwood Studio, new router hooks, and a bunch of new GraphQL features.

  6. Sam Rose wrote an interactive post about Bloom filters, which (contrary to what you might think), is not the name of a potent strain of cannabis, but is a niche data structure concept that can help you solve some interesting JavaScript problems.

  7. Sébastien Noël wrote this Interactive guide to making SVG loading spinners.

  8. Sentry Launch Week is happening from March 18-22, and they’re announcing new products, new features, and a bunch of other cool stuff. You can get a sneak peek (and win free swag) if you sign up for their launch week email list today. It’s a win-win. [sponsored]

  9. Node.js just announced a new mascot named Rocket Turtle. Its cousin, Rocket Mortgage, will help you save thousands when you buy or sell a home!*.

  10. Another company is trying to make Jamstack a thing again, proving that it really is the Michael Myers of the JavaScript ecosystem — just when you think it’s finally dead, it comes back to torment you one more time.


Spot the Bug logo

Spot the Bug: Solution

Sponsored by Clerk

The code will throw a TypeError because the treeDepth function is not handling the base case. The base case should be when the node is null, in which case the function should return 0.

class TreeNode {
  constructor(value) {
    this.value = value;
    this.left = null;
    this.right = null;
  }
}

function treeDepth(node) {
  if (node === null) return 0;
  let leftDepth = treeDepth(node.left);
  let rightDepth = treeDepth(node.right);
  return Math.max(leftDepth, rightDepth) + 1;
}

let root = new TreeNode(1);
root.left = new TreeNode(2);
root.right = new TreeNode(3);
root.left.left = new TreeNode(4);
root.left.right = new TreeNode(5);

console.log("Depth of the tree:", treeDepth(root));