What is Fresh? - First Look at the Framework for Deno

What is Fresh? - First Look at the Framework for Deno

Taking a look at a fresh new web framework
Ferenc Almasi β€’ 2022 June 30 β€’ Read time 5 min read
Fresh is a next-gen web framework built on top of Deno that tries to stand out in the JavaScript ecosystem with a couple of cool features.
  • twitter
  • facebook
JavaScript

Fresh markets itself as a next-gen web framework built on top of Deno that tries to stand out in the JavaScript ecosystem with a couple of cool features. This includes things like no configuration, TypeScript support out of the box, just-in-time rendering, and two highlights: no build step and taking advantage of the islands architecture, also known as partial hydration.

The islands architecture
The islands architecture visualized

Components here are represented as islands, and JavaScript is only shipped for components that require interactivity. As Fresh is an SSR framework, it serves static HTML to the client by default with no JavaScript. This makes it very slim and ensures your site loads as fast as possible. This approach is very similar to how Astro works.

To make things interactive, you have to opt-in for using JavaScript by defining a component as an island, which we will take a look at later on how it can be done. But first, let's take a look at how to set up a fresh project.


How to Get Started

To get started with Fresh, you will need to have the Deno CLI installed on your machine. If you don't have Deno installed, you can get up and running by using one of the following commands:

PlatformCommand
Shellcurl -fsSL https://deno.land/install.sh | sh
PowerShelliwr https://deno.land/install.ps1 -useb | iex
Homebrewbrew install deno
Chocolateychoco install deno
Scoopscoop install deno
Cargocargo install deno --locked

Once you have Deno ready, you can create a new project by running the following command in your terminal:

deno run -A -r https://fresh.deno.dev <project-folder-name>

You can also opt-in to install twind to be used for CSS during the installation process (a tailwind-to-JS solution). Then cd into your directory, and run deno task start to start the development server. You will be able to see the project running on localhost:8000.


The Project Structure

If you open up your newly created project, you will be greeted with the following folder structure:

Project structure
Project structure of a Fresh application

We have two main folders where most of the work can be done in Fresh applications: islands and routes. Any component that you create in the islands folder will ship JavaScript to the browser. If you open up the default component created for the starter project, you will see that each component needs to export a default Preact component from the file. So as you can see, Fresh uses Preact by default.

Note that Fresh uses PascalCase for the naming when it comes to components in the islands directory.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.
Master JavaScriptinfo Remove ads

Routing in Fresh

Next to the islands directory, we also have routes. Fresh also supports a file-based routing, which means that your routes will be created in accordance with the layout of your routes directory. With the starter project, we have an index.tsx and [name].tsx components.

Using brackets, you can create dynamic routes, and grab the URL values with props inside the component by referencing the name of the file:

Copied to clipboard! Playground
/** @jsx h */
import { h } from 'preact'
import { PageProps } from '$fresh/server.ts'

export default function Greet(props: PageProps) {
    return <div>Hello {props.params.name}</div>
}
[name].tsx
Referencing the name prop inside the component

Need to work with nested routes? Just create a new folder and put your components inside it. Just like for the islands directory, a route also needs to export a default component. You can also modify the response of a route by exporting a handler object from the same file:

Copied to clipboard! Playground
import { HandlerContext, Handlers } from '$fresh/server.ts'

export const handler: Handlers = {
    async GET(request, ctx: HandlerContext) {
        const response = await ctx.render()

        response.headers.set('X-Custom-Header', 'πŸ‘‹')

        return response
    }
}
Modifying the response

You can use different HTTP methods by naming the async function accordingly where you have access to both the request and the response objects.


How to Fetch Data

Another common use case is working with data. Fetching data in Fresh looks very similar to the previous example. We need a handler again, but instead of modifying the response, we can simply return the render call with the passed data:

Copied to clipboard! Playground
interface Fetch {
    data: number[]
}

export const handler: Handlers = {
    async GET(req, ctx) {
        // Here you can query your DB and return the necessary data
        const data = [1, 2, 3]

        return ctx.render(data)
    }
}

export default function Home(props: PageProps<Fetch>) {
    return props.data
}

This will be accessible inside the component under props.data. Or you can pass an object, in which case, the nodes will be accessible under props.data again:

Copied to clipboard! Playground
export const handler: Handlers = {
    async GET(req, ctx) {
        return ctx.render({
            user: {
                name: 'John'
            }
        })
    }
}

export default function Home(props: PageProps<Fetch>) {
    return props.data.user.name
}

Summary

While Fresh looks really promising on the surface, it is still relatively new so you likely don't want to use it in a production environment just yet. One major drawback is the lack of community. NPM still has a much larger userbase than Deno, and some NPM packages may not be compatible with Fresh yet.

If you would like to find out more about Fresh, you can head over to fresh.deno.dev for the full documentation. Have you already used Fresh before? Leave us your thoughts in the comments below! Thank you for reading through, happy coding!

  • twitter
  • facebook
JavaScript
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.