Fresh – a new Full Stack framework for Deno

A new JavaScript framework was yet again released. This time, it is a little different then the usual story. Fresh is a full stack framework for Deno, along with an interesting architecture and approach. But first, what is even Deno?

What is Deno?

Deno is a JavaScript runtime. A runtime is a program which on the one hand executes JavaScript with the help of a JavaScript Engine and on the other hand providing the developer functions and libraries for common use cases like websockets or file system. The most popular JavaScript runtime is NodeJS.
Deno wants to be an alternative to NodeJS. It was developed by the founder of NodeJS but has some differences in its approach. First of all, it puts a focus on the security of applications. The developer has to manually allow certain operations like file access. It also supports TypeScript out of the box, has top level await and a large number of standard modules. Furthermore, like NodeJS, it relies on Google’s V8 JavaScript engine. It was developed in Rust. Sadly, NPM packages will not work with Deno. Therefore, Deno and NodeJS are two different worlds, at least when it comes to frameworks.

What about Fresh?

The lack of NPM packages means that larger frameworks like Next.js, Remix or even Gatsby are not available. Fresh now aims to fill that gap. In doing so, it also has intriguing approaches and features of its own.

1. First, Fresh relies on the island architecture. Here, static areas of the application are converted to HTML. However, interactive parts still use JavaScript. These interactive areas are called islands. The advantage of this approach is that the website as a whole does not have to be rendered over and over again. Also, the individual islands can be loaded independently of each other. This approach tries to combine the interactivity of Client-Side Rendered (CSR) applications with the SEO advantages of Server Side Rendered applications. It also reduces the overhead of JavaScript.
2. The second major feature of Fresh is that it does not require a build step. It does not require a web page to be pre-generated first.
3. TypeScript is supported from the beginning, like routing.
   Also, Fresh relies on the Edge. This means that Fresh is designed from the start to run on the Edge. But what does the Edge mean?

What is the „Edge“?

The „Edge“ denotes a specific server architecture. Instead of using a single server for all global requests, multiple servers with the same program across the world are used. By doing so, the distance between user and server is reduced. This results in faster communication between the server and the end user. However, in our use case the edge means mostly serverless functions that are distributed across multiple servers around the globe. The usefullness for the final application depends on the degree of decentralization of the given application. If the functions can be executed on their own, the edge can offer a speed advantage. However, if the data has to be loaded from a certain point, the advantage is sometimes limited.

Summary

Fresh has interesting approaches and a modern feature set. However, the „make or break“ point is the use of Deno. For the Deno world, Fresh is a very welcome framework as it extends the full stack capabilities of Deno. But if you have a complex application on top of an existing NodeJS architecture using many NPM packages, switching proves to be difficult.