DEV Community

Andrea
Andrea

Posted on

Is this horrible?

Hi, I'm exploring a new idea about UI dev.
Here my cent about microfrontends.
I am explicitly calling for comments on this before eventually commencing writing the code (probably in Svelte).
The question is:
What if one deploys single ui widgets to different pages (a là microfrontend but in an extreme fashion) and uses iframes to compose a page?
Single components would communicate through postMessage API in a message passing style.
Code would be (again) wisely decoupled from presentation (modern ui framework did the opposite) and dev people would also gain a total decomposition of the deployment: no need to rebuild/redeploy huge parts (a whole SPA, some pages in SSR,...) when you just touched a button onclick.
Regarding decoupling, I plan to deploy, as said, simple atomic ui widgets on different pages.
Think to them as this one: button.example.com or in the same spirit int-input.example.com
Each one would be parameterizable through url query like so:
int-input.example.com/?min=5&max=10
This way the component itself would receive kind of "URL props".
Then, each conponent would emit and respond to predefined messages sent to and coming from sendMessage API through the containing iframe.
It is just in the parent iframe that you would wire the logic in the form of a finite state machine, i.e. mapping state therein defined to actions and reactions to messages.

That's it, please comment on this.
Technically harsh comments are welcome!

Thanks to Dev-ers!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay