isotropic-2022
Share
Blog
Search
Menu

Fresh Web Framework - First look at the newest way to build websites and webapps in 2022

By James LePage
 on July 4, 2022

Fresh Web Framework - First look at the newest way to build websites and webapps in 2022

By James LePage
 on July 4, 2022

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).

isotropic-2022-07-04-at-14-45-07

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.

isotropic-2022-07-04-at-14-43-56
Fresh selling points

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:

isotropic-2022-07-04-at-14-34-07

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:

my-app/ ├── README.md ├── deno.json ├── dev.ts ├── fresh.gen.ts ├── import_map.json ├── islands │ └── Counter.tsx ├── main.ts ├── routes │ ├── [name].tsx │ ├── api │ │ └── joke.ts │ └── index.tsx └── static ├── favicon.ico └── logo.svg

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.

isotropic-2022-07-04-at-14-44-26

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.

Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic, a WordPress education company and digital agency. He is also the founder of CodeWP.ai, a venture backed startup bringing AI to WordPress creators.
We're looking for new authors. Explore Isotropic Jobs.
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram