In this post, we'll look at the brand-new web framework fresh, a Deno-based Typescript web framework with some swanky features like utilising the islands architecture, no build step, and sending 0 Kb of JavaScript to the client by default (that's right, no JS).
Let's get started!
What is Deno?
Before we start talking about Fresh, I think it's important to first understand what Deno is because many people aren't familiar with it.
Deno was designed by the same developer who created NodeJS, with the objective of fixing things that he wished Node could accomplish. This, however, is no longer feasible due to the widespread use of Node, so he went ahead and created a new runtime based on JavaScript, TypeScript, and WebAssembly.
Deno has built-in TypeScript support, which means you don't have to manually configure your environment and can start using TypeScript right away.
Everything about Deno is fascinating, from the way it handles browser compatibility to the built-in security features. To keep this post short, we'll stop here because you now have some foundational knowledge about how the runtime works and go on to what the Fresh web framework is.
What is Fresh?
Fresh is a one-of-a-kind framework that is laser-focused on performance. As was already noted, by default, it sends 0 Kb of JavaScript to the client. That is, the server does the majority of the rendering, and the client only generates small parts of the UI for interactivity known as islands.
Essentially, Fresh is a routing framework and templating engine that renders pages as they are requested on a server.
Fresh renders and templates using preact with typescript (TSX) or JSX. Therefore, learning Fresh won't be as difficult if you are already familiar with react-based frameworks.
The majority of rendering is completed just in time on the server, while client rendering is opt in for each component. As a result, only the areas that call for interaction will ship with JavaScript. That's fantastic since the less JavaScript there is on the page, the faster it will load.
One of the most notable features of the fresh framework is that there is no build step whatsoever. All typescript to JavaScript translations are done just in time, so there will be an immediate deployment on your end. While many other frameworks claim to have ever-shorter build times, Fresh simply doesn't have one.
Fresh Architecture
Let's start with the fundamental ideas. A fresh project includes eight different components, but I'll only cover the routes and islands folders in this blog. You can read more about all of the other components here.
routes This folder contains all of your project's routes. Each file's name in this folder corresponds to the path used to view that page. This folder's code is never sent directly to the client.
islands This folder contains all of your project's interactive islands. Each file's name corresponds to the name of the island that file defines. This folder's code can be executed from both the client and the server.
Simply put, islands and routes are needed to bring interaction and reactivity to your project and to build pages and routes, respectively.
Since the bulk of processing is done on the server-side, Fresh can load pages considerably faster than most frameworks that use client-side rendering and even many server-side-rendering(Since Fresh doesn’t ship the whole rendering infrastructure to the client).
Conclusion
Fresh is light and straightforward.
The routing/island system is really simple to use and eliminates many of the bloating concerns that make web frameworks unpleasant. I'm definitely going to use Fresh for some projects in the future.
Obviously, the biggest challenge when working with Fresh is the size of the Deno ecosystem, but in all honesty, Fresh looks like a significant enough step in the right direction to justify putting up with Deno's growing pains.
Until next time 👋.
Top comments (0)
Some comments have been hidden by the post's author - find out more