Partial views/templates in plain HTML

Ahmad Alfawwaz — Sun, 08 Dec 2019 23:06:48 +0000

Recently, I worked on a static site in plain HTML, CSS and JavaScript. I had decided I was going to stick with just those without using any special tools to do any automation. Just write some plain old static HTML and deploy.

Many frontend developers will obviously condemn this as unnecessary but I'm not a frontend developer and I didn't like the idea of setting up an environment for such a simple site.

As expected, I had the common problem of repetition that is generally seen in static sites. Honestly, it's a pain to have to effect changes everywhere a reused part of a page is modified. I am from a .NET background and I have played with a few other frameworks so I know of .NET's Razor, Laravel's blade, Java's thymeleaf and several other view engines that offered partial views or partial templates as a feature to mitigate this particular issue.

I researched solutions that enabled it in plain HTML and I found WebComponent's HTML Imports to be a good candidate. It was supposed to work with polyfills but for some reason I couldn't get it to behave the way I expected. I'm sure I could have possibly got it to work with some patience.

I didn't have that kind of patience for such a simple requirement so I decided to make mine, and I did it with partials.js at https://github.com/staa99/partials.js. It offers the basic partial view support you'd need to avoid duplicating view implementations and it was the best tool for the job. It's currently at version 2.0.

I encourage you to check it out, it might come in handy some day and you won't have to do all that work yourself anymore.

Link: https://github.com/staa99/partials.js

DEV Community: Ahmad Alfawwaz

Partial views/templates in plain HTML