July 04, 2022
In this article, we'll be talking about everything Fresh. The features it has to offer, breaking down those features, comparing it with other frameworks and perhaps most importantly determining if it's something worth your time and energy.
What is Deno?
Before we begin talking about Fresh, I think it's good to get a foundational knowledge of what Deno is beforehand as many people aren't familiar with it.
Deno also recently raised a $21M series A investment round to build the Deno Deploy distributed web deployment platform along with their other open-source projects at github/denoland.
There are a million interesting things about Deno -- from how it handle browser-compatibility to the built-in security features. For the sake of keeping this article brief, we'll stop here as you now have some underlying information about how the runtime works and move onto what exactly the Fresh web framework is.
What is Fresh?
Fresh is created by Deno -- so it's no surprised that it's also built on-top of it. You write your applications in TypeScript. Fresh calls itself a next-gen fullstack web framework for server-side rendering, which I'll explain later in this article. It's similar to other fullstack web frameworks like Django, Ruby on Rails, Symfony or Larvel.
Essentially, Fresh is a routing framework that uses Preact (a lightweight React alternative) as a templating engine. A template engine enables you to use static template files in your application. Essentially, Fresh replaces variables in a template file with their actual values, and transforms the template into an HTML file sent to the client.
Let's get into the main problem that Fresh aims to solve. For this, let's take a look at a few paragraphs from the Deno blog,
React (and React-like) pages allow programs to build very complex UIs with relative ease. The popularity shows in the current web framework space: it is dominated by React based frameworks.
Some newer frameworks also have support for server side rendering. This helps reduce page load times by pre-rendering on the server. But most current implementations still ship the entire rendering infrastructure for the full application to every client so the page can be fully re-rendered on the client.
The Features of Fresh
Just-in-time rendering on the edge
As mentioned above, Fresh renders everything into static HTML on the server. On-top of that, when you create API routes in Fresh, it's based on the Fetch API interface allowing it to be deployed to serverless Edge functions such as Deno Deploy.
Island based client hydration
Attached below is an image comparing the islands architecture to SSR and progressive hydration from patterns.dev. Other frameworks such as Astro adopt this approach with server-side rendering.
Zero runtime overhead
No build step
Fresh has absolutely no build step. Unlike a lot of other frameworks, Fresh builds can just be directly deployed to the edge with Deno Deploy.
No configuration necessary
This is rather self-explanatory. You don't need to configure anything really in-order to begin developing your application with Fresh. Just use their CLI and begin right away.
TypeScript support out of the box
I believe this one's also pretty self-explanatory. You don't need to configure TypeScript separately in Fresh like you'd need to do in Node. It's also very similar to the out of the box TypeScript support in Deno itself.
Anyways, that wraps it up for the article. In this article, we discussed everything about Fresh. From getting a brief background of Deno and Fresh to actually breaking down how it works under the hood and understanding what it has to offer in-terms of technology. I hope this article helped you get some foundational knowledge of what exactly Fresh is, and if it makes a worthy candidate for you to start using in your applications.
Until next time 👋
Thanks to the author of Fresh, Luca Casonato for reviewing an early draft of this article.