Let’s Build a Thing! (Part Four)
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.
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?
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.