How to build a website without a bloat

This article is about todays internet (2019) and how it's polluted with bloat in name of all the Javascript frameworks and libraries which we use even if we don't have to. Simultaneously we forget basics which results in the internet of bloat.

I'm sure you have heard of React or Angular or any other Javascript frameworks. You might also be aware of Node JS. If not all of these are massive Javascript frameworks that were developed for web developers as a tool they can use to build big web applications. These libraries gives the application it's functionality.

You also might heard of Bootstrap or Semantic UI or Onsen UI or any other. These are CSS frameworks which gives the application it's look and (in most cases) responsiveness. These frameworks also brings a theme which makes sites build on top of them themable. But themable isn't good everytime. When Bootstrap was released in version 1 all sites build on top of it looked exactly the same. Bootstrap got quite popular which yielded a lot of visualy very similar websites. The situation now is much better. Bootstrap has tons of themes and you can quite easily build your own. The thing here is you have to get into the themable system, learn it and then start creating your website look.

Then Github is full of another "CSS frameworks" which live for less than a few years. They are usually one man show and sites build on top of these libraries are basically dead. No one is gonna mantain whole framework bacause it's bundled in his project. There might be forks and minor updates/bugfixes but 99% die soon too.

So... so far you have 2 choices. To choose big fat library with tons of dependencies of potentionally already obsolete libraries. Well that's not what we want to use if you are building a website. Not a web app but a website. Well.... there might be 3rd option. The worst one. To come up with your own framework that will quickly become option 2. So what to do now?

No, the answer is not jQuery (seriously stop using that ancient lib). The pre-answer is to use tiny/lightweight, well known, stable UI toolkits. More than UI they are like layout + typography toolkits. They lack a theme or Javascript widgets. All they come with is just a set of few CSS classes you work with just like they are blocks. Big advantage is once they are in a state we could call 1.0 they are pretty much stable, production ready and we don't have to worry about 2.0 which will break all the things. In core, they are simple CSS which once it's coded we don't have to update them every week and move forward rapidly. CSS 3 is pretty much stable. But of course there might be bugfixes or new styles so 1.0 is not always the final version but also not the obsolete one in short period of time. These frameworks are for example Tachyons or Basscss.

Let's talk a bit about the fatties like Angular and React. Lets look at Angular first in a few points:

  • Angular 2.0 was released on September 2016
  • Angular 7.2 was release on April 2019
  • 8.0.0 is supposed to be released in mid 2019

As you can see Angular is pretty wild library. Well Angular is backed up by Google so there might be connection between Google approach and Angular wild ride. Who knows.

I don't have personal experience but my friend use Angular since 1.x. I remember when he was on his hotel reservation app. He spend ~1 year of development based on 1.0. When he was done he told me that the app needs to be rewritten because new Angular version of changed almost everything. Well rewriting apps is not how you want spend your code time on. Don't you?

This is for sure just one experience so I cannot be the judge. On the other hand introducing many breaking changes every year seems (to me) like the library doesn't have solid basis which can be build on. Yes... progress is good and needed but each turn you make should be less and less turn-over style and should get you closer and closer to the dream you have (in this case perfect UI library).

The second big fish in pond is React. React is backed by Facebook which utilizes it. Heavily. This is big advantage for each library that is backed and used a lot in the same time. It brings constant feature flow, bugfixes and kinda solid roadmap. Why solid? Imagine rewriting every year.

React is not only web UI library (toolkit). It aims higher. I'm talking about React Native. In short - it's a framework for building native mobile (iOS, Android) apps using React. Well no WebView running as whole mobile app rendering some web page.

Seems like React is not just a library. It's more like UI language which contains functionality, look and is kinda flexible. Therefore you can "process" it with "mobile tool" and get native Android APK. Or iOS APP. Or process it with "web tool" and get web app. If we should ever get to the point where we have universal language/toolkit where we can describe UI + functionality and then generate the app no matter what target platform you chose (web, desktop, moble, ...) React seems to be pretty close to this utopia.

Yet we have to remember it's massive library once you rely on it's hard to get off that train and not get your legs broken.

So if you are not building big web app but you still want to use UI toolkits and JS widgets what you should use? Let's say you want to create your personal website. Just like this one but with some widgets (Javascript components). Let's also assume you don't want to maintain 10 tools like Webpack or any other Node modules (you get the idea). So how to use modern stuff and keep it simple (maintainable in one man)?

Templates. I write templates manually for each page - even this one. I prefer Pug over HTML. Pug simpler and more readable. It supports template inclusion and some basic logic. Perfect fit for "keep it simple". Yes... if you create a basic templates likes "head", "menu", "footer" and then you can actually write content templates like "home" or "gallery". Need more logic? Write simple bash/Python scripts where 5 lines of code can do all the magic. You would be surprised how few you actually need and how simple is to write it by yourself.

Compiling Pug to HTML is fairly simple. No need for Node.js and it's modules dependency hell. You can use this Rust tool which compiles into single binary.

Styles. CSS? No, SASS! From the same reason as Pug plus it gives you functions and mixins (and more). How to compile it? Node? NO! Single binary again.

Now we know how to write templates and compile them and how to build up styles for your site and also compile them. Everything can be automated and made more convinient with a few shell scripts. As result you have simple setup which you have 100% under control. It's tiny and fairly simple. This site is build like I just described. Just have a look. Bonus is it's dockerized on Alpine linux using Nginx. Whole image has 20 MB.

What's the conclusion? I'm not saying all modern frameworks are bad. No they are cool because they keep us push things forward. They come with more or less good approaches and ideas. People try and learn. Sometimes they fail but that's the point where you learn the most. On the other hand we should not forget what we already know. We should not forget what basis are and not look on them as obsolete or "not cool". Good old HTML (Pug) writing or CSS (SASS) without frameworks is completely fine. There is nothing wrong with pure JS without Webpack or at least 10 Node.js modules. There is nothing wrong keep it simple with just few shell scripts.

The less overhead you have the more time you can spend on actuall work.