Fresh is an edge-native web framework for Deno, using Preact and JSX for rendering and templating. With zero build steps, it simplifies web development while prioritizing performance and progressive enhancement.
- Core Maintainer: Deno
- Website: fresh.deno.dev
- Founded: 2022
- Github Stars:
Fresh is the newest addition to the growing list of meta frameworks, and it's built specifically for the Deno runtime. What sets Fresh apart from other frameworks is its unique approach to web development with its zero build step and minimalist design. This is particularly exciting news for developers, as they no longer have to spend time and resources on build configurations and can focus more on writing clean and maintainable code.
What is Fresh?
Fresh has no build step
However, with Fresh, you don’t have a separate install step since all dependencies are installed and cached when it's run the first time. Also, Fresh doesn't have a build step, making it stand out from other frameworks.
Moreover, Fresh's just-in-time builds eliminate the need for separate transpile steps. The Deno runtime transpiles TypeScript on request, allowing for server-side rendering and dynamic data passing through a template to generate HTML.
Island based client hydration
Fresh utilizes a modern architecture pattern known as "islands architecture" to enhance its performance and scalability. The islands architecture pattern allows for a cleaner separation of concerns and better performance by isolating Preact components that are rendered on the client.
In the case of Fresh, anything in the
To create an island, simply create a file in the
islands folder of your Fresh project, and give it a PascalCase or kebab-case name. For instance, a file named
MyIsland.tsx can contain the following code:
You can use an island in a Fresh page just like any other Preact component, and Fresh will take care of automatically re-hydrating the island on the client. By enabling client-side interactivity, islands enhance the user experience and make Fresh an even more powerful framework for building modern web applications.
Fresh is an edge native framework
Fresh is a web framework designed to take advantage of the edge environment. The edge combines the benefits of CDNs and serverless computing, allowing custom code to be executed close to users. With Fresh, developers can render pages and execute custom code right at the edge, providing users with a lightning-fast experience.
While edge development can be complex due to the hybrid nature of rendering choices, Fresh simplifies the process by embracing server-side rendering and an islands architecture.
A basic project structure in Fresh is as follows:
dev.ts: This is the dev server. It is the development entry point for the project.
main.ts: This is the production entry point for your project. It is the file that you link to Deno Deploy.
fresh.gen.ts: This file is automatically generated and contains information about your routes and islands.
import_map.json: This file shows where to get the dependencies for the project. It makes importing and updating dependencies easier.
deno.json: This is kind of like package.json, except there are no dependencies. It shows the location of the
import_map.jsonso that it can be loaded automatically. Also, there are some task commands like npm scripts in package.json here.
routes: This folder is where you define all your routes. The names of each file in this folder correspond to the path where that page will be accessed. Note that the code inside this folder is never directly shipped to the client.
islands: This folder is where you define all of the interactive islands in the project. The name of each file corresponds to the name of the island defined in that file. The code inside this folder can be run from the client and server.
static: This folder contains public static assets served automatically as they are, like images, fonts, etc.
As a relatively new web framework, Fresh is still building its ecosystem. However, there are already some resources available for developers to utilize. The Fresh website has a components page where developers can find pre-built UI components that they can use to prototype their applications quickly.
Additionally, the Deno Discord community is a great place to ask questions, get help, and connect with other developers who are using Fresh. There, you can find dedicated channels for Fresh-specific discussions and support.
Finally, the Fresh repository on GitHub is a good place to report bugs, request features, or start a discussion about the framework. The discussions section of the repository allows developers to engage in open discussions about the development of Fresh.
Although Fresh is new, with the backing of the Deno community and the momentum behind the project, the Fresh ecosystem will likely continue to grow and evolve in the coming years.
How to get started With Fresh?
Also, it’s good to have the Deno extension installed on your IDE, if this is your first experience with Deno.
Run the following command to bootstrap a new project with Fresh:
Switch into the new directory:
Start the development server:
Open http://localhost:8000 in your browser to see your project live.
Deploying Fresh to the edge
Fresh is designed to be deployed and hosted on the edge using Deno Deploy, but it can also be deployed on any platform or system that supports a Deno-based web server or Docker containers, such as Amazon Web Services or Google Cloud.
Deno Deploy is a globally distributed edge runtime built by the Deno company. It is excellent for hosting serverless functions as well as entire websites and applications. Here is how you can deploy your project to Deno Deploy in a few simple steps:
- Create a GitHub repo for your project
- Go to dash.deno and connect your GitHub
- Select your GitHub organization or user, repository, and branch
- Select “Automatic” deployment mode and
main.tsas an entry point
- Click “Link”, which will start the deployment
When the deployment is complete, you’ll receive a URL that you can visit to see the live version of your application.
Fresh is a promising web framework that aims to simplify the process of building web applications with Deno. Its minimalist approach to web development allows developers to focus on writing clean, concise, and maintainable code. With its focus on ease of use, developer productivity, and fast performance, Fresh offers a simple and intuitive development experience for Deno developers.
- No build step
- Zero config necessary
- Just-in-time rendering on the edge
- Tiny & fast (no client JS is required by the framework)
- Optional client side hydration of individual components
- Highly resilient because of progressive enhancement and use of native browser features
- TypeScript out of the box
- File-system routing
- Lack of community and official plugins