Reputation: 169
I am experimenting with Elm to build a reusable dashboard-like UI to be declaratively configured via yaml files.
The yaml files would specify a group of embeddable web-apps (not only elm based but ideally also react/angular/vue) to be included in each instance of this UI, for example by specifying a label and a repository url.
I have tried using the traditional Elm/React way to take over a standard non-iframe dom element with various problems. (mainly, elm replaces the element it takes over, meaning various apps cannot share the same container)
If you want you can see the entire proof of concept here https://github.com/Dansvidania/mondrian-elm
Are there better ways? (I am sure there are) But also, what are the problems I might encounter if I did decide to go with iframes? I only find anecdotal evidence against iframes, and (in particular for sandboxing) they seem ideal.
Thanks in advance
Upvotes: 0
Views: 614
Reputation:
I use iframes without issue.
Communicating with javascript code embedded in an iframe works but I always feel such code is nailed together and lacks elegance.
I set up messages between the parent web page and the iframe to overcome domain issues and also to clarify the communication that occurs between the parent page and the iframe.
Cookies and iframes do not play well cross domain - but this can be resolved.
Upvotes: 2
Reputation: 155905
From Cam Jackson's Micro Frontends artice on martinfowler.com
Just as with the server-side includes option, building a page out of iframes is not a new technique and perhaps does not seem that exciting. But if we revisit the chief benefits of micro frontends listed earlier, iframes mostly fit the bill, as long as we're careful about how we slice up the application and structure our teams.
We often see a lot of reluctance to choose iframes. While some of that reluctance does seem to be driven by a gut feel that iframes are a bit “yuck”, there are some good reasons that people avoid them. The easy isolation mentioned above does tend to make them less flexible than other options. It can be difficult to build integrations between different parts of the application, so they make routing, history, and deep-linking more complicated, and they present some extra challenges to making your page fully responsive.
Upvotes: 4