You probably heard about Deno already. Well, it’s great to see how quickly the community brings new frameworks and libraries to life. And that was the case with Aleph.js, the React Framework in Deno.
Aleph.js is, by definition, the JavaScript framework alternative for the Deno universe (one of Node’s competitors) for developers who want to integrate it on React applications.
It’s still very young, with a couple of open issues and releases to come at GitHub, however, it’s very promising.
Aleph.js Overview
Aleph.js is not just a React alternative. Developers have compared it to Next.js because it was inspired by Vercel’s framework.
According to Aleph.js:
“Aleph.js gives you the best developer experience for building modern web applications: TypeScript in Deno, ES module imports, file-system routing, SSR & SSG, HMR with Fast Refresh, and more. No config needed.”
In other words, it is not only about React development, but about the entire application development lifecycle, which includes routing, module handling, hot reloading, and more.
Because Aleph.js is Deno-based, it shares lots of its features, such as security. In order for a portion of code to access a given resource, such as an environment variable or a file in the system, it has to explicitly ask for permission first. That’s part of Deno nature.
It also dispenses the use of bundlers like Webpack for ES6-like conversions or import handling. Aleph.js itself handles this simply and automatically.
Let’s take a closer look then at its main features.
Routing
Taking a different approach from its main competitors, Aleph.js introduced a new generic routing system for webpages as well as the endpoints of your backend APIs. The system is based on the filename of your code files.
Rather than customizing a bunch of endpoint URLs, this pattern enforces developers to think about their endpoint upfront. Working with direct and clear naming is always better for purposes such as searching within the projects.
It also can handle nested or hierarchical routes, which gives you even more flexibility to decide which routing system is better for your current module in the application.
More than that, you can easily set up a routing mechanism that can dynamically figure the routes based on your logic.
Internationalization is another alternative, very important, by the way, that Aleph.js introduces straightforwardly via its built-in locale settings.
Support for SSR/SSG
Remember that we mentioned Aleph.js was inspired by Next.js. Well, that’s why it enables easy server-side rendering (SSR) as well as static-site generation (SSG). Those seem to be essential parts of modern web frameworks that we can’t live without anymore.
They’re completely disconnectable, if you will.
The SSR option allows you to pre-render pages on the server side and, by consequence, increase the overall performance of your requests.
The SSG option creates a sort of static website that can be run anywhere. However, it relies on the JavaScript code autogenerated to emulate what the client-server version would do. Obviously, there are limitations here in terms of dynamic mechanisms that you’d have available at the SSR option.
In order to have the SSG fully working you may need a bunch of routes defined as static paths, such as:
export default async () => {
const users = await (await fetch("YOUR_API_HERE/users")).json()
return {
ssr: {
exclude: [...],
staticPaths: users.map(({id}) => `/users/${id}`)
}
}
}
As you can see, the adoption of async JavaScript is also a requirement to use this option.
Hot Reload
This feature is called HMR (Hot Module Replacement) and works by allowing for the update of the Aleph.js application without the need for page refreshing when you’re coding.
React also enables a similar feature in which any changes to the code files automatically trigger the update in the browser.
The changes include JavaScript, TypeScript, Markdown, CSS (and its respective pre-processors, such as Less or Sass), etc.
Setup
The installation process is very simple. Of course, you may already have Deno installed on your machine. That’s the only requirement.
Pay attention that Aleph.js also needs a minimum version of Deno of 1.6.3, otherwise things may fail.
Then, run the following command to install it via Deno:
deno install -A -f --location=http://localhost -n aleph https://deno.land/x/aleph@v0.3.0-alpha.1/cli.ts
The page is smart enough to give you the right instructions based on your current OS.
If the installation went successful, you may check the Aleph.js version via the following command:
➜ aleph -v
aleph.js v0.2.28
And to start a new application with it, or add it to a Deno application you already own, run the following commands:
➜ aleph init hello-aleph
➜ cd hello-aleph
That should generate a files and folders structure:
├── api
│ └── counter
│ ├── [action].ts
│ └── index.ts
├── app.tsx
├── components
│ └── logo.tsx
├── import_map.json
├── lib
│ └── useCounter.ts
├── pages
│ └── index.tsx
├── public
│ └── logo.svg
└── style
└── index.css
To start up the application, simply run the following command:
➜ aleph dev
The command should start downloading all the Deno dependencies for the scaffolded project and start the application at http://localhost:8080/.
Starting up the Aleph.js application
Aleph.js hello world application
Conclusion
It’s important to remind you all that Aleph.js is a building framework. Although we have an alpha version going on, it doesn’t mean the framework is production-ready, especially for medium-to-big projects. So be careful when choosing it for your purposes.
Although it is new, Aleph.js is a very promising framework with lots of awesome features still to come with time. Let’s keep an eye on it!
