Template – A simple framework for webapps | Hacker News Reader

Template – A simple framework for webapps

github.com

81 pointsstefankuehnel12 comments

Hey, author here. Surprised to see this little library on the front page of HN.

The shadow DOM stuff was just added. Before I was just using <template>. So those tires are “unkicked” - if ShadowDOM doesn’t work for you, you can git revert that out and the library will work all the same (with less isolation)

It's "open source" as a reference. Just using it for myself. There aren't many docs beyond notes to myself. But the actual framework is a 90LoC JavaScript file that is an easy read.

You're welcome to kick the tires. If you like it I'd entertain PRs and stuff but it's such a small library forking is probably entirely reasonable to make your own flavor too.

It’s BSD licensed, but in the spirit of GPL, if you go and make it your own I’d appreciate if you reported back what worked and didn’t for you!

I use this for a subset of my consulting projects (boutique app development for small businesses). You’d help a large group of people downstream by sharing what you learn back <3

Here's the context: https://news.ycombinator.com/item?id=35188838

I am not the author.

This looks very similar to a library I wrote called https://fancy-pants.js.org which wraps custom elements. Mine allowed an opt-in approach to shadow dom or use the light dom (with slot support)

Updates are scheduled and only components that need updating get their render method called. I even threw in a way to pass objects to child components by means of a yield method.

Just in case someone found it intereting.

I love little stuff like this, we often times get so lost in abstraction and complexity that we forget many things can have humble beginnings.

I love small, understandable projects like this. Great job.

How do you manage changing state overtime? Do you re-render the whole template?

Can templates be nested?

You use standard DOM operations to update state, like innerText and classList.add, defined inside the JS class that orchestrates the component.

Nesting works using the same concept. A parent template either picks one of its child nodes using this.fragment.querySelector or using document.createElement to mount a child template to. You then use this.addChild to opt into garbage collection.

It’s a small wrapper around web components. Why not use it directly?

The same answer for anytime abstraction is used.

This is what I needed to get nested web components talking to each other and orchestrate their lifecycles. I was reusing the pattern over and over again (I do a lot of application development across a large number projects) so I turned it into a reusable file I can inject into the code bases I work on.

Sounds like the definition of a framework :)

Why not code using 1s and 0s?

Reply on news.ycombinator.com