[ad_1]
It ships 0 JavaScript to the browser
In a world the place all people brags about shorter construct instances, a brand new and Fre$h framework comes with zero construct steps.
“Oh god, yet one more JavaScript Framework?” — However hear me out. This can be a fairly cool one, although. It’s Fre$h, and even the brand drips.
If this isn’t sufficient to persuade you, possibly the “Island Structure” and first-class TypeScript utilization does.
It’s a Full-Stack Framework on SSR (Server Aspect Rendering).
You possibly can examine it to Ruby on Rails. The twist: you write your apps in TypeScript. That is attainable since Fre$h is constructed on prime 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.” — Supply
Why Was Deno Created?
“Deno was created particularly to repair what Dahl perceived as the important thing weaknesses of Node.” — Supply
This setup permits you zero construct steps and TypeScript as supported language.
Scale back the quantity of JavaScript shipped via “islands” of interactivity.
These islands are component-based and recommend an organized view of the web page. The entire view is mixed via 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.
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 net app. When interactivity is required, the particular elements get JavaScript injected, solely them.
However a number of issues can get difficult: Authentification and Stateful Routing.
Architectural Targets:
It makes it straightforward to construct quick, scalable, and dependable functions by making use of these rules:
- Scale back web page load instances to a minimal
- Decrease consumer 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 primary components; a route can have both one or each, however by no means neither.
- Handler — Referred to as for each request to a particular route.
- Element — 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 consumer.
Islands are outlined by making a file within the islands/ folder in a Fre$h venture.
Static Information:
Static belongings are positioned in a static/ listing within the venture root. These belongings 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 permits you to modify or test requests and responses. Frequent operations needing interceptors are logging, authentication, and efficiency monitoring.
Error Pages:
Fre$h permits you to 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. Accomplished by utilizing the title of the file. Routes may also outline a customized URL sample to match in opposition to for extra superior use instances.
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 consumer to retrieve the info as a rendered element.
To begin your first instance venture, open their Getting Began and dive proper into it 🚀
Extra of a reader? Learn their documentation first 📖
[ad_2]
Source_link