That was sort of a clickbait ;) But let me explain. If the following line of html gets you interested, keep reading.
<include src="/snippet.html" />
This post is partly an opinion piece and a toy project report. The project is still a work in progress. My intention for writing this post is to pique the interest of fellow mad men
At the end of this exercise, my index.html look like
<script src="script.js"></script>
<include src="./src/app.html"></include>
<script> htmlPromax.start(); </script>
script.js contains all htmlPromax code. My project folder look like this
<rant>
Skip this section if you get bored
I, quite often, find myself overwhelmed by the amount of setup required (even though it is mostly automated) to get started with a minimal front-end project. Then the way you write frontend code... It is no where close to what browsers were designed to do. This is while the fact remains that a simple index.html file could be your front-end just fine.
So I set out on a search to find out a close to native html framework that would make the effort little easier, while work out of the box in a browser. To be clear, my end goal is not to eliminate bundling completely, rather to write code in html and pure embedded javascript, or as close to it as possible. In my book, eliminating as much bundling steps as possible gets me half way close to the objective
Polymer, NO. It is now in maintenance mode. Lit is the new alternative they suggest. Both of them use web-components instead of a custom component system like react. This is good, but the way you write code feels more like a react spin-off.
If you got here looking for a native web-components based framework, please do check out Lit. I haven't used it myself before. I will be considering use of Lit for this project in future.
I didn't find any other projects. (Please leave a comment if you know any.)
Then I decided to find out what browsers can do in its native form today.
Module imports. Actually this is a good idea, especially if you use it along with Polymer. However I'm not sure if Lit can be used in this way, because of the use of decorators. So that is a tall stone wall. Besides, I'm not happy with this classed approach.
<rant/>
Next I looked for ways to import html snippets into dom. That lead me to this snippet of code
This method is part of w3.js library. The simplicity of this code got me interested.
I started a project of my own. I call it htmlPromax, coz why not?!
I copied this method, modified it little bit. The modifications can be summarized as follows.
I changed the include method to recursively include files with depth-limitting ( it can go 99 includes deep before erroring).
I then changed the query selector/element-identifier used to tagName:include (This will be changing soon, but for the time being it looks cool and reads like #include fileName.h).
I also added a unique id generator to tag each included component. This is a foundation to next steps of this project.
That was 1 hour
By the end of 1 hour, I had setup a very minimal purely html based web framework that does nothing beyond importing html snippets.
But, I am not stopping there. It would be very irresponsible of me to copy a method from w3.js, change few attributes and call it a web framework of my own. However, I was able to write frontend code in pure html, organize the code into folders and maintain a project structure. I could simply load the index.html and everything just worked. So this one hour got me excited enough to keep working on it.
Beyond 1 hour
At this point I wouldn't blame you if you think I am a caveman who think static html websites are cool. I'm not. Next step is to add Javascript capabilities to drive a dynamic web app.
Isolation of code run in a component context is a major requirement. But I'd also like to keep it unobtrusive and as close to native as possible.
I have some ideas. I am trying to substitute <include> tag with a custom component and shadowDom, thus solving the lifecycle events and isolation problems. I'll add a global ctx variable that is available only inside the shadowDom of an <include>. This will change the include code substantially. We will not need to recursively check for includes, the component constructor will take care of it for us.
This part is still a work in progress. Wish me luck and watch out for an update post.
git: https://github.com/bwowsersource/promax
Top comments (0)