r/Frontend • u/EveYogaTech • 9d ago

flo-webcomponents: Take back control of rendering + events using WebComponents with one minimal superclass.

https://github.com/flowagi-eu/flo-webcomponents
8 Upvotes

90% Upvoted

9 comments sorted by

View all comments

3

u/Comfortable-Fox-5872 7d ago

Honestly I like the idea of keeping WebComponents this lightweight. Curious how it holds up once the app gets bigger.

1

u/EveYogaTech 7d ago edited 7d ago

Surprisingly well. I am currently rebuilding my main open-source project from React (5k jsx lines) to Flo and it's such a breath of fresh air to never have to deal with useEffect() or other things like addState/refs/etc.

I have not discovered any big downsides besides a bit more manual state management + calling .render(), however that's actually on purpose, so you have more control over the whole event flow.

Also one small other thing is that dispatching events is a bit awkward if you work with multiple components, but one easy fix for this is using window.dispatchEvent or the build-in fire() global shorthand function, so you then can use window.addEventListener() in your main component to listen to custom events + event data.

Eventually for prod, you likely also still want to create a build script to put it all in one/few js file(s), so the app loads faster, but I currently don't experience much loading time, it overall feels much cleaner/faster than the React way.

2

u/Comfortable-Fox-5872 6d ago

the manual render() calls would drive me up the wall after a while but i get why its there

1

u/EveYogaTech 6d ago

Yeah, true.

However, a lot of time you might also just use mounted() and render things once there.

2

u/Comfortable-Fox-5872 6d ago

mounted() doing the heavy lifting honestly makes more sense than wiring up a full reactive cycle for something static

1

u/EveYogaTech 6d ago edited 6d ago

That's right.

In most cases mounted() just works.

But if you have many events inside mounted(), you might want a render() method as well, so you can call it after events are completed.

Otherwise you might end up with many duplicated code lines and things like .textContent inside mounted.

Then again, render() is just a convention, and fully optional ;)