What makes Deno Fresh fast?

Deno Fresh is a new web framework. It uses Deno to build server side generated site quickly. The generated sites as well as the tooling are quick. You write your site pages and components in Preact. This is an optimized version of React, which explains where some of the speed comes from. On top, Fresh ships zero JavaScript by default. You have to enable JavaScript in components which need it (called islands). This limits JavaScript to isolated parts of the page, reducing the number of bytes sent to a browser. Islands together with Preact optimizations help explain Fresh’s speed.

Can you use NPM packages in Deno apps

At the time of writing, you are limited to the Deno ecosystem when looking for packages to add to your apps. However, that is all about to change. Deno have announced support for NPM packages in a future release. You will be able to source NPM packages by using an `npm:` prefix on the import URL, followed by the package name. This will work for ES Modules-based and CommonJS-based NPM packages.

Trying out Deno Fresh: new Fast Framework for Web # Trying out Deno Fresh: new Fast Framework for Web #

Trying out Deno Fresh: new Fast Framework for Web #

Updated 2 years ago

6 minute read

Gunning Fog Index: 6.1 2 comments

Content by Rodney

🦖 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 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 optimized 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. Your 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:

routes/index.tsx

tsx

    1 import { Head } from "$fresh/runtime.ts";
2 import BannerImage from "@/components/BannerImage.tsx";
3 import Video from "@/islands/Video.tsx";
4 import { Fragment } from "preact";
5  
6 export default function Home() {
7   return (
8     <Fragment>
9       <Head>
10         <link rel="preconnect" href="www.youtube-nocookie.com" />
11         <link rel="dns-prefetch" href="www.youtube-nocookie.com" />
12         <title>Trying Deno Fresh 🍋</title>
13         <meta
14           name="description"
15           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."
16         />
17       </Head>
18       <main className="wrapper">
19         <BannerImage />
20         <h1 className="heading">FRESH</h1>
21         <p className="feature">Fresh 🍋 new framework!</p>
22         <Video />
23       </main>
24     </Fragment>
25   );
26 }

blurry low resolution placeholder image — Trying out Deno Fresh: Demo Site

Trying out Deno Fresh: screenshot of demo site shows heading fresh with test Fresh 🍋 new framework! below — Trying out Deno Fresh: Demo Site

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 potential privacy enhancing feature where you have to click to accept loading a video from a social video sharing service:

islands/Video.tsx — click to expand code.

islands/Video.tsx

tsx

    import { Button } from "@/components/Button.tsx";
import { useState } from "preact/hooks";
 
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>
  );
}

Please enable JavaScript to watch the video 📼

Trying out Deno Fresh: Demo App

💚 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’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 — 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, the testing module in the Deno tooling , which will be exciting to explore.

🗳 Poll #

Have you tried Deno in an app or edge function?

🙌🏽 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. The site is running live on Deno Deploy . Have 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: Summary #

What makes Deno Fresh fast? #: Deno Fresh is a new web framework. It uses Deno to build server side generated site quickly. The generated sites as well as the tooling are quick. You write your site pages and components in Preact. This is an optimized version of React, which explains where some of the speed comes from. On top, Fresh ships zero JavaScript by default. You have to enable JavaScript in components which need it (called islands). This limits JavaScript to isolated parts of the page, reducing the number of bytes sent to a browser. Islands together with Preact optimizations help explain Fresh’s speed.
How is Fresh different to Astro #: Both Astro and Deno Fresh are architected on the Island paradigm. Both have fast, modern tooling with out-of-the-box TypeScript support. Currently, Fresh limits you to writing your app in Preact (an optimized version of React which shares its APIs). By contrast, you can author Astro apps in Svelte, React, Preact, Vue and other frameworks. Astro is compatible with most node environments, making your site easily deployable to a number of hosting providing. Fresh runs in Deno, which is among the fastest JavaScript runtime environments. Astro lets you create static (Static Site Generation, or SSG) sites as well as SSR, while Fresh offers Server Side Rendered apps.
Can you use NPM packages in Deno apps #: At the time of writing, you are limited to the Deno ecosystem when looking for packages to add to your apps. However, that is all about to change. Deno have announced support for NPM packages in a future release. You will be able to source NPM packages by using an `npm:` prefix on the import URL, followed by the package name. This will work for ES Modules-based and CommonJS-based NPM packages.

🙏🏽 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.

Fresh new post on the fast 🍋Fresh framework from the

@deno_land team! First look at fresh speaking about what I liked and what will be interesting to explore further.

Hope you find it useful!#deno #askRodney https://t.co/Ojt2PxP2EE
— Rodney (@askRodney) August 17, 2022

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.