Fre$h — The Next Gen Framework for Web Developers | by Arnold Abraham | Jul, 2022

It ships 0 JavaScript to the browser

In a world the place all people brags about shorter construct occasions, a brand new and Fre$h framework comes with zero construct steps.

“Oh god, one more JavaScript Framework?” — However hear me out. It is a fairly cool one, although. It’s Fre$h, and even the emblem drips.

If this isn’t sufficient to persuade you, perhaps the “Island Structure” and first-class TypeScript utilization does.

It’s a Full-Stack Framework on SSR (Server Aspect Rendering).

You possibly can evaluate it to Ruby on Rails. The twist: you write your apps in TypeScript. That is doable since Fre$h is constructed on high of Deno.

What’s Deno?

Deno is “a runtime for JavaScript, TypeScript, and WebAssembly based mostly on the V8 JavaScript engine and the Rust programming language. Deno was co-created by Ryan Dahl, who additionally created Node. js.” — Source

Why Was Deno Created?

“Deno was created particularly to repair what Dahl perceived as the important thing weaknesses of Node.” Source

This setup permits you zero construct steps and TypeScript as supported language.

Scale back the quantity of JavaScript shipped by means of “islands” of interactivity.

These islands are component-based and recommend an organized view of the web page. The entire view is mixed by means of static and dynamic islands.

The static components are pure HTML and don’t want “hydration.” The dynamic areas mix HTML and scripts which are opted in after rendering.

Comparability between SSR Progressive Hydration and Island Structure — Image Credit

The frameworks Astro and Marko additionally use the Island Structure.

To sum it up, Island Structure creates static components of your web site in plain HTML. Enabling a fastly loading internet app. When interactivity is required, the particular elements get JavaScript injected, solely them.

However a number of issues can get tough: Authentification and Stateful Routing.

Architectural Targets:

It makes it straightforward to construct quick, scalable, and dependable purposes by making use of these rules:

  • Scale back web page load occasions to a minimal
  • Decrease shopper workload.
  • Make errors having a small blast radius.

Routes:

Routes describe how a request for a given path must be dealt with.

Routes have two foremost components; a route can have both one or each, however by no means neither.

  1. Handler — Known as for each request to a selected route.
  2. Part — Template for a web page that will get SSR’d.

Interactive Islands:

Islands enable client-side interactivity in Fre$h.

Islands are remoted Preact elements. In comparison with different elements, they’re rendered on the shopper.

Islands are outlined by making a file within the islands/ folder in a Fre$h venture.

Static Information:

Static property are positioned in a static/ listing within the venture root. These property are served on the root of the webserver.

Route Middleware:

Middlewares will intercept any needed request.

You possibly can then carry out customized logic earlier than or after the route handler. Thus it means that you can modify or test requests and responses. Frequent operations needing interceptors are logging, authentication, and efficiency monitoring.

Error Pages:

Fre$h means that you can customise default error pages.

For instance, customise the 404 web page by making a _404.tsx file within the routes/ folder.

Routing:

Fre$h routes requests based mostly on their URL path.

Sometimes any route specifies which path they’re invoked for. Performed through the use of the identify of the file. Routes also can outline a customized URL pattern to match in opposition to for extra superior use circumstances.

This file-based routing is already applied in Subsequent.js.

Information Fetching:

Asynchronous handler features are used for server-side information fetching.

Utilizing the handler features to name a render operate with the info to be rendered as an argument. Returning it to the shopper to retrieve the info as a rendered part.

To start out your first instance venture, open their Getting Started and dive proper into it 🚀

Extra of a reader? Learn their documentation first 📖

More Posts