MicroFrontend With Iframes, dirty laundry that can be cleaned
Download as PPTX, PDF0 likes89 views
The document discusses the concept of micro frontends, focusing on the architecture where a single application consists of multiple modules developed by different teams, potentially utilizing various tech stacks. It highlights the use of iframes for remote imports, outlining how they enable communication and navigation between different parts of the application while addressing challenges related to isolation and browser limitations. Additionally, it provides a code demonstration and references a GitHub repository for further exploration.
![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])](https://image.slidesharecdn.com/microfrontendmeetupattikal-240116083203-9876a168/85/MicroFrontend-With-Iframes-dirty-laundry-that-can-be-cleaned-20-320.jpg)
MicroFrontend With Iframes, dirty laundry that can be cleaned
- 2. About Me Ran Wahle Full Stack developer at Tikal
- 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
- 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
- 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.