Table of Contents
WHAT IS ALEPH JS?
Aleph JS is a framework that is a framework for Deno JS which was inspired by Next JS. Aleph JS is a front-end framework that uses EMS system to import tags through scripts instead of using Webpack or bundlers with Deno React. The Compact-on-Module system allows you to readily and Aleph in your application. What’s different about Aleph JS than Next JS is that you don’t have to install and recompile every module when there are changes. Aleph only recompiles the module that it detects is changed through the HMR (Hot Module Replacement) which is directly rendered on the browser without the unnecessary need of change.
Aleph uses Deno React Fast Refresh which allows you to change the react components in the runtime without loosing their states. This enables the developer to code as well as view the changes simultaneously. This framework works in Deno, an improved runtime for JavaScript and Typescript. Alpeh is not dependent on package.json file for running the application and no “npm install” is needed to get node-modules, all the dependencies are managed by Aleph JS on its own.
PREREQUISITE
React
Deno 1.4+
Node JS
vscode with Deno extension
Getting started
Installing Aleph JS through the following command.
deno install -A -f -n aleph https://deno.land/x/[email protected]/cli.ts 
aleph init hello
cd hello This will create a project of aleph in your application.
Start the application in the development mode by typing in the command
aleph dev aleph start
aleph build
aleph –h SSR(SERVER SIDE RENDERING)
To make the rendering faster, Aleph js pre-renders every page in your website by creating HTML for each page beforehand. This is usually done at the client-side which slows down the rendering as client side is slower compared to server side.
This is used to improve the SEO results and increases the performance. As the HTML is not enough to make the website more interactive, each HTML is associated with JavaScript, which “kicks-in” when the page is loaded. Through this process which also known as hydration, the JavaScript code necessary is minimized and only associated if necessary.
You can disable the SSR function in aleph.config.js
export default {
"ssr": false,
} SSG (Static Side Generator)
Another marvelous feature Aleph provides is it converts your pages to static pages, which will increase the proficiency and speed of the page loading. Static pages can also run on standalone servers and the HTML and JavaScript is rendered with extremely fast speed.
If your application has dynamic routing enabled, then you can provide static paths in your aleph.config.js file.
export default async () => {
const posts = await (await fetch("https://.../posts")).json()
return {
ssr: {
exclude: [...],
staticPaths: posts.map(({id}) => `/post/${id}`)
}
}
} 