DEV Community

loading...
Cover image for How to `useDeno` in a React Component?

How to `useDeno` in a React Component?

ije profile image X. ใƒปUpdated on ใƒป3 min read

Hi, let me introduce you to Aleph.js, a React Framework in Deno, inspired by Next.js.

Different with Next.js, Aleph.js don't need webpack or other bundler since it uses the ESM imports syntax during development, like Vite and snowpack. Every module only needs to be compiled once and then cached on the disk. When a module changes, Aleph.js just recompile that single module, there's no time wasted re-bundling every changes, and instant updates in the browser by HMR(Hot Module Replacement) with React Fast Refresh.

Aleph.js works in Deno, the modern and secure runtime for JavaScript and TypeScript. No package.json and node_modules directory needed, all dependencies are imported as URL and managed by Aleph.js:

import React from "https://esm.sh/react"
import Logo from "../components/logo.tsx"

export default function Page() {
    return (
      <div>
        <Logo />
        <h1>Hello World!</h1>
      </div>
    )
}
Enter fullscreen mode Exit fullscreen mode

Features

  • Zero Config
  • Typescript in Deno
  • ES Module Ready
  • Import Maps
  • HMR with Fast Refresh
  • File-system Routing
  • Markdown Page
  • Built-in CSS(Less) Support
  • SSR/SSG
  • Plugins

Why Create It?

Well, as a full-stack developer and a user of Next.js, I use React in almost all of my projects and feel good with Vercel.

But there are still some defects, I would call it, let me down:

  • Over-complicated Webpack
  • Dirty AMD/UMD/CommonJS
  • Unnecessary package.json and ts.config.json
  • node_modules Hells

Maybe those are not real Pain Points for us, always can find a polyfill, but we deserve the best tools to make our life more easy.

Just as vite,snowpack,esbuild,deno,swc do: explores the best developer experience.

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust. ยน

  • run javascript(es2020)/typescript without any config
  • Permissions(--allow-read, --allow-write, --allow-net, etc)
  • Built-in high performance tools(bundler,fmt,doc,lint) written in Rust
  • Browser compatibility(fetch, window namespace, etc)

For me, Deno is a prefect runtime to run full-stack frameworks, so I initiated Aleph.js.

"useDeno"

Most concepts of Aleph.js are same with Next.js, but add some different features I always wish Next do.

For exemaple, In Next.js, two functions called getStaticProps and getServerSideProps are used by the pages to fetch data at build time(SSR) or on each request. This solution isolates the data and view likes different roles of the back-end and front-end.

But for me, i prefer use Hook to fetch data during SSR, just like Aleph.js do: a hook called useDeno provided that allows you fetch data at build time(SSR) in a component with Deno runtime, that's more React Style likely:

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

or fetch data asynchronously:

import React from "https://esm.sh/react"
import { useDeno, useRouter } from "https://deno.land/x/aleph/mod.ts"

export default function Post() {
  const { params } = useRouter()
  const post = useDeno(async () => {
    return await (await fetch(`https://.../post/${params.id}`)).json()
  })

  return (
    <h1>{post.title}</h1>
  )
}
Enter fullscreen mode Exit fullscreen mode

How It Works

The useDeno hook will receive a sync or async callback(the first parameter), during the build time(SSG) each callback of useDeno will be invoked and then cache the returned data, after in the browser the callbacks of useDeno will be ignored and the cached data will be used, that's it.

More usages please our documentation: https://alephjs.org/docs

Status

Aleph.js in alpha stage, not ready for production. You can check our website which built by Aleph.js, and welcome to take a shot.

Discussion (6)

pic
Editor guide
Collapse
leob profile image
leob • Edited

Impressive! Do you consider it "production ready" at this stage?

Well, no Webpack needed, that's pretty revolutionary ... but on the client side it requires a "modern" browser that supports ES6 and import natively, right?

Any idea what percentage of users would be excluded by that requirement (based on market share of the various browsers)? Although I saw that you'd use a polyfill for that.

And how "compatible" is this with Next.js, how easy would it be to port a Next.js app to Aleph.js?

Collapse
ije profile image
X. Author • Edited
  • sorry not production ready for now i think, still working on it. but you can give it a try.
  • for older browsers like IE 11, we are considering using system.js instead of esm
  • we don't have a plan to add compatibility with next.js, but many concepts are similar
Collapse
ivanjeremic profile image
Ivan Jeremic

Wow respect! I like the useDeno hook it makes really more sense and fits perfects with the new React hook ecosystem I will check it out!

Collapse
ije profile image
X. Author

welcome!

Collapse
alfredosalzillo profile image
Alfredo Salzillo ๐Ÿบ

Why call it useDeno and not useSSR? And how it works if aphel is used in no SSR mode?

Collapse
ije profile image
X. Author

useDeno means the hook will be invoked with deno namespace, useSSR is kind of fuzzy, and no you should not use thie hook in SPA mode.