Trying out Deno Fresh
New Fast Framework for Web
🦖 Deno and Fresh
In this post we are trying out Deno Fresh. Deno is a JavaScript runtime like, for example, Node or Bun. A JavaScript runtime is just an environment in which you can run the JavaScript code. Others are the browser and Cloudflare Workers. Deno, similarly to Bun, is one of the newer runtimes and has TypeScript support out of the box. Fresh is a web framework for building fast sites. Like Astro JS, it is inspired by the Islands of interactivity paradigm (more on that later).
That’s all the introductions out of the way then! This post will be a kind of “kicking the tyres” look at Fresh rather than an in-depth probe into its features. To help we built out a basic site and also include some of tips I picked up getting started with Deno Fresh.
🍋 What is Fresh about Fresh?
There is no shortage of web frameworks so a good question to ask is when you might reach for fresh. Based on the Island technology, I would say try it on a site which does not have a lot of interactivity, for example. Or even a site which has interactivity only in sparse, independent parts of the pages. Fresh might make the page faster, bringing user experience as well as SEO benefits.
Islands are units of the page where we can opt to add interactivity. They can be a single component or a group of components — whatever makes sense for the application.
For example, you might have an e-commerce site or even a basic blog with only certain elements that need JavaScript. On these sites often the header and footer and many other elements will not need to be interactive. You could include elements with animation and transitions handled by CSS in this category. Customer feedback buttons, likes counters and components pulling in the latest comments are elements you might make islands. Apps with these “sprinkled on” interactive parts are the kind of app which Fresh should suit well.
How is Fresh different to Astro?
They both support TypeScript out of the box and use Islands paradigm. Though some differences are while Astro supports Svelte, Preact, React, Vue as well as other frameworks. As it stands Fresh only supports Preact — an optimised React alternative, which uses the same API as React.
At the time of writing, you cannot use the full collection of NPM packages with Deno and therefore Fresh. That is changing though and both ES Module and CommonJS based NPM packages will get support in a future version.
🧱 How to Spin up a Fresh Fresh App
You need to have Deno CLI setup on your system to get running. If you are on a Mac and have Homebrew, run:
brew install deno
On Linux and in most other cases, you can run a shell install script from the Terminal:
curl -fsSL https://deno.land/install.sh | sh
Then you can create a new fresh project with:
deno run -A -r https://fresh.deno.dev my-fresh-fresh-app
cd my fresh-fresh-app
deno task start
You get to choose it you want Tailwind styling and TypeScript in the interactive scaffolding script. You new app will be running at http://localhost:8000/.
😯 How Does Fresh Code Look?
For a complete getting started guide, check out the Fresh docs, we’ll just skim over a couple of details here. Fresh uses file-based routing like Remix or Astro. So routes/index.tsx corresponds to the https://example.com/ path. You can add meta (e.g. SEO) and rel tags to a Head component on pages. Here is the routes/index.tsx file, which should look familiar if you already know React:
/** @jsx h */
import { Fragment, h } from "preact";
import { Head } from "$fresh/runtime.ts";
import BannerImage from "../components/BannerImage.tsx";
import Video from "../islands/Video.tsx";
export default function Home() {
return (
<Fragment>
<Head>
<link rel="stylesheet" href="/fonts.css" />
<link rel="stylesheet" href="/global.css" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="preconnect" href="www.youtube-nocookie.com" />
<link rel="dns-prefetch" href="www.youtube-nocookie.com" />
<title>Trying Deno Fresh 🍋</title>
<meta
name="description"
content="Trying out Deno Fresh: first look at the new, fast web framework from the Deno team with Island hydration and zero JS by default."
/>
</Head>
<main className="wrapper">
<BannerImage />
<h1 className="heading">FRESH</h1>
<p className="feature">Fresh 🍋 new framework!</p>
<Video />
</main>
</Fragment>
);
}
Island Example
The island hydration works a little differently to Astro; you put any island components in the islands folder. To test this out, I just added a potentially privacy enhancing feature where you have to click to accept loading a video from a social video sharing service:
/** @jsx h */
import { h } from "preact";
import { useState } from "preact/hooks";
import { Button } from "../components/Button.tsx";
export default function Video() {
const [showVideo, setShowVideo] = useState(false);
return (
<figure class="video-container">
{!showVideo ? (
<Button
onClick={() => {
setShowVideo(true);
}}
>
📼 Click to enable YouTube video playback
</Button>
) : (
<iframe
class="video"
width="768"
height="432"
loading="lazy"
src="https://www.youtube-nocookie.com/embed/4boXExbbGCk"
title="a fresh new web framework is out"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
)}
<figcaption>Fireship: A fresh new web framework is out!</figcaption>
</figure>
);
}
💚 What I Liked
- Deno CLI tooling has a code formatter and linter (commands:
deno fmt,deno lint), so no need to add and Prettier and ESLint to your new projects, - there is no build step and code renders just in time on the edge,
- there is no extra markup within components for handling island hydration. This should make it quicker to try out an existing React project.
🧐 What I Need to Explore More
- Styling: I wanted to go for vanilla CSS and stuck all the styles in a
global.cssfile in thestaticfolder. I then linked the stylesheet from alink rel=tag. Didn’t find docs on if there is a fresher way of doing this, or if you can add scoped styles something like the Remix solution for vanilla CSS. A bonus would be vanilla-extract support in Fresh. - Dependencies: I didn’t add any extra packages — had a quick scan in deno.land/x for something to lazy load images (like vanilla-lazyload) or for creating responsive image source sets but did not find anything. However, I should just be able to use the NPM vanilla-lazyload in the new version.
- I haven’t looked into testing. There is, however, a testing module in the Deno tooling, which will be exciting to explore.
🙌🏽 Trying out Deno Fresh: Wrapping Up
We have taken a whistle-stop tour of the new Deno Fresh web framework. In particular, we saw:
- what fresh does differently,
- when you might reach for fresh,
- as well as how to spin up a new Fresh project.
Check out the Fresh docs for further details. Get in touch if you would like to see more content on Fresh. Also keen to hear how you might use it in your own projects. Take a look at the full demo site code on the Rodney Lab GitHub page. I hope you found that useful and am keen to hear about possible improvements.
🙏🏽 Trying out Deno Fresh: Feedback
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, then please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as SvelteKit. Also subscribe to the newsletter to keep up-to-date with our latest projects.