Do we need frameworks at all?

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.

1 Like

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… :grinning_face_with_smiling_eyes:
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.

1 Like

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 price 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.

2 Likes

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.

1 Like

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.

1 Like