This post is about How Blog-Doc Lost 138 Dependencies.
Once in a while, a crazy idea installs itself in your mind, like Blog-Doc.
Blog-Doc is not only The Simplest Node.js CMS & SSG, but it's also The Best!
I know that my word is not enough to prove the above statement, but numbers and purpose are!
Blog-Doc's beginning
It all started with my tutorials about templating a Node.js app with EJS and turning it to a simple SSG with the ability to write content in Markdown.
Then, I decided to combine those tutorials just as a proof of concept, and this is how Blog-Doc was created.
I created over the years some websites, themes, plugins, web apps... but nothing like Blog-Doc!
Each time I work on it I learn something new and find an aspect that can be improved.
You can call me crazy, but it's like the code is asking to be better because it can!
A proof of concept
Since Blog-Doc was here, as an SSG, I had to prove that it can be used and modified in any way a developer wants to.
I was using 11ty with Nunjucks to generate the static version of my personal blog https://lebcit.github.io/.
So I've turned the back-end of my static site to Blog-Doc with EJS without any hesitation and it was an easy task to do.
I felt proud and victorious, with some tears in the corners of my eyes, after republishing my site with Blog-Doc.
It's not everyday that a developer's idea sees the light...
An SSG with a CMS
To build a static site with a Static Site Generator you should read a lot of documentation to understand how everything is related and dive for days in your IDE to structure the back-end just to output some HTML, CSS and JS.
Moreover, if you don't have some back-end knowledge, you will not be able to use it or spend hours over hours searching, reading and trying to get the job done...
Coming from a long journey as a WordPress developer to Node.js, I wanted any user without any coding knowledge to be able to use Blog-Doc.
Not only I created an integrated Content Management System for Blog-Doc, but I've also made it user-friendly.
Blog-Doc's administration is a front-end application, yes a front-end one, that can be protected like any other app so don't freak out.
With the CMS in place, I've written some articles about it by effectively using it for the task and it worked like a charm.
Again I felt more proud, without tears this time, especially since I'm not aware of any SSG having an integrated CMS.
Perfectionist by default
I'm the kind of person that doesn't sit and relax when the code works even if it's good, I'm always in the quest of improving.
One of my strict coding rules is that the console of the browser must not output a single warning or error, otherwise, the code isn't usable.
I was not satisfied by the design of Blog-Doc's administration so I've modified it completely to a more modern one using Tabler.
Then the tiny unhappy developer sitting in the back of my head said:
- "Really! Are you serious? Go find something else to be passionate about it, you're using a cannon to kill a fly!"
That time, he just remembered a meme about Node.js developers using a tremendous amount of modules to achieve simple tasks...
So the challenge took place! I had to reduce significantly the number of dependencies that Blog-Doc relies on and keep all of its functionalities!
Gasworks
With all due respect to the time and hard work of every developer who made a Static Site Generator with Node.js, including the previous versions of Blog-Doc, those are gasworks!
I offer my sincerest apologies in advance to each one of these developers, but an app is not supposed to be a gasworks...
To better understand what I'm talking about, I'll briefly share with you the research that I've made starting with the last previous version of Blog-Doc.
N.B.: The last previous version of Blog-Doc can be found under the following GitHub repository https://github.com/LebCit/blog-doc-space.
To get the size of a node module, you can visite BUNDLEPHOBIA
To visualize the dependencies of a node module, you can visit:
Blog-Doc
The dependencies of Blog-Doc were as follows:
Looking at the package.json file of Blog-Doc, a Node.js novice would say that it has 7 dependencies, an amateur would say that it has 52 dependencies after looking to the direct dependencies shown on each dependency page on NPM, but an advised user would click on each direct dependency to see if it also relies on other dependencies.
This is of course a time killer and this is why tools like visualization of npm dependencies exist.
To spare you the time, after looking at each dependency, Blog-Doc had 145 dependencies and this is not acceptable!
Some of them may stop being maintained or incompatible with other packages and I'll find myself debugging, losing time and energy over a gasworks that was never intended to be one...
Other SSG
Looking at the most used rendering frameworks, I've searched the number of dependencies of each one and was completely shocked:
- Astro ---> 450
- SvelteKit ---> 26
- Next.js ---> 26
- Docusorus ---> 1009
- Remix ---> 1
- Nuxt ---> 592
- Eleventy ---> 210
- Gatsby ---> 1246
Do you think that this is normal?!
I think that this is insane!
JavaScript is not about accumulating a gigantic number of lines on top of each other to produce a working application!
Starting from ES6 and going forward, the essence of JavaScript is to write less and do more!
From my point of view, Remix is the only one in the list that is usable but I'm not a fan at all of JSX or JS front-end frameworks.
Long story short
After a long week of research, I've concluded that Blog-Doc dependencies could be reduced to 7 and 7 only!
That's great news, but now I had to rebuild Blog-Doc from the ground up.
Once done,with a much better code organization, I was surprised to see that I'd written much less code compared to the last previous version.
At this point, the little man in the back of my head said:
- "Knowing that I'm still unsatisfied, May The Code Be With You!"
The actual dependencies of Blog-Doc are as follows:
As you can check it out by yourself with ease, Blog-Doc is now relying on only 7 dependencies to output your static site.
Upcoming
You can find the newest version of Blog-Doc under its GitHub repository https://github.com/LebCit/blog-doc.
The little unsatisfied man in the back of my head intends to:
- Reduce the number of dependencies Blog-Doc relies on.
- Enhance Blog-Doc's administration and functionalities.
- Create a design without any CSS framework.
- Use TinyMCE instead of TOAST UI Editor.
- Improve, improve and improve 😉
Because ALL YOU NEED IS LESS!
