Welcome to the dark side. Ree.js awaits you!
Tags: webdev, javascript, react, opensource
Published: 2023-10-05 08:32:16

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!

{% embed https://github.com/rovelstars/reejs %}

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

![Oh yea, another framework haha](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deraqiuq2y4ey5mkj84k.png)

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

![*cough cough* Nextjs hello world app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rutdd866vu2oirrx1frh.png)

> *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](https://media.tenor.com/M5iRLsgqYH4AAAAM/shaq-cat.gif)

## 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:
- @aidenybai 's [Millionjs](https://million.dev)
- [Unplugin auto import](https://github.com/unplugin/unplugin-auto-import)

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

![wow](https://media.tenor.com/o14noAVBO-kAAAAi/tasting-whoa.gif)

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

export default defineConfig({
  // ...
});
```
> **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.
```sh
reejs x https://examples.deno.land/color-logging.ts
```
- `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](https://hono.dev)) 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](https://media.tenor.com/vvEVqOkSJTEAAAAM/hecker-hecker-beluga.gif)

So you want to run Reejs on your mobile right? Check out [termux](https://termux.org), 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](https://github.com/rovelstars/reejs/issues). Feel free to fix/create any new issues!

If Reejs doesn't work out for you, try doing this ree-tual:
![ritual](https://media.tenor.com/KAG0nKc-HqcAAAAM/rare-reeeeee.gif)

---

Alright. That's probably a lot of stuff you went through. If you feel interested enough, consider checking us out: [website](https://ree.js.org) or [star our repo!](https://github.com/rovelstars/reejs). 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!](https://media.tenor.com/AfEYowNklBkAAAAM/gold-star.gif)