Fresh: an extremely fast and simple web framework from Deno

It seems you get a new JavaScript framework almost every week now. Most of them aim to improve upon this or that shortcoming of React by doing something a little better, but so far many of them have lacked staying power and React still remains the go to tool it has been for a long while now. So while we all eagerly await something that will finally beat React, this time we can fortunately take a look at something a bit more Fresh.

Deno

Before we get to Fresh we first need to mention Deno. It’s a JavaScript and TypeScript runtime and an alternative to Node.js. A very good one at that, since it was introduced by Node.js creator Ryan Dahl is his talk “10 Things I Regret About Node.js" Yes the name is an anagram of Node but it's not a fork of Node at all, it's a completely new implementation based on modern JavaScript features fixing all the mistakes its creator mentioned. It ships as a single executable with no dependencies, so no more compiler, builder and bundles, just a single TypeScript file. If that file needs packages it just fetches what it needs from URLs instead of using npm install.

A Fresh framework

With Deno being that different from Node, Next.js just isn't fit to run it. So the obvious conclusion is that you need a dedicated framework for it and hence the solution to that, Fresh. Starting fresh (no pun intended) instead of refitting an existing framework does have its benefits though, you’re free to choose whatever approach you think is best and with Fresh that is: keep it absolutely minimal. Basically every single time I do an overview of a new framework or library I focus on the features it has, but here I'm going to do the opposite and focus on what Fresh does not have:

• No runtime overhead: by default Fresh ships no JavaScript to the client, instead using a “Island based client hydration" approach (more on that later).
• No build step: unlike other frameworks, which focus on speeding up their build step, Fresh doesnt have one at all. Fresh builds can be deployed to the edge instantly via Deno Deploy.
• No configuration: Works instantly out of the box and you can get right to writing code.
• No typescript compiler: Pretty much an extension of the above, Fresh provides TypeScript support out of the box just like Deno itself, so no compiler is needed.

What does it have?

How does that make sense? Well the usual approach with frameworks is focusing on what some other framework does inefficiently and improving a bit on that. With Fresh the approach is different: keep everything at an absolute minimum to get peak performance and reduce stress on the client. It's basically made of two core parts:

• Routes: These contain a handler and a component (either or both) and take care of how your app responds to requests. Handlers are functions called for every request to the route, which then send a response with whatever is needed to the client. The component is a template, a server-side rendered JSX element which can receive props to determine what exactly needs to be rendered.

• Islands: These are isolated Preact components that are rendered on the client side and are sent to the client by routes. This is for those small parts of your app that need JavaScript to be interactive. It's the only part of Fresh that renders client side and Fresh handles updates automatically to reduce load times for the client. Props can be passed to islands, but that is currently limited to JSON serializable objects: primitive types, plain objects and arrays, but that might change in the future.

Not your regular JavaScript Framework

New routes are put into /routes directory and the same with islands into /islands. This makes the whole concept quite simple. Fresh renders everything into static HTML on the server which means the user only gets a static HTML page. When more interactivity than static HTML is needed it can opt into JavaScript in individual islands so every page is still server-side rendered. This is different from Next.js where after the initial page all others are rendered by the router, which is client-side. Since almost all the processing is done on the server side, Fresh loads pages considerably faster than client-side frameworks and even beats a lot of server-side frameworks in that regard.

The whole approach isnt that revolutionary and is more of a throwback to traditional apps, especially in the age of React single page applications. That said Fresh is definitely a step in the right direction for Deno. Yes we’ve all heard enough about new JavaScript frameworks, but this one is actually different and the minimalistic approach is very efficient. While it's probably not ready for work just yet, the Deno ecosystem is taking an interesting route and with how fast and simple Fresh is, it should be a draw to make people keep an eye out for what more they can come up with.