KISS the Web - Keep It Simple, Stupid

KISS the Web - Keep It Simple, Stupid

I discovered Zero Server this week, a zero configuration web framework, and I wanted to use it on a side project I have going. I had a bit of a challenge, until I remembered the K.I.S.S. Principle.

On Zero Server's web site, they talk about zero config integration with Node.js, React, HTML, MDX, Vue, Svelte, Python and static files. I can vouch for this – it just plain works. If you put something that looks like it should serve up a web page, based on one of those frameworks, anywhere in your file tree, Zero will basically make a route for it behind the scenes.

My dilemma is that, based on my use case, I wanted to build a single page application (SPA) that I wanted to expose to the user. The site is designed to help someone provision all services required for full Developer and DevOps workflow on AWS. Perfect for Proofs of Concept (POC), Proofs of Architecture (POA), demos, and pilots. And, since just about all the services are "consumption" based, the pilot environment can stay in place and be configured to auto-scale into the enterprise DevOps toolkit.

The SPA framework I have been playing around with lately is Mithril.js, and I really wanted to play with it some more, as opposed to using something I have used several times or learning something brand new. Behind the scenes, Zero uses Express, and Mithril has its own router, and uses the #!, or "hash-bang" (which, to me, sounds like a pretty good date night), routing for single page applications (SPA).

I knew that Mithril was not going to play nicely with Zero's Express router, but I still wanted to use it. Luckily, I am not smart, but clever. It's usually a source of consternation, as cleverness is a thousand times more dangerous and evil than smart could ever be, but in this case, it was more like the military's well-know KISS Principle - Keep It Simple, Stupid

So, I came up with a little hybrid architecture, which required me to think like Slingblade and check the gas tank of the lawnmower before I did anything else. The very first Hello World example on the Mithril web site gives you the option of using Node.js and installing the Mithril module, or you can go through the tutorials by just pulling in the Mithril JavaScript file from a CDN. The code is the same either way.

Mithril.js being loaded from CDN

Something else interesting in that picture, you will see that I am also pulling Semantic UI from a CDN, and pulling it directly into the SPA. I really like the Semantic UI components, but it is sometimes been a pain in the ass to get Semantic working with certain Node.js modules. No one has ever had a problem getting Semantic UI to work with a regular old HTML page. So, two problems solved.

So, I have put a Mithril.js SPA in index.html at the root directory, and have full use of a lightning fast, self-contained user-facing web application. With Zero, I also have automatic routing for any Node.js modules I create elsewhere in the tree.

Remember the use case - the user is going to create AWS services. The goal is for them to create a service by merely clicking a button in the web app, and it just happens.

Well, the best way I thought about to make it "just happen" was to use the AWS JavaScript SDK. And to do so using the best features of Zero. So, all of that heavy lifting is done in a single folder, with subfolders, as an API that was dead simple to create with Zero doing automatic routing.

When the app needs to do something in AWS, Mithril has an asynchronous, promise-based XHR subsystem, which I use to make the appropriate call (route/payload/verb) to my API. Then, using the AWS JavaScript SDK, the API will make the magic happen.

Another interesting feature I implemented was to keep a locally stored JSON file that contains all of the metadata about all of the services created along the way. The AWS SDK is very good at doing that - returning a JSON object with all the metadata for the service, or user, or whatever else, it just created. In my API code, I call a helper function that will add that object to the JSON file. Once the lab is fully completed, that file will be "published" to an AWS S3 bucket, where it will be used for future features of the lab (dashboards, cost analysis, etc.).

So, I definitely found a way to simplify something that was complex, or do the exact opposite. Either way, I really like Zero Server, and I really like Mithril, and I found a way to use them both on the same project. So far, I am enjoying the architecture. By introducing another layer, it becomes really important to know about the lifecycle and hierarchy of things, mainly in the CSS arena. My custom CSS file is loading after the one for Semantic UI, and at least once, I used a class name in my custom CSS that was also used by Semantic UI. That's what F12 is for!

I will hopefully post some more details about the service, and how I am building it, once I make the repo public on Github.

Share Tweet Send