You Should Drop Express and Try Hono

familiar way of defining back end endpoints. You have your app. You say, what is the method? The path? And then how is it going to respond? And Node works in that exact same way.

and

Lambda, Azure.

Now web standards is that, in my opinion. Right? So it's really nice because you can pull in a different plugins or whatever that just use request and response web request, web response, and that's what Node is built on. Absolutely. And I think that's one of the great things about, like, learning web standards as well is because once you know how request and response work, you can be very effective inside of Hono. And that's like, the second major reason I'm I I, suggest Hono JS something you should try is because of all the supported platforms. So if you look in their docs, they support Cloudflare, Deno, BUN, Fastly, Vercel, Netlify, AWS

way to

I've I wanna, like, move off of Express. And I was like, like, what should I what should I move to? And I think this is the the very clear

And so, I Wes, yeah, I just wanna talk about why I like Hono and why I think you should try it. And so one of the first things I really like about Hono is how familiar it is. So if you've ever built an Express app, which most JavaScript developers have, it looks exactly like that. So you can see even on their Node page, you create an instance, and then you do app dot git route. Right? So this is, like, these days, a very

like, Express is obviously the big one out there. It's Express is absolutely massive still, with HONOS, but I guess you use HONO client. Right?

decision for this type of thing because it's it's it's very express feely, and then access those things in a type safe way, inside of your handler. That's nice. I I love that. You you take all the, like, fussing around, like, is it there? Is it the correct type? You know? Like, having to put that in every single route handler is is really annoying. It's nice that Wes you can write your handler,

So, yeah, this request method that's exposes is pretty nice. That's weird. That's nice. Wow.

all all of your Next. Js pages and components can now just use that same type tonal client, but it's living inside of your Next. Js application.

I want, like, the Wes. Js experience. I want the app router,

You could just import the Node app, app dot request, pass in the URL in your data, param, this is getting the ID from the URL, but as a validated number. So it used a Node validator to get there, and, you get that type inside of this code here, and this code will will never make it here unless that validator,

and then it would, like, be able to send requests to it. We don't even have to talk about Wes right now. I'm only showing this file because the Node app exposes a request method

that just behaves

That's cool. I don't know how you could do that. I haven't played around with this yet, but, I could imagine it's really nice to work with. Because, like, any client component, you pull in the hono client, maybe you combine it with something like a 10stack query or something like that. Yeah. But then

Oh, Yeah. If you are it has, like, almost all the React APIs. It's really cool, tight integration with the back end. I think that Kleifer JS putting this out as their, like, their Next. Js. You know? Because the reason so many people use Vercel is because Next. Js is awesome.

maybe this is what I want. Because, like, I want pay him to to work on HONO full time, I'm assuming.

But I also don't wanna run, And if that's the case, I could locally. You know? You you can go offline with it. There's all kinds of really nice features for it. That's neat.

URL, you pass in params or whatever else. So I could imagine that you combine this with the Node client. So inside of route bracket bracket. So that means any Wes coming into API is gonna hit this handler,

And so from there, Hono routers inside of an array and then just create a type that's a type of everything in that array. And this essentially

you could actually make requests directly to the Hono app. Now let's just look at the guide on testing. So testing is something that you should do. One of the things about, like, testing express APIs is you had to pull in, like, a separate library, like Supertest, you'll see them probably pushing it more for for people to build apps with it.

your Next. Js app, maybe it's a a server component. Maybe you don't wanna make an API call there. Maybe you wanna call that endpoint directly.

inside of server components,

dev experience of.

like a requester. So, basically, when you say app Scott request, that's not making a network request. That's just basically invoking that function directly. So you pass in

and then there's no hop. Right? It's not calling the network and then putting it into the server component. It's calling that that JS code directly.

but I I want the, like, middleware like, I'm a big fan of hono, but I learned quite a bit there. I'm I'm really excited about it. I think if you haven't yet try tried it, certainly watch CJ's video and give it a shot yourself.

to simply just use JSX as JSX is a very good templating framework, and it's not the greatest. Like, there's import your handler,

functions that return strings, like templates. Right? Yeah. Yeah. But the the downside to that is you have to worry about XSS. Right? And then also,

and just have a list of all of my routes in 1 file and then link off to it. And then I find that's really hard.

the route handler because you have attached it to the route definition.

I was working on a little HTML meta framework I was calling Hype, which I I'd stopped working on, but I used gratuitously you're you're getting some type errors. If you've created the older ones. Or something. It hasn't so you Scott and start the process or whatever.

Is there anything for that?

Yeah.

you're essentially just creating a an entire and

the shell. And then Mhmm. It can have other routes that will get rendered into that shell, so you can set it up that way too. And then if you ever need,

if you type it as, like, app Scott get forward slash cards forward slash,

well, HTMLX or yeah. In general.

like, raw HTML or you need to insert, like, a script, they have, like, little helpers. Oh, yeah. Can insert that stuff into your JSX.

But, I think, like, this is one of the, the things that a lot of people really appreciated about the video that I made is I showed how you can do this and keep type safety. So if we look in the so for the recent video I made on syntax, I created a starter template. It's called the Deno OpenAPI starter. And if you look in source,

This

that HTML. It was super nice to use in addition with things like,

I I have a question that maybe you can answer. This is something I always hit whenever I spin up a Node app is I your route handlers,

I find, like, you miss a lot of the

and and that's like a param, you know, in there. And all of that stuff is all nicely typed as soon as you get into So they're trying to make a full stack framework,

I I still am waiting. We've been talking about JSX 2 point o for many, many years, you know, the ability to type specific children and things like that. But it's kinda what we standardize on in most cases. Yeah. It's funny, Wes. I've I've written so many, plug ins for Remark and whatever. I've basically written my own markdown based templating language down. I I often think, like, that was a bad idea to do that. Yeah. Yeah.

go into routes, and then I have a tasks folder. I've shown how we can kind of, like, break it out. I just have this custom type here called app route handler, and then I pass in the type of the route.

JSX allows you to define components, and that's typically what we're trying to do. So, like, you could even see this composition example here. Right? They have basically the body that just passes in a child, and then they have some other component that can render inside of it. And so, like, if you wanted to build this out with your own functions and, like, template strings, it it'd be some work. I will mention, like, if you look into their docs, they have a an even better way of doing this because you can basically define your renderer that kind of, like, renders

Yeah. And as far as I know, I think, like, right now, it kind of has the idea of, But, yeah, the XOD validator makes it a whole lot easier. Right? Form, this is my stuff, done.

being So CloudFlare

the the guy who builds Node. Cloudflare hired him. So they now

on October 20 8th, and we're doing a syntax meetup. You don't have to be going to the GitHub Universe conference to meet up with us. But if you are in San Francisco, come hang out from 5 to 7 PM, October 28th. We're gonna be at the Bare Bottle Beer Garden in Salesforce Park. Admission is free. We're not gonna charge you, but come hang out, and you need but it's all built on web standards.

And so it's But the issue with that is if you wanted to call it from a a client side front end or something like that, then

Hey, San Francisco. We're gonna be in town for GitHub Universe

And they also released, like, HONO x, yeah, which is their I think to create, read, update, delete every single piece of data

that they did this because it's their

not just back end, which is what I typically thought of Node as.

I mean, this is a weird reference, but it's in from what I've seen, it's similar to Deno Fresh, which I I had some experience with, in that, like, everything's server rendered, but then some things can be islands. So they kind of take that approach for it. But, but like Wes said, it's kind of like their entry point into the meta framework sphere. And probably, eventually, once it once it gets out of experimental, There is. So first, I'll start with, if you look in their docs and you look under best practices, they say, let me do this. Yeah. That's what I thought. I was like, can I just put it in the thing?

episodes dot find. And if you have a endpoint hooked up for that, you you could do it. Or if you wanna be able to, like, delete a specific item,

And I think one of the beautiful things is the types just flow through. Like, there's no code generation here. That's another aspect of, like, working with back end APIs and front end. Like, a lot of times, you might have to run a build step that, like, generates the types or generates the client. This, you don't have to do that. If you're in a monorepo, you can literally just import that type. Yeah. Type inference in that way is so nice when it isn't generated.

what what's what is it called? It I was gonna say loader. It's not a loader in SvelteKit. What JS it? It's a loader in Remix.

And this is, something a lot of times, you'll see people combine this inside of a Next. Js app. So they talk about adding Node inside of a Next. Js application. And, essentially, you add a catch all route handler. So, like, inside of your next Next. Js app / API slash

and then you just export a Node app from that handler.

Autocomplete gober.

Yes. Exactly.

Restart your TypeScript server, and it's like, I just don't wanna do any of that. You know?

There's no need to create

it's fully typed. It had it knows what arguments you need to pass it.

essentially is a JavaScript like, client Node JavaScript library it's it's very, very smooth. Like, if you buy in on all of this, it's it's not even buying in because it it works anywhere. But Yeah.

Yeah. I do think yeah. Generated works, but it's always kind of a pain in the ass sometimes. Even with SvelteKit, they generate some some types when you run Svelte Scott dev. And, like, if you haven't ran Svelte dot dev in a second,

I was just gonna say, I SvelteKit probably does one of the best,

or an action. Function. Yeah. It is a loader. Okay. We'll call it that. But then it just immediately, the types go right from your back end to your front end, and you get the autocomplete go BRRR.

It's a load function

this thing where you can say, like, like it's almost it's not an ORM, but it kinda feels like that. Right? You could say, like,

for this type of stuff. It's very because you simply just if you return data from a

done. It's tracking all your Sentry errors. And then one more thing is, JSX support. So I mentioned earlier that you can use JSX, but, like, if you think of, like, the days of building something with Express, typically, you'd have to set up, like, a a view engine

time window and, like, your key generator. Good to go. While we're here, it's also important to mention that they have a Sanity middleware. So Hey. If you wanna add Sentry to your Ono app, literally just yeah, I I'm definitely betting on Hono. I think it's here to stay, and, I'm gonna be using it for a lot of my stuff.

What is it called? Docs, middleware, scroll all the way down, 3rd party middleware.

and then pass in some JSX.

Node supports JSX out of the box. So whenever you generate an app, it already has all the compiler options and everything that you need. And so you can just do c.html

set up your I, like, I guess they hide it all from you because I didn't even see anything, like, service worker related. It's like you literally just run your mobile app and and but, yeah, I I could see I could see that. If you're not using, like, a Node on Cloudflare,

They also have a built in helper for, like, setting up a WebSocket endpoint Yeah. I guess one last thing I'll mention because I think this JS, like the the hardest part is if you in a bigger hono application of getting good type support

pass in your d s n, app Scott use,

install that middleware, And so, basically, what you do is you create this type here that says, this is what you're gonna have access to. These are your variables. And then every other handler and middleware can do c Scott get user and get access to it. So, yeah, in this case, the only variable that I have is my logger endpoints or all of the available URLs and methods. Yeah. And then I can, get access to all of those, and all of the data you pass in is type checked as well. That's that's amazing. So, like, Hono ESLint they don't I don't think they support React Vercel components just yet.

Yeah. Hold on. Reloader. Nice. I will say that's because there's so much.

If you need to add some caching headers, helpers,

and then choose your view engine. Like, do you want handlebars? Do you want EJS? Do you want whatever else? And, yeah, we're we're running lower on time, so I, so after this, I guess I'll show you, RPC. So this is one of the other super cool things is, That's probably one of the, issue like, the the biggest issues I've had is just just trying to, like, find it in the docs because there's so many things available. Yeah. There it is. If you need rate limiting in your app,

they respond to them very quickly. So I think one of the caveats of having to support all of this stuff internally is the fact that, you know, you have to respond to, like, help Wes, and it's like a bigger API surface layer. But Yeah. That's one of the things that was trickier about Express is, like, going and finding all these middlewares to do the things that you wanted because it wasn't built in. All this stuff is is built into Dehono. Man, deny ESLint. I don't see a rate limiter just yet. That's something that I have to often throw in. They have Node.

and then all kinds of, like, built in middlewares as well. So, like, if you need basic auth, there's a middleware for that.

there's a middleware for that. If you need cores, there's a middleware for that. So all of this stuff is kind of just built in and very well supported by the library itself. So, like, in my ESLint of Hono, every single one of these that I came across haven't had any issues with. And even just, like, looking at the GitHub issues and discussions,

I I love that. Yeah. I love that too. When I was working on a,

the only reason I don't use hono or the only reason I would move off of it is because, you know what?

Hono also has their own, in my client side code, I say client Scott. It'll show me all of the available npmi@hono/century,

the open API stuff I almost said open AI. Open API stuff, Swagger doc stuff JS a complete mystery as to what the heck that even is. I've never even I've heard of it. I'd never used it. Don't know much about it. So I'm gonna have to check out that stuff in 2. Yeah. Awesome. Sec. Cool. Well, thanks so much for coming on and sharing your knowledge with us today, CJ, and, we will catch you on the next one.

React. I think you can still use React with it. But if you're using Hone Node x, then, technically, you're using, like, their their version of it.

Sec. And we'll link to that in the, show notes because, again, it is like, Wes said, it's deep. Because I I watched about half of it yesterday, CJ. I'm gonna finish it just because

I believe so.

you put all of your because it's just a request object. But if you look at their test helper, Exactly. Yeah. Cool.

JS, like basically, it was covered in the best practices section of their docs where, like, if you define these things separately, then, like, your types aren't flowing through. But you have to also have to imagine, what if I have, like, 20 routes? How am I gonna get a hono client that has all of those types integrated? But here for you. Yeah. Yeah. So I I set this up here. So I have basically, every single one of my routers, I just reuse this function, and it passes in those types. So, we can look directly in the Node docs. If you look for the app and then look under generics,

like, client side React library. Like, it's technically Hono JSX instead of,

I really do want, like, a full stack framework. You know? I want the whole back end thing, but I also want to be able to pull Svelte or React or whatever in on the front end as well.

product offering, you know, it's just

Yeah. And I'm sure the Cloudflare backing doesn't hurt there either. That's a

Definitely. Yeah. No kidding. The the integration templating framework. Right. And it's much easier

I'm excited to see the the Node x stuff, see how that sort of shakes out because API endpoints for all of these things that you want to do, which I I find exhausting. Like, oh, I have to make an pnpm API endpoint

useEffect, useState, things like that will will transition over 1 to 1.

And, you immediately have

oh, maybe they do.

most of the the React API. So most of your

is awesome. The community is awesome too. Like, if just looking at their their GitHub repo, you have to, I don't know, copy paste the types in

But, of course, that's not typed,

anyone anyone who hasn't checked out CJ's YouTube videos, hired the

big benefactor.

also, the HONO X doesn't have a, like, card number,

And then now that's just requesting it directly. Right? It's not heading over the over the network.

Beautiful. Yeah. So that's pretty much all I had. I I like it. I've been spending a lot of time with it. I've built, like, several apps with it. It's great. I think the it's also like, it's a little bit newer, but the ecosystem literally just it this takes a web standard request. Like, you can literally pass in a capital r request object right there.

the discussions are fairly active. And also looking at, like, a number of open issues, those are pretty active as well in terms of, like, people responding to them. So,

Cloud I love Cloudflare so much, but sometimes it's really hard to get up and running. And this takes that barrier away and makes it so so simple.

I didn't even know that that you went deep on this. Like, that's integrate plug ins and and middlewares and whatnot The, yeah, the RPC. For some reason, I thought there was no RPC like, a I have a big enough monorepo right now. You know? Wouldn't it be nice to just stick it in there? that's just

On HONOS.

you pass your app into it, and then it behaves just like the HONO client that I showed earlier. It has all the endpoints. It has all the methods.

And that's one more thing I didn't even mention is, like, technically, bracket bracket

he goes deep, man. It's not just a, like, a hello world, and and don't talk about any of the problems that you're gonna hit. You know? Like, we should be thinking about this. What does the testing situation look like? Yeah. Yeah. Even beyond that, they have a testing helper too. So, like, this requester

Awesome. Well, that was, So you don't have to do it just goes, and you have full access to it. Exactly.

with Cloudflare, if you are using it and you wanna be able to use, like, their database

gives you that fully typed client that you can pass to Hono client, and it has everything. It's every single route that you registered everywhere else, but you can do it in a more scalable way. Right? They all live in their own folder. They all have their own files and handlers, but this one type right here is kind of how they're all, like, brought back together. Oh, I like that. And then you can just you can use, like, dot notation to access the types instead of having to import every single one.

And I show how to do that in the the hono starter that I created, Wes, essentially,

But then from there, all of this is fully validated. So, like, this line right here where I say c.req.valid

it's pretty simple because then your routes, you just say, what's the type of the route? Use this. This also passes in your bindings and anything you would need for, like, every single request.

middleware. I like that. Yeah. I've always liked Pinot. I I I believe that's from the Fastify folks, if I'm not mistaken. Yeah. It is.

was was valid. And so it's kinda circular where your your route definitions cache it. Wow. I didn't I didn't even think of that because that that's a kind of a pain with service workers is that we should explain. The way a service worker works is that you have, like, an HTML file, and that HTML file routing and and all of that stuff, which is it's kinda bumbly. This is why you should use Node if you're using Cloudflare.

the ability to pass in a validator as a middleware. And so you can define your route, pass in your validators,

I've always used it for logging. It's basically structured logging. So Yeah. In your your logs always show up as, like, JSON, and then you can actually have some sort of, like, log aggregator that pulls these in and, like, does, like, visualizations and reporting. Oh, yeah. I've used it with Express before, and there's a a middleware for Deno lets you pull this in, and now you can have logging for all of your all of your requests. Sick. I love that. One thing I'll show you is validation. So I Wes we got into the weeds. We're showing some of that open API code. But if you just want some basic validation for the params in your URL or the body, they have

you can pass in a type that defines

Well, it's, yeah, it's purely types. It's just pulling in those, like, the create type, the get one, the list type, but it's just the type. Because otherwise, yeah, it would be like a circular dependency.

but that makes it accessible and all so and then my handlers. So literally any one of my handlers, I can do c.var.logger

like, your environment variables that you would use in Cloudflare Workers. But this is synonymous with if you remember in Express, it was like app Scott get and app dot set, I think. Yeah. Like, you could set the user in a middleware and then access that user in some other middleware.

and then get access to debug info, inspect, that kind of thing. Oh, nice little utility Let's kick it off. Let's let's what is Hono? Why should we care? What do you love about it? Let's hear it. So, yeah, Hono is a web application framework. They call themselves fast, lightweight, built on web standards, and supports any JavaScript runtime. Wes, essentially, if you're in the JavaScript ecosystem

essentially just wraps the route handler type. I show how to do it in the video, but once you got it going, That all comes down to defining your base type. So I feel like we're getting in the weeds now, but go go watch the video because it'll it'll teach you about that stuff.

Yeah. It's basically, like, define your validators in a in a similar way if you wanted to, like, export the type. And if if you have middleware that monkeys with the types, does that still flow through to the final handler? to grab a ticket via Eventbrite. So we put the link in our socials, in the newsletter. We'll put it in the show notes as well. Come check it out. Come hang out. Scott's gonna be there. I'm gonna be there. The whole team's gonna be there. It's gonna be exciting. See you then.

and your handler imports your route definition type. Is that true?

variables Oh, well. We'll never learn. Yep. And I think that's one of the beautiful things, though, because it's like, Wes, like,

and then also,

I don't know, JS that back end framework or is it a server? I don't know. We're gonna learn from CJ what the heck this thing is and why you should use it. My name is Scott Tolinski. I'm a developer from Denver. And with me JS always is Wes, but also CJ. What's up, CJ?

Hono being the modern new JavaScript,

they have helpers for all the stuffs you would wanna do inside of an API. So they have, like one of them is, like, just JWT helpers. So if you're rolling some off and you need to encode JSON Wes Tokens, you don't need to install a separate library. You can just use HONO Node JWT.

I could do something with that. You Node? Throw a a new version of it or,

modify that in somehow

almost the same as service worker. Right? So that's probably it wasn't much of a a stretch to go from their Cloudflare Worker implementation Exactly. Yeah. I used to use just, like, straight up any any, like, weird express specific stuff or, like what was the the express is built on a, like, a common middleware called what's the name of that? Connect. Is it Connect? Connect. Yeah. So, like, the way Connect was a standard Yeah. They've, like, reimplemented

Yeah. And then beyond that, they've kind of thought everything. So if you look in their docs and then look under I,

and possibly capture some of the the data, and then it'll say, oh, I've I've actually cached that, or or I want to

to service worker.

So if I I could build a Node app that lives in a service worker and intercepts all between all of these different frameworks, Express being the big one.

And the complicated typings.

Yeah. I I would say the the most experience I've had with service workers is seeing it used as the caching layer for, like, create React app. It used to be when you generated a create React app, it had that, like, little service worker file. And the code in there was it would basically cache all of your JavaScript files so that the page would load faster after that. But it's it's an interesting way to think about it because at that point, you're kind of like you're writing code that looks like back end code, but it's technically running inside the browser. So, yeah, it's pretty cool. And and Cloudflare Workers, the API for Cloudflare Workers is, like,

that will go to the server

and bring back the thing. But a service worker will allow you to jump in between that request But I find myself being like, no. I kinda wanna put this in a separate file that if you pass it, your types, and hook it up to your your URL, Pnpm.

will Wes, like, dog dot JPEG or style dot CSS.

with a very syntax because you can just kind of, like, build out your endpoints like this. Yeah. Really?

you you basically just get a, like, you listen for, like, a fetch event or something like that, and then it just dumps a payload of what it is. And then it's up to you to figure out

Literally anywhere you want to run your code, they have an adapter for it. So, like, if we look in the the Node. Js example, you would build out your Hono app, but they expose this thing called a Hono Node server, and then you just pass your app to it into it and it serves it. But any other platform, they're going to expose a very similar adapter and you can just pass it in. One of the interesting ones is service workers. So you could build an app that, like, looks like a back end app, but essentially just runs inside of the web browser to, like, intercept responses for, like, caching and stuff like that. So you can you can it's a way of potentially building a service worker,

Yeah. I'm I'm not super familiar, but, I mean so I've I've been I've done a few test deployments to Cloudflare.

or write the types yourself if you want some sort of type safety.

we can go as we can go as long as we want. It's like the only place. It's our show. We do whatever we want.

Yeah. And I think that's one of the things that, like, it was so easy to get wrong in Express. Like, I saw so many beginners. Like, they weren't validating params. They sometimes not even validating the body, but Node makes it super simple. And especially if you combine it with, Node, because then you can define all of your XOD validate. Like, these days, XOD is, like, almost a mainstay in the the TypeScript ecosystem.

build out your routes like you're used to, like you might have used to have done with Express.

and then you get a fully typed client. So, literally, all we do is say type of. And then now,

like,

Hono has this idea of RPC built in. I'm showing my screens right here, and I we have a a route definition defined. So it defines the URL, it defines the validator, and it defines the handler. So it's all the things you need for a back end request. But if we say type of on that variable,

Sweet.

I guess

that type can be passed into the hono client,

assuming everything is perfect and in place.

Weston, you might know the answer to this as well. That was it's not a CloudFlare project. Right? But it is now

I have a question. Node x.

They do also have a meta framework called Hono Node. So, technically, you could do more like server rendered things if you want to. And, like, it has first class support for JSX. So if you need, like, a one off route that returns HTML, it can do that too. But, yeah, Hono is basically a way of of building back end apps, with JavaScript and TypeScript.

Welcome to Syntax. In this episode, this Monday hasty treat, we have CJ Reynolds on, and he's going to share with us why you should be checking out and using Node.

Sign up and get 2 months for free. You gotta use that coupon code at tasty treat, but you use that coupon code, you get 2 months for free. Solve your bugs with Sentry.

If you are using Node, you probably have an application you wanna make sure. Maybe it's your 1st time using Hono, and you you wanna catch all those, bugs you might introduce because maybe you didn't watch CJ's video and you thought you could do it yourself and you've introduced some bugs into your code base. Well, you wanna check out [email protected]/syntax.

Hono is kind of like the modern alternative to Express. And so, essentially, it allows you to build back end APIs.

and you have or had been building apps with Express, because I'm using a thing called Pinot Node, Not much. Super excited to talk about Hono. I've released a video on building an API with it, and, more videos coming soon on Hono. So, yeah, Hono is great. I've been loving it. Sick. Cool. Well, we're super stoked.

Alright, CJ.