5 ms·

Template – A simple framework for webapps

81 points by stefankuehnel 4y ago

acedTrex 4y ago
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.
pyrolistical 4y ago
It’s a small wrapper around web components. Why not use it directly?
- triyambakam 4y ago
  The same answer for anytime abstraction is used.
- r3trohack3r 4y ago
  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.
  - leke 4y ago
    Sounds like the definition of a framework :)
- voat 4y ago
  Why not code using 1s and 0s?
triyambakam 4y ago
Here's the context: https://news.ycombinator.com/item?id=35188838 https://news.ycombinator.com/item?id=35188838 I am not the author.
r3trohack3r 4y ago
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
- deleted 4y ago
  [deleted]
sirsuki 4y ago
This looks very similar to a library I wrote called https://fancy-pants.js.org 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.
justsomeuser 4y ago
How do you manage changing state overtime? Do you re-render the whole template? Can templates be nested?
- r3trohack3r 4y ago
  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.
codazoda 4y ago
I love small, understandable projects like this. Great job.

81 points by stefankuehnel 4y ago

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.

pyrolistical 4y ago

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

triyambakam 4y ago
The same answer for anytime abstraction is used.
r3trohack3r 4y ago
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.
- leke 4y ago
  Sounds like the definition of a framework :)
voat 4y ago
Why not code using 1s and 0s?

triyambakam 4y ago

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

r3trohack3r 4y ago

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

deleted 4y ago
[deleted]

sirsuki 4y ago

This looks very similar to a library I wrote called https://fancy-pants.js.org 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.

justsomeuser 4y ago

How do you manage changing state overtime? Do you re-render the whole template? Can templates be nested?

r3trohack3r 4y ago
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.

codazoda 4y ago

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