Let’s Build a Thing! (Part Four)

Chris Shepherd
3 min readJun 26, 2019

Well, good morning 👋

I hope that you’ve been enjoying the exploits over these last few posts. I’m casually aware that there are a lot of similar articles out there discussing the hand-rolling of front-end frameworks, and that what I’m doing here may be no different. That being said I’ve enjoyed the writing of it, so if at least one other person has found this useful/entertaining then I’m a reasonably happy chappy!

I’ve also subsequently been informed that I’d make a shit BA, and that there’s absolutely no statement of value anywhere in my user stories.

So there!!

I’ve been doing some work on this Toy framework over the last couple of days, and have finally managed to get it into a state whereby a child hierarchy of HTMLElements can be rendered successfully! My final Toy class looks like this:

Simple, eh??? The main challenge that I had around the rendering of child elements was that each child node needed a way to be rendered from its original template representation. The cheapest (see: least complicated) way I found to do this was simply to annotate each child node with a new property called template. This node is always going to contain an original, moustachiod version of the HTMLElement We can now just swap out the TextContent of any Node with its rendered equivalent. Great!

The only remaining complexity with this approach is that whenever the text content is replaced, so too is the underlying Text node’s content. This basically meant that whenever a parent is rendered, all child pending changes are overwritten

To get over this final hurdle, I just needed to render out the firstChild of each node, and have some crazy recursive algorithm to ensure that every Child node of every parent node is descended and rendered (#descrendered).

But what about performance, eh?

Bloody great question, that. Rumour has it this sort of BRUTE FORCE TRAVERSAL is actually very bad for the soul. Not only that, but somewhere there’s an ancient, crumbling laptop that’s hurriedly whirring itself into life on the off-chance it has to run this goddawful excuse for performant JavaScript sometime in the next 10 years.

NEXT TIME: Let’s see what the damage is, I guess? And if it’s truly shite we can try and re-write some of it!

A pretty short summation this time folks, but I wanted to get these out and draw a line under what has gone before and what is yet to come!


Originally published at https://blog.thesheps.dev on June 26, 2019.



Chris Shepherd

Thoughtworks.com dev, barbershopper, homebrewer and human (not necessarily in that order).