I was fiddling with something yesterday, and I was really impressed with web components, the latest layout capabilities, and more. A part of me wonders why anybody wanting to build a web app from scratch today would want React, Vue, etc. as opposed to vanilla JS and so on.
The part I am more in favor of frameworks is when we get to server-side rendering, ISR, and other more complicated delivery mechanisms.
I think a sufficiently mature platform doesn’t require additional dependencies. (Usually, as long as you’re doing something within the usual purview of the platform. )
Your a mind reader… 
I do everything in web components now.
This library supports SSR for web components (I’m testing now)
video: Hello Worldin' Some Web Component Libraries - YouTube
library: https://tonicframework.dev/
This SSG supports multi platform component SSR BUT not WC.
video: AM Coder - Astro! Use React, Svelte, Vue and Web Components in one Static Site Generator! (Overview) - YouTube
ssg: https://astro.build/
I think Tonic works in Node.
To get WC SSR’ing on an SSG we need to get a Tonic plugin for Astro.
The issue with SSR is that DOM methods aren’t available outside of the browser except maybe with JS DOM (no plugin for Astro). e.g extends HTMLElement, attachShadow(), customElement.define() but obviously Tonic has a filler class for HTMLElement.
I’m in the process of trying to get SSR with template literals for WC working without any frameworks (cloudflare worker). I’ll let you know when its tested.
I’ve done a number of different projects with web components and they are not without their limitations. They’re better as a kind of destination format as a way to easily share a self-contained piece of functionality that anyone else can use no matter their platform. Basing a project on WC alone is cumbersome. And while lit is great and helps a lot, there are still more gaps to fill and hoops to jump through.
Your right all component can be troublesome. It also depends on how you use them.
I started using the Cube CSS methodology which is easy to understand and works super well with components.
I only use shadow-dom for forms because it kills performance (maybe declarative shadow dom will improve)
JSON/ Objects/ template literal/ innerHTML I mostly use for dynamic components e.g. shopping carts.
Mostly I just use <custom-elements> as an alternate naming convention along with part = syntax for CSS .
connectedCallback() is also handy for event listeners ect.
How do you like Cloudflare Workers? It’s been on my to-do list to try for a while, but I haven’t gotten around to it just yet.
They’re great,
I think they’re the future for a big chunk of the web.
It’s an almost identical API to service workers so you can re-use your same code with browser SW’s. They work very well together…
You can use it as a complete standalone server like node using onfetch() for every route. You can also configure the workers to only respond to certain routes/ urls, authentication, dynamic content ect.
When combined with the browser SW, you can reduce the time the CF worker is active.
You don’t have use the selfkeyword for event listeners, e.g. self.addEventListener('fetch', () =>.......), self.onfetch = function(){}
Also I don’t think that you can Tee a stream to the CF cache and a client at the same time (I haven’t tried, because I use CF pages). Normal SW’s can tee streams (response.body) to the SW cache and return the response to the client.
Deno have even gone the same path and created Deno Deploy.
It’s not as complete as CF workers (no KV store) though.
My first awareness of components was when I tried out Grunt. Not sure if that’s still around! It was the first time I wrote and developed in Node. This led me to learn more JavaScript then React, I did a bit of Vue, then found Gatsby. I must say I love Gatsby. Could I write a full site ‘old school’ yes, though the structures one can work with in Gatsby, which sits on React, allow for what I build - gallery type websites, which work amazingly well. One can bring in components and packages galore but you can also be very bare bones and still create a great site or app. Lots of CSS possibilities too, Styled-Components lets me write basic CSS with the power of JavaScript. Now Gatsby is in beta for version 4 and their Cloud services are amazing allowing Functions, CMS Integrations, SSR, parallel query running, Content Sync, and Deferred Static Generation.
It’s been a year since I asked this, so I went ahead and wrote a newsletter article on this topic:
I feel more strongly now than before that web frameworks aren’t needed for most new web apps today!
Interesting article I just shared with my team. Very timely for us! 
Lunatic! Hope all is well 
Glad the article helped. What framework were you all considering using?
You might be interested in a project I have been working on called SurfJS that can be used as a JQuery alternative with an optional component based syntax. Why might anyone be interested? Well it’s small, plugin extendable and the syntax is familiar. You can have the best of both worlds so to speak and ease into a component based style when needed or when working within a larger dev team. I would love to hear all of your thoughts on this project as well… it’s at https://surf.monster
I feel like this is where Svelte jumps in and says “Look at me!”
Hey Kirupa (and Kril! and Sen!)
We aren’t really considering anything at the moment. Just started looking around and nothing really jumps out that fits our needs. Maybe we don’t need one at all! I think we’re moving into a new arena that is less end-to-end and more bridge and glue work, if that makes sense. The less complicated we can make it, the better. Should be an interesting time of exploration, but that’s the fun part! Hope all is well with you!
Yes, as I’m finding out from the Svelte fans on social media who reminded me of this same thing haha.
I noticed that kirupa is building cool applications without react. It’s very interesting to see how he write different ways to render and hold state. I miss more of that in here than just react. Please Keep going!
One interesting thing I cannot drop is reacts context api! It’s not built in by default JavaScript
You can get context api functionality in vanilla JS too. Its all just knowing who to listen to for updates. Here’s a quick and dirty example using web components:
Inline source for anyone not wanting to click links:
HTML:
<my-context id="foo">
<div>
<my-context id="bar">
<div>
<my-el>
<output>Click button for updates</output>
</my-el>
</div>
</my-context>
</div>
</my-context>
<br>
<button data-context-id="foo">Increase foo</button>
<button data-context-id="bar">Increase bar</button>
JavaScript:
// base class for components wanting to get context change updates
class ContextAwareHTMLElement extends HTMLElement {
* #findContexts() {
let context
let target = this
while (target && (context = target.closest('my-context'))) {
yield context
target = context.parentNode
}
}
connectedCallback() {
for (const context of this.#findContexts()) {
context.addEventListener("context:change", event => {
this.contextChangeCallback(event.target)
})
}
}
contextChangeCallback(context) {}
}
// example component getting updates from context
customElements.define('my-el', class extends ContextAwareHTMLElement {
contextChangeCallback(context) {
this.querySelector("output").value = `Context change: ${context.id} = ${context.value}`
}
})
// context component which dispatches change events with value changes
customElements.define('my-context', class extends HTMLElement {
#value = 0
get value() {
return this.#value
}
set value(value) {
this.#value = value
this.dispatchEvent(new Event("context:change"))
}
})
// hook up buttons to change context values
for (const button of document.querySelectorAll("button[data-context-id]")) {
button.addEventListener("click", () => {
document.getElementById(button.dataset.contextId).value++
})
}
Thank you for the example. When I started doing web components. I found that the original spec is too messy to implement compared to for example lit-element framework. A lot of things became easier with LIT even state management.
The problem is, we don’t have a super popular web components framework that people use. It is just spread differently. There’s no community standard yet.
Hmm! Some strong fightin’ words here 