For JavaScript and TypeScript developers, Fresh is a Deno-based web framework that facilitates the construction of high-quality, efficient, and customized web apps. You can use it to make whatever you think of, including your home page, a blog, or a sizable web application. In essence, Fresh combines a routing architecture and a templating engine to produce pages on the server as needed. For maximum interactivity, Fresh offers an interface for seamlessly rendering some components on the client in addition to this just-in-time rendering on the server. For rendering and templating on both the server and the client, the framework employs Preact (a lightweight React alternative) as a templating engine and JSX.

Advantages of Fresh

Hard-to-miss features are packed with Fresh and readily usable for creating web applications right out of the box. Here are a few of these characteristics:

• No build step: You directly write the code that is executed on the client and server. Any necessary translation from TypeScript or JSX to regular JavaScript is performed instantly, as needed. This enables deployments to happen incredibly quickly and iteration loops to happen incredibly quickly.
• Zero runtime overhead: By default, Fresh ships no JavaScript to the browser. Just a static HTML file.
• No configuration is required: You don’t need to configure anything to begin developing your application with Fresh. Just use their CLI and get started.
• Fast and tiny (the framework requires no client JS): Client-side rendering is quite expensive because it ships hundreds of kilobytes of client-side JavaScript to users on each request, slowing down the user experience and increasing power consumption on mobile devices. Fresh embraces the true design of server-side rendering and progressive enhancement on the client side. It uses a different model where 0KB of JavaScript is shipped to the client-side by default. Most rendering is done on the server side, and the client-side is only responsible for re-rendering small islands of interactivity.
• TypeScript out of the box: Unlike Node.js, you don’t have to configure TypeScript separately in Fresh.
• Routing files using Next Js: Similar to Next Js (A hybrid static & server rendering Javascript framework ), Fresh renders everything to static HTML on the server instead of sending JavaScript code to the browser.
• Island-based client hydration: The island-based client hydration model works with small portions of your application that need JavaScript to be interactive. For example, on the docs, they have this counter at the bottom, which was hydrated to provide interactivity. Only the JavaScript required to render the counter is sent to the client.

The connection between Deno and Fresh

The original architect of Node Js created Deno, a Javascript runtime, to respond to many of the issues with the original Node. However, the eco-space is currently in a very early stage of development. Deno is a secure typescript runtime built on Google’s V8, which serves as the JavaScript runtime engine. The capabilities of Node Js will be enhanced by features in Deno. Fresh projects can be distributed to any platform, but for the optimal user experience, it is intended to be pushed to an edge runtime as Deno deploy.

Deno deploy supports

• ES modules compatible with the web: import dependencies just like in a browser, no need for installation.
• Direct GitHub integration: push to a branch, examine a deployed preview, and merge to release to production.
• Builds on the Web: use fetch, WebSocket, or URL just like in the browser.

Creating a new project with Fresh

It’s quite simple to get started using Fresh. Fresh projects can be created by using the Fresh project creation tool. It will scaffold a new project with some example files to get you started. The following commands allow you to create a Fresh project.