Aleph.js, a React framework for server-rendered applications in Deno, is now available through an alpha release. Aleph makes many of Next.js’ core features available in Deno environments: zero-config server-side rendering, static site generation, file-system and API routing, and more. Aleph uses the standard EcmaScript Modules (ESM) import syntax and does not use a bundler in development. Aleph also provides hot module replacement with React Fast Refresh.
Aleph.js is heavily inspired by Next.js, the latter which self-describes as a React framework for production. Like Next.js, Aleph provides productivity features for a better developer experience. The current alpha version of Aleph provides a page-based routing system (with support for dynamic routes), API routes, route-based internationalization support, static site generation, pre-rendering by default (with configurable server-side rendering), client-side routing, CSS and Sass support, and React Fast Refresh support. Developers write a web application as a set of pages and APIs, with each page being implemented with a React component.
Unlike Next.js, Aleph works with Deno, a recent alternative to Node.js that seeks to remediate perceived Node’s weak points. Deno, which shipped its first major version earlier this year, supports TypeScript out of the box. Deno has a stricter security model that disallows any file, network, or environment access, unless explicitly enabled. Deno does not use a package.json file, node_modules directory, nor CommonJS modules. Deno leverages instead EcmaScript Modules (ESM) (added to the JavaScript standard through ES2015) and imports dependencies as URLs.
Aleph’s documentation explained one productivity advantage of Aleph’s usage of Deno modules that is observed in development:
Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just needs to re-compile that single module; there’s no time wasted to re-bundle every change.
A simple example of Aleph code using Deno is as follows:
import React from "https://esm.sh/react@17.0.1"
import Logo from "../components/logo.tsx"
export default function Home() {
return (
<div>
<Logo />
<h1>Hello World!</h1>
</div>
)
}
Aleph supports import maps through a dedicated import_map.json file in the application root directory. Import maps is a proposal from the Web Incubator Community Group (WICG) that allows resolving bare import specifiers. With import maps, Aleph may replace import React from "react" with import React from "https://esm.sh/react@16.13.1".
Aleph.js requires a modern browser to support ESM modules and dynamic imports during development. Modern browsers include the versions of Chrome >= 61, Edge >= 16, Firefox >= 60, Safari >= 11, and Opera >= 48.
Developers may use the Deno runtime to compute data at build time and pass that data to a page. Some frameworks, like Dojo, call this approach build-time rendering. Next.js provides the getStaticProps and getServerSideProps methods to fetch data at build time or on each request.
Developers can customize 404 pages. Developers can also use custom <App>, <Head>, and <Scripts> components to control the page initialization (global layout or styles), and customize the contents of the <head> and <script> tags on a page. An example is as follows:
import React from "https://esm.sh/react"
import { Head, Scripts } from "https://deno.land/x/aleph/mod.ts"
export default function App({ Page, pageProps }) {
return (
<>
<Head>
<title>Aleph.js</title>
</Head>
<Scripts>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1234567890"></script>
<script>{`
window.dataLayer = window.dataLayer || [];
function gtag(){
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-1234567890');
`}</script>
</Scripts>
<Page {...pageProps} />
</>
)
}
Aleph is still in alpha and in active development. Aleph plans to support older browsers like IE11 in production with a polyfilled nomodule.js that uses SystemJS to import modules. Further work concerning PWA and AMP support is also ongoing.
Developers may access Aleph’s documentation site online. Aleph is open-source software distributed under the MIT license. Contributions and feedback are welcome and should abide by Aleph’s contributing guidelines.