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!
Top comments (0)