In this article we're going to take a look at the new Fresh web framework, a Deno-based typescript web framework with some shiny features like utilization of the islands architecture, no build requirements and 0kbs of JavaScript sent to client by default (that's right, no JS).

Deno is created by the same developer behind NodeJS, with a focus on fixing things that he wished he could have with Node. However, now that Node is so popular and widely used, this is impossible, so he went ahead and created a new runtime based in JavaScript, TypeScript, and WebAssembly.

Fresh is a unique framework that is hyper focused on performance. As mentioned previously, it ships 0 kB of JavaScript to the client by default. What that means is the majority of rendering is done on the server, and the client only renders specific small areas of the UI for interactivity known as islands.

At its core, Fresh is a routing framework and templating engine that renders pages as they are requested, on a server. 

Fresh Is Stable announcement, July 2022

Here's a good overview of the islands architecture:

Fresh uses preact and typescript (TSX) or JSX to render and template. That means that if you're already familiar with react-based frameworks, which are currently the most popular options in 2022, the learning curve for Fresh won't be that steep.

Most rendering is done just in time on the server, and client rendering is opt in on a per component level. That means that only sections that necessitate interactivity will ship JavaScript. That's awesome because the less JavaScript you have, the faster the page will load.

One of the most unique aspects of the new fresh framework is that there is no build step whatsoever. Any translation between typescript and JavaScript is done just in time, which means that there will be instantaneous deployment on your end.

As many other frameworks tout the increasingly shorter build times, fresh simply doesn't have one.

Let's take a look at the general file structure and boilerplate of a Fresh project:

You can see that there is routing, general components, and more, similar to React. However, there's now a new islands folder. All components in this island's folder will be rendered client side, so that's where you throw the interactive aspects of your app.

Fresh takes care of automatically re-hydrating the island on the client if it encounters its use in a route's template.

Fresh Is Stable announcement, July 2022

Fresh is ready to build production web apps and sites. It's lightweight and simple, but it can be used in many scenarios. We believe that the biggest issue with this new framework is the ecosystem size of Deno. However, this release may put Deno on the map, and make it ready for prime time. Deno in itself is a massive improvement when compared to NodeJS, it's just a lot newer and needs to be adopted first.