Trying out Deno Fresh: new Fast Framework for Web
Tags: webdev, typescript, preact, deno
Published: 2022-08-22 09:58:14

---
title: "Trying out Deno Fresh: new Fast Framework for Web"
published: "true"
description: "Trying out Deno Fresh: first look at the new, fast web framework from the Deno team with Island hydration and zero JS by default."
tags: "webdev, typescript, preact, deno"
canonical_url: "https://rodneylab.com/trying-out-deno-fresh/"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f99pyvcd2w9hm1ohrgic.png"
---

## 🦖 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&rsquo;s all the introductions out of the way then! This post will be a kind of &ldquo;**kicking the tyres**&rdquo; 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 &mdash; 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 &ldquo;sprinkled on&rdquo; 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 <a aria-label="Open Astro blog posts" href="https://rodneylab.com/tags/astro/">Astro</a> supports <a aria-label="Open Svelte tutorials" href="https://plus.rodneylab.com/tags/sveltekit/">Svelte</a>, Preact, React, Vue as well as other frameworks.  As it stands Fresh only supports Preact &mdash; 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 <a aria-label="Read about upcoming Deno changes" href="https://deno.com/blog/changes">will get support in a future version</a>.

## 🧱 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:

```shell
brew install deno
```

On **Linux** and in most other cases, you can run a shell install script from the Terminal:

```shell
curl -fsSL https://deno.land/install.sh | sh
```

Then you can create a new fresh project with:

```shell
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 <a aria-label="Open fresh app in Browser" href="http://localhost:8000/">`http://localhost:8000/`</a>.

## 😯 How Does Fresh Code Look?

For a complete getting started guide, check out the <a aria-label="Open the Deno Fresh docs" href="https://fresh.deno.dev/docs/getting-started">Fresh docs</a>, we&rsquo;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:

```tsx
/** @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>
  );
}
```

![Trying out Deno Fresh: screenshot of demo site shows heading fresh with test Fresh 🍋 new framework! below](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nfseuruzpiks6uy6rsq.png)

### 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:

```tsx
/** @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.css` file in the `static` folder. I then linked the stylesheet from a `link rel=` tag.  Didn&rsquo;t find docs on if there is a fresher way of doing this, or if you can add scoped styles <a aria-label="Read about Remix regular stylesheets" href="https://remix.run/docs/en/v1/guides/styling#regular-stylesheets">something like the Remix solution for vanilla CSS</a>. A bonus would be vanilla-extract support in Fresh.
- **Dependencies**: I didn&rsquo;t add any extra packages &mdash; 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&rsquo;t looked into testing. There is, however, a <a aria-label="Open Deno tesing manual" href="https://deno.land/manual/testing">testing module in the Deno tooling</a>, 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 <a aria-label="Open the Astro J S Location Git Hub repo" href="https://github.com/rodneylab/trying-deno-fresh">Rodney Lab GitHub page</a>.  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 <a aria-label="Support Rodney Lab via Buy me a Coffee" href="https://rodneylab.com/giving/">consider supporting me through Buy me a Coffee</a>.

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 <a aria-label="Reach out on Twitter" href="https://twitter.com/messages/compose?recipient_id=1323579817258831875">@askRodney</a> on Twitter and also <a aria-label="Contact Rodney Lab via Telegram" href="https://t.me/askRodney">askRodney on Telegram</a>. Also, see <a aria-label="Get in touch with Rodney Lab" href="https://rodneylab.com/contact">further ways to get in touch with Rodney Lab</a>. I post regularly on <a aria-label="See posts on Astro" href="https://rodneylab.com/tags/astro/">Astro</a> as well as <a aria-label="See posts on svelte kit" href="https://rodneylab.com/tags/sveltekit/">SvelteKit</a>. Also <a aria-label="Subscribe to the Rodney Lab newsletter" href="https://rodneylab.com/about/#newsletter">subscribe to the newsletter to keep up-to-date</a> with our latest projects.