Implementing micro frontends using iframes, including demo apps, pitfalls, why using it and why not.

1. Micro
frontends
Ran Wahle

2. About Me
Ran Wahle
Full Stack
developer at Tikal

3. About Me
Ran Wahle
Volunteer

4. Are
Microfrontends
This, on client?

5. Micro frontends
One App Multiple modules

6. Micro frontends
One App
Different CI/CD
Different teams
Maybe different tech stack

7. Micro frontends
Shell
Module Module Module

8. Today I’ll deal with
dirty laundry

9. Our app - Manage our
laundry

10. Total isolation between apps
Requirements
Client Server
Client Server
Client Server
Client Server

11. SPA user experience
Requirements

12. Shell
Good developer experience
Requirements
Client Server

13. Why not iframe
Bad publicity

14. Why not iframe
Too isolated

15. Why not iframe
Browser limitations

16. Why not iframe
Different history states

17. Why iframe?

18. Iframe way of remote
import fetch(url).then((response) =>
response.text()).then((html: string) => {
loadContentIntoFrame()
})

19. Iframe way of
remote import
const doc = document.implementation.createHTMLDocument();
doc.documentElement.innerHTML = appHTML;
const base = doc.createElement('base');
base.href = getHref();
doc.head.insertBefore(base,
doc.head.firstElementChild);
if (iframe.contentDocument && iframe.contentWindow) {
iframe.contentDocument.open();
iframe.contentDocument.write(doc.documentElement.innerHTML
);
iframe.contentDocument.close();
}
Set the base relative
to the shell

20. Deeplink & postmessage
window.addEventListener(‘message’,
message => {
if (message.data.topic === 'location-
changed') {
const newUrl =message.data.route);
window.history.replaceState(null, '',
newUrl);
}
}
const location = useLocation();
useEffect(() => {
if (window.parent && window.parent
!== window) {
window.parent.postMessage({topic:
'location-changed', route:
location.pathname}, '*');
}
}, [location])

21. `
App1 App2 App3
Shell
Msg Msg Msg
Msg

22. Iframe has to be friendly

23. Iframe has to be friendly
CORS

24. When iframe is friendly
You can share tokens

25. When iframe is friendly
You can post messages

26. When iframe is friendly
You can execute global scope
functions

27. $0.contentWindow.getData()
Side by side demo

28. Let’s wrap
We’ve seen some dirty laundry code.
There are scenarios when module
federation won’t be good enough, then,
iframe may serve your need.

29. My code repo
https://github.com/ranwahle/
micro-frontend-demo

30. Thank you!
Ran Wahle
ran.wahle@gmail.com
ranw@tikalk.com
@ranwahle