Blog

Aleph.js — A New React Framework in Deno

ByPayal Mittal
April 13th . 5 min read
Aleph.js — A New React Framework in Deno

Only a few months back, a new JavaScript framework came into existence - Aleph.js. It offers you the best user experience for building modern and feature-rich web applications.

Aleph.js is a React framework in Deno, inspired by Next.js. But in contrast to Next.js, Aleph.js doesn’t need webpack, parcel, or any other bundler for that matter as it uses ESM syntax by default.

With Aleph, you can build React applications using Deno properties. The key benefit of this is that you don’t have to use Webpack to import dependencies anymore as all the dependencies are imported using ESM URLs. Also, you no longer have to write the package.json files or install packages to node.module directory.

Whenever a module changes, Aleph.js re-compiles only that particular module. No time is wasted unnecessarily re-bundling every module, every time it changes.

Here are certain interesting features of Aleph.js that have become the talk of the entire developer’s community -

  • Zero-configuration framework
  • By-default supports TypeScript
  • Support for SSR and SSG
  • Built-in CSS support
  • ES Module Ready
  • Import Maps
  • HMR with Fast Refresh
  • File-system Routing
  • API Routes
  • Built-in Markdown Support

Here’s the tip- if you have worked with Next.js, you would quickly get used to Aleph as they both have a lot of things in common.

Why Aleph.js?

There are many features of Aleph that are in the best interests of the developers. Let’s get going with them -

Server-Side Rendering -

Aleph supports server-side rendering and pre-renders every page, generating an HTML for each page instead of relying upon the client-side to do all the work.

The fun part is that each HTML page needs only a small amount of JavaScript code. When the code runs, it enables the page to become fully interactive. It results in better SEO and performance of the website.

You can disable the SSR feature in aleph.config.js from specific paths, but it may cause the pages to run slowly.

export default {
  "ssr": {
    "exclude": [
      "/path/from/root"
      "/path/from/root/two/"
    ]
  },
  ...
}

Static Site Generation (SSG) -

SSG is another wonderful feature of Aleph.js where it can convert your pages to static ones, hence, increases the page-loading speed. The generated static standalone site can run on any server but depends upon the client-side to do JavaScript-heavy lifting.

SSG also needs you to redefine dynamic routes as static paths before generating the static site.

HMR with Fast Refresh -

With full built-in support for Hot Module Replacement (HMR), it can facilitate instant updates in the browser without refreshing the page. All you need to do is to refresh the Aleph application and the change will update the page in the browser.

It also introduces a new concept of ‘Fast Refresh’ which is the replacement of react-hot-reloading. It allows you to change the react components in runtime without affecting their states.

Aleph supports HMR out-of-the-box for JSX/TSX, CSS, Markdown, Sass, CSS Modules, etc. The HMR listens to the file changes and once it gets a signal from the server, it re-imports the updated module.

The old CSS modules will be removed once the new one is applied. For React components, the fast refresh will re-render the component view without losing the component state.

Asynchronous Import -

You can also import a component in an asynchronous or lazy manner when you don’t feel like rendering it during SSR or it is too large in size. The import component of Aleph.js enables you to import components asynchronously, as given below -

import React from "https://esm.sh/react";
import { Import } from "https://deno.land/x/aleph/mod.ts";
export default function About() {
  return (
    <div>
      <Import
        from="../components/logo.tsx"
        name={"Logo"}
        props={{ size: 100 }}
        fallback={<Loading />}
      />
      <h1>About</h1>
    </div>
  );
}

useDeno Hook -

While Next.js uses the functions getStaticProps and getServerSideProps to fetch data at build time and at each request respectively, Aleph uses a mixed solution.

Aleph.js provides a react hook called ‘useDeno’ which is used to fetch data at build time (SSR) with Deno runtime -

import React from "https://esm.sh/react";
import { useDeno } from "https://deno.land/x/aleph/mod.ts";
export default function Page() {
  const version = useDeno(() => {
    return Deno.version;
  });
return <p>Powered by Deno v{version.deno}</p>;
}

The useDeno hook receives a callback as the first parameter and each callback will be invoked at build time and the returned data will be cached. However, the callbacks passed to useDeno will be ignored in the browser and instead, the cached data is used.

Get Started with Aleph.js -

Before you get along with Aleph.js, you would need to have -

  • Deno version 1.6.3 or higher installed on your device
  • VS Code with Deno extension

After having installed Deno, you can install Aleph through the command -

deno install -A -f -n aleph https://deno.land/x/aleph@v0.2.28/cli.ts

You can start creating a new app using -

$ aleph init my-aleph-app

Start the application via -

$ aleph start

By default, the application will start at http://localhost:8080.

You will find a whole lot of auto-generated files and structural directories related to the application inside the my-aleph-app directory -

my-aleph-app
 ├── app.tsx
 ├── components
 │ └── logo.tsx
 ├── import_map.json
 ├── pages
 │ └── index.tsx
 ├── public
 │ ├── favicon.ico
 │ └── logo.svg
 └── style
 └── index.less

In the above-given folder structure, the pages/ folder stores the application pages, the public/ folder is for the static assets, the components/ folder for shared react components to use in the pages, app.tsx file is an entry point for the Aleph application, and the style/ folder is to store the CSS code.

Know more about Aleph.js here.

That was all folks! Also, stay tuned with us for more such articles.

Thanks for reading!!

Share:
0
+0