SECRET OF CSS

Introduction to the “fresh” Framework | by Shoury Sharma | Jul, 2022


Meet Deno’s fresh — a new web framework

1*OBUHZkrUKjXdzKlGuMBZFQ

There is been a lot of frameworks and libraries being used in modern-day JavaScript and TypeScript development. Furthermore gets added every next month. Fresh has been the one that got a stable release about a week ago.

Fresh is a next-generation web framework, built for speed, reliability, and simplicity. That’s a promising statement given by the team. Fresh uses some parts of Preact to handle its JSX-styled components.

Fresh is powered by Deno. Deno is a simple, modern, and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust. It manages dependencies in a different way to that of Node.js.

  • Just-in-time rendering on the edge.
  • Island-based client hydration for maximum interactivity.
  • Zero runtime overhead: no JS is shipped to the client by default.
  • No build step.
  • No configuration is necessary.
  • TypeScript support out of the box.

Among all these statements the “No JS is shipped to the client by default” seems the one that draws most the attention. The performance increase in fresh is fantastic due to some of the key features it offers overall.

Let’s create a basic application that fetches images from Hipolabs API and displays it to the view with Fresh. To create a demo app we need deno installed into our system and environment variables set up.

For installation follow the default documentation guide in deno. To set up a boilerplate app of Fresh. Select yes for twind installation, It will provide us access to tailwind utility classes which are helpful to design a page with a lot less CSS.

This creates a boilerplate code for the Fresh application, It would look something like this

As soon as you watch the routes folder, You’ll realize that the routing in Fresh follows the same pattern as the Next.js routing, Which comes in handy for many reasons. Moving forward to the code, islands consist of the components we require to render inside our pages/routes. The routes follow file path routing that is if a file exists inside the route that is named as follows.tsx, the /follows route will automatically be generated. Fresh also supports Server Side Rendering with Handlers which makes it easier to fetch data before the page is loaded and lets us pass that data as Props into the page.

By default, fresh comes baked with Typescript which means we can be strict with types using interfaces and type. Our API returns data in the list of JSON in such format.

We need to declare an interface for the following JSON so we can be strict with the types getting returned, To avoid many developers using TypeScript with any.

1*kWY9wS ak ElsZzl aJcgA

So declaring an interface while fetching a data call via an external API is always a good idea. So we declare an Interface University.

Now we have the interface ready and we are ready to write a handler function that runs before the element in DOM gets rendered so we can pass them as Props into the page directly.

The handler function is of type Handler which comes with the fresh package and can be imported. It brings us the capability of GET, POST, and other methods that are helpful for the call to be successful. render method allows us to return the data fetched from API directly to the base function which contains JSX.

Now we create a basic functional component with PageProps as an argument that has access to data parameters inside it. data contains the fetched API call data we got from the handler function.

After we merge this we can see the list of the universities getting rendered on our screen within milliseconds. With the minimal code changes, we get amazing performance and JSX syntax makes it an addition to the ease it provides in building components.

1*2wlz9HRzHBrlsqDN7Ls1hg

Fresh could be a good approach for using it in the application which is performance requiring and could be used on a large scale after its use cases are built sufficiently. Fresh stands in the category of frameworks/libraries which are easy to understand and have the potential to scale across the fields.

I would be doing some more exploration on fresh and bring out some of more pros and cons of this library over time.

I hope you enjoyed reading my article. Thank you!



News Credit

%d bloggers like this: