Ever Considered why do need to download such a large node_modules file for Next.js , RemixJS, and other frameworks? Just why do they need to download over 100mb to 200mb of data just to build a website and deploy it?
Well, You probably didn't. You have access to the latest PCs and servers, and you don't even need to wait to run your npm i ... Well again, its not your fault; you just don't simply care about it. But a lot of developers don't have access to these resources, and so they end up writing static HTML, or a barebones create-react-app without any good functionality. If you do think you are one of the developers who don't have a decent PC to start your web dev journey, you're at the right place my friend!
Meet Ree.js
What is it? Just a lightweight framework? Hell nah, it's packed with lot more goodies that you didn't imagine you could use so much less storage!
Reejs weighs less than 300kb, at the time of writing (and nearly 2mb if you use the default template, download their dependencies, and turn on Terser Minification!)
What's more?
Ever Heard of URL Imports? If you didn't, here's the long story short: No more NPM. Just straight away importing from a url.
A good example would be like this:
Instead of doing this the classic boring and bloated/slow way:
npm i react
And this in index.js
import react from "react"
You write:
import react from "https://esm.sh/react"
And to add more cherry on top, your same codebase which uses URL Imports, can be ran on browser, without BUILDING! Yes you heard it right!
Any more features?
While Reejs is still in its infancy, it's trying to accomplish every pros of Nextjs, RemixJS and other Frameworks, except removing their cons (ie. building and huge installation size)
As of now, Reejs ships with:
- Twind v1 as its primary CSS engine, with support for SSR CSS generation (beta support thanks to Sastan the maintainer of twind)
- Minifier for HTML, CSS, and JS (Thanks to Terser for being... uh... lightweight? 400kb and its quite good and fast so... you know 😉)
- URL Imports (we welcome PRs and Issues over https://github.com/rovelstars/reejs)
- REX Mode; An automated server engine that knows when to render CSR and SSR based on real life usage (still wip)
- No Builds I guess?
- ReeBlaze 🥏 A fast yet powerful router to take the whole website CSR!
- A good CLI because you deserve it!
Please do note Reejs is in v0 (and v0.3.x to be more specific at the time of writing this) and so we are looking for issues for bug reports, and feature requests over our github repo.
Roadmap:
Please note this are not in order, and its mostly like to be added, but please bear in mind that there's no ETA and if they require building, we would discontinue that feature.
- Image Optimization
- Auto Head Updation
- Some Updates to ReeBlaze to allow more configs
- Reewrite Server to allow serverless deployment
- Not "vendor lock in" for nodejs environments, allow Deno and Bun to run Reejs
- Use a custom Reeact.js implementation that is more lightweight (1kb approx.)
- And a lot more!
- A good docs that's built on top of Reejs itself!
So what are you waiting for?
Consider Using Reejs in your future projects! Its stable enough by the way 😏
Also you can:
- Star Our Repo at https://github.com/rovelstars/reejs
- Join Our Discord Server at https://dscrdly.com/server
Top comments (10)
The idea is to load all the stuff through CDNs and the like to load more code and to open you application to the hackers around in case your url gets compromised?
Remember GIGO? Garbage In - Garbage Out. If you are the one compromising your own website with some XSS vulnerability, it's none of our problem. But if its our problem, you should consider making an issue/pr to fix it.
And about CDN, the initial SSR render won't hydrate unless there's any activity on user's end. Currently it downloads less than 20kb of JS for hydration (excluding your page size itself.) On top of it, the custom router keeps the page cached and be able to view the page offline. I am thinking of moving over to a custom react/jsx like solution that can be like 1kb of js file so you devs can get more budget for your network bandwidth. Other than that, create-reejs-app repo hits 100/100 lighthouse score, which must be enough to keep you happy 😉
You rely on foreign URLs or am I wrong?
Compile on the fly is often the first step - but not the last - to learn a new frontend framework like Vue or Solid, nothing really new here. What's your selling point?
Yes we do rely on foreign URLs, and if you think it that way, every dependency you are installing are relying on npmjs.org registry ;)
And just because most of the frameworks are having a compilation step doesn't mean its good and the DevX is good...
My selling point would be:
Yes but only during build and after test, not each second of the app lifetime.
Not having a compilation step is in the first place a good thing - thats the reason I do not like TS - but that comes with a cost. Your code is open to the world, should be slower because not optimzed and can easier be compromised due to the various sources you are using and maybe gives you more than you need, because again not optimized, minmized and so on.
Or am I missing something?
I do not use nextjs nor react. I am running with Vue or Solid, but without TS.
Minifier is opt-in, it downloads 400kb~ size library named Terser which is pretty efficient, and it keeps the minified files cached in memory. Also you should not be adding server side stuff in the part of the pages, but if you do, we have experimental support to remove those part out, when paired with:
/* REEJS_SERVER_SIDE_START */and respectively/* REEJS_SERVER_SIDE_END */, any code between them will be cut off when serving those pages. But the codes will be executed during ssr.Neat!
cool🤘
Bookmark this, read in detail later.
Can't wait