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!
