DEV Community

Cover image for Welcome to the dark side. Ree.js awaits you!
Ren Hiyama
Ren Hiyama

Posted on

Welcome to the dark side. Ree.js awaits you!

Do you have your old computer/laptop lying around? Or atleast your (not so new) phone nearby? Cause get ready, we are jumping in for the lightweight yet performant framework of all time!

Meet Ree.js, a web framework for both the next generation and the older generation of desktops and servers, where developing products and services for your clients could never have been faster!

GitHub logo rovelstars / reejs

Make Sites Faster, without the need of building anything!

Ree.js

Finally the best of both worlds: Fast build times and a great developer experience 😎

GitHub Sponsors GitHub contributors npm GitHub Repo stars GitHub forks GitHub issues X (formerly Twitter) Follow X (formerly Twitter) Follow

Ree.js is a library that makes web development faster and easier by providing features such as URL Imports, JSX support, and server-side rendering. URL Imports are a way of importing modules from URLs instead of local files or npm packages. This can reduce the download size and improve the performance of your web applications. It doesn't hurt to use the latest features for better performance, right?

📖 Read Documentation

Documentation is available at here . If you find any mistakes, please make an issue. Incase you have any questions, please ask them on our Discord Server

✒️ Contributing

We welcome all contributions. Please read our CONTRIBUTING.md

🛣️ Roadmap

  • Reewrite Packit to be modular
  • Packit in dev mode should run hono server in dev mode, and dynamically transpile & load files on a request.
  • Fix development…

But wait!!
There's more! Surely you're bored of new "faster" frameworks right?

Oh yea, another framework haha

If you are a veteran webdev/nodejs dev, you might know node_modules meme

*cough cough* Nextjs hello world app

cough cough Nextjs hello world app

What if I could tell you that Ree.js even is too lightweight? Below 100mb? Nope. Below 10mb? Naw man... 2mb? No!
create-reejs-app with preact feature enabled just takes 1mb! (How cool is that!)

So how did we achieve just small size?

heck yea babe

URL Imports

If you have been reading some of my articles last year, you might have seen Reejs supporting URL Imports (yes, using dependencies directly from the internet, like Deno & Browsers!). Think of it as a new way to manage your dependencies. The dependencies you download and use are minified, build target set to your desired runtime and you only download and use files which is only needed! (No more bloatwares like you see on npm packages!)

But wait... Isn't writing URLs directly in code bad for health right? Yes, that's why Ree.js supports import_map.json to declare your dependencies!

Packit

Think of Packit as a code generator, whose main job is to read files, run plugins ("readers", "writers", "transpilers" are literally secondary!) and write codes to a specified file. We have even managed to import and make use of some vite/rollup/unplugin plugins too! Here are just a few of them that just works:

If you are feeling high, you can even turn on vite mode ⚡️⚡️

wow

//packit.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  // ...
});
Enter fullscreen mode Exit fullscreen mode

You don't need vite installed. That's the best part.

Packit will turn on vite mode, and the CLI UI will change to Vite's one. Rest assured, Packit's API is still the same!
(P.S. We currently don't have Hot Module Reload available. Feel free to contribute!)

Support for multiple runtimes!

We aim to run Reejs on:

  • Nodejs
  • Deno
  • Bun And to run reejs based websites on:
  • all the above mentioned
  • cloudflare edge/pages
  • fly.io
  • Deno Deploy
  • and any other serverless runtime!

Alright. Let me show some cool tricks Reejs comes with:

  • x command - Run any scripts off the internet.
reejs x https://examples.deno.land/color-logging.ts
Enter fullscreen mode Exit fullscreen mode
  • repl command - Start a Repl (Works only on Nodejs currently)

Currently Reejs is nearly production ready. Infact that its already faster than Nextjs/Expressjs apps (Thanks to Hono) says a lot! We are currently looking for final bug fixes and more performance improvements.

On my 12yr old PC, Packit can prepare your website within 109ms whereas Vite takes 513ms to just boot up, and another 1.2s to serve the website, and Nextjs (SWC) takes 10s for the initial boot, and another 17s to serve the site. Now compare that with today's modern fast PCs and macbooks, you are sure gonna get a lot of hella performance 🔥🔥🔥

Oh wait, I forgot to even mention you, Packit is pretty much configurable. You can even modify its internals, thanks to monkeypatch, (just name your plugin after one of the internals' name, and you can replace it.) if you want, you can use any other library yourself. ElysiaJS exists, that's a cool Hono alternative, if you're feeling high as a hecker, maybe go and make your own packit plugin that uses it!

hecker

So you want to run Reejs on your mobile right? Check out termux, install Nodejs v18+, and follow the reejs install instructions on our website linked below. Thanks to Reejs' low memory overhead, it works flawlessly smooth on any old midrange phone!


Reejs will soon go production ready once we tackle all the issues. Feel free to fix/create any new issues!

If Reejs doesn't work out for you, try doing this ree-tual:
ritual


Alright. That's probably a lot of stuff you went through. If you feel interested enough, consider checking us out: website or star our repo!. Hacktoberfest 2023 is going on, feel free to work on any issues mentioned there, or maybe try using Reejs on your next website, and submit any bugs that you find! And also feel free to ask questions in the comment section below!
Bye then!

Byee!

Top comments (0)