one job per service • Service independence • Easier to understand, develop and test • Speeds up development • Enables continues delivery and deployment
app.postMessage('This will not work', 'https://google.com') // url doesn’t match app.postMessage('This will work, hi there!', 'http://example.com') function receiveMessage (event) { if (event.origin !== 'http://example.com') // security check for the origin return console.log(event.source) // iframe console.log(event.data) // 'hi from an iframe' } window.addEventListener('message', receiveMessage) </script> </head> <body> <div id='app'> <iframe src="https://example.com/app.html" id='app-iframe'></iframe> </div> </body> </html>
url doesn’t match app.postMessage('This will work, hi there!', 'http://example.com') function receiveMessage (event) { if (event.origin !== 'http://example.com') // security check for the origin return console.log(event.source) // iframe console.log(event.data) // 'hi from an iframe' } window.addEventListener('message', receiveMessage)
// window.opener console.log(event.data) // 'This will work, hi there!' event.source.postMessage('hi from an iframe', event.origin) } window.addEventListener('message', receiveMessage)
the same page without refreshing the page • Write code using a new framework, without rewriting your existing app • Lazy load code for improved initial load time
• Everything is bundled and deployed at the same time • Communication is done through: • Window object • Event bus • Shared state (Redux etc.) • Whatever works for you
• Use micro frontends to make things easier, not complicated • Micro frontends architecture doesn’t mean to use every framework in the world • Don’t forget to make standards across micro apps