Well, good morning :wave: - 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 no statement of value anywhere in my user stories :cry:
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
sucessfully! 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 :confounded: 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
But what about performance, eh?
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!