Re: https://plainvanillaweb.com/blog/articles/2024-09-28-unreasonable-effectiveness-of-vanilla-js/

[jon49]

Regarding the above post you might like my implementation of something similar that has quite a bit of interactivity but is implemented quite simply. Also, some of your "nice to haves" are implemented in it.

All the code is in this page for my vanilla implementation (besides the index.html and css of course):

https://github.com/jon49/timer/blob/cca1b8fee0ba4cd2ca7105b36bcf80ec14b22e8d/src/app-vanilla.ts

So, it has a nice templating system (createTemplate) and reference gathering system (getXElements). The reference gathering system is based off of Stage0 but done in a much more naive way which uses significantly less code - if you need higher performance than use something like Stage0.

I also handle the events cleanly with data-action attributes and the handleEvent function.

Also, using objects and the handleEvent method makes it so when I create event listeners I don't need to clean those event listeners up since when the object (custom element) is destroyed the events are automatically garbage collected. (Thanks to the guy over at https://gomakethings.com/ that blogged about all these things).

I tried to keep everything bare metal as possible while still being elegant and easy to use. I like this implementation because I have complete control of updates to the DOM and no weird quirks that frameworks have.

I hope this might give you some inspiration and an opportunity to see all the different ways to develop with vanilla JS. I really enjoy reading your blog/website!

Let me know if you have any questions or feedback on my implementation.

[jsebrech]

Thank you for sending this to me. I will take a look at it. I have learned so much about vanilla web development since starting the website, just by talking to people about it and having them send me things. I hope to keep learning and share what I learn on the site and blog. I'm glad you enjoy reading the blog, and thanks for letting me know. Regards Joeri

…

On Fri, Oct 11, 2024 at 10:01 AM Jon Nyman ***@***.***> wrote: Regarding the above post you might like my implementation of something similar that has quite a bit of interactivity but is implemented quite simply. Also, some of your "nice to haves" are implemented in it. All the code is in this page for my vanilla implementation (besides the index.html and css of course): https://github.com/jon49/timer/blob/cca1b8fee0ba4cd2ca7105b36bcf80ec14b22e8d/src/app-vanilla.ts So, it has a nice templating system (createTemplate) and reference gathering system (createTemplate). The reference gathering system is based off of Stage0 but done in a much more naive way which uses a significant less code - if you need higher performance than use something like Stage0. I also handle the events cleanly with data-action attributes and the handleEvent function. Also, using classe and the handleEvent method makes it so when I create event listeners I don't need to clean those event listeners up since when the object (custom element) is destroyed the events are automatically garbage collected. (Thanks to the guy over at https://gomakethings.com/ that blogged about all these things). I tried to keep everything bare metal as possible while still being elegant and easy to use. I like this implementation because I have complete control of updates to the DOM and no weird quirks that frameworks have. I hope this might give you some inspiration and an opportunity to see all the different ways to develop with vanilla JS. I really enjoy reading your blog/website! Let me know if you have any questions or feedback on my implementation. — Reply to this email directly, view it on GitHub <#7>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAUP6G4U6FVIQH2J3GWKKM3Z26AVTAVCNFSM6AAAAABPYMDQDWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGU4DANZSGU4TEOA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[quat1024]

Great website! Sending this function your way: https://github.com/terkelg/facon/

Basically it's a tagged template literal that creates a <template> element, sets template.innerHTML to the concatenation of all function arguments except HTMLElements from the arguments are replaced with dummy <b append=i></b> tags, then a querySelectorAll replaces the <b> with the actual HTMLElement from the arguments list. This allows you to construct DOM fragments out of smaller pieces without flattening things to HTML first, so you don't need to re-parse the HTML and the event handlers survive.

The collect function looks kind of like collect from Stage0, allows you to use ES6 spread syntax, another good way of referring to elements from deep inside the template.

I guess if you wanted to make this even faster (at the cost of complexity), cache the bit after the template.innerHTML is set, so you can stamp out copies of the template with a cloneNode without re-parsing the HTML. (thinks about it for five more seconds) Oh I think I just reinvented <slot> there, oops

[jsebrech]

That's a neat way of making templating easier.

By the way, you might be interested in the proposal for built-in data-aware templating that's currently being passed around.

WICG/webcomponents#1069

It's based on the templating as can be found in lit or fast:

• https://lit.dev/docs/libraries/standalone-templates/
• https://fast.design

Something like this is going to inevitably end up in the browser, although there are many questions still to be answered on how it should work.

I'll be closing this issue now but don't hesitate to open a new one if you have more feedback.