Break Up
With Your
Frontend Monolith
Maor Frankel
Microservices
to the rescue!
💋
Keep It
Simple & Stupid
All in one place
Backend
Microservices
Frontend
Frontend ?
/home
/content
/settings
→
→
→
Links
↔
Links
↔
/home
/content
/settings
→
6 passing
3 failing
Develop Independently
Run Independently
Technology Agnostic
Fast Loading
Native Support
Corporate Identity
Sharing Basics
Smooth User Interaction
Modular
Integration on Code Level
Bundle
→
Lazy Loading
→
→
Web Components
Really !?!?
https://unsplash.com/photos/TdM_fhzmWog
/home
/content
/settings
→
@_lizzelo_
App Shell
→
→
→
→
→
@_lizzelo_
App Shell
→
/content
→
Routing
@_lizzelo_
const routeEntries = [
{
route: 'home',
goto: 'xy.com/home'
},
{
route: 'content',
goto: 'xy.com/content'
},
{
route: 'settings',
goto: 'xy.com/settings'
}
}/content
→
xy.com/content
→
Loading via Manifest Files
{
"name": "content",
"version": "1.0.1",
"content": {
"js": [
"/js/bundle.min.js"
],
"css": [
"/css/style.min.css"
]
}
}
@_lizzelo_
App Shell
→
→
JS
CSS
xy.com/content
Initialization
window.xy.content.init(
applicationUrl,
path,
dependencies,
...
)@_lizzelo_
App Shell
→
→
JS
CSS
App Shell
/home
/content
/settings
→
6 passing
3 challenges
Develop Independently
Run Independently
Technology Agnostic
Super Fast Loading
Native Support
Corporate Identity
Sharing Basics
Smooth User Interaction
Modular
@_lizzelo_
App Shell
→
→
→
→
→
@_lizzelo_
Complex Environment
Build Scripts
Error Handling
Redundancy
Shared Dependencies
😳
🤔
🙄
😇
🤕
Independence
Easier Testing
Faster Onboarding
🎉
🎉
🎉
Future Proof
Resilient
🎉
🎉
Maintainable
🎉
[Micro Frontends]
After the Break Up
@_lizzelo_
Be Open
🙄
Start Dating
@_lizzelo_
👶🏼
👶🏻
👶🏽
👶🏾
@_lizzelo_
start a new
love story!
Break Up
With Your
Frontend Monolith
&
Credits
gutefrage.net GmbH
Katharina Brinck
Thomas Zolynski
François Godet
Johannes Weber
Pixabay
Copy of Break up with your Frontend Monolith
By Maor Frankel
Copy of Break up with your Frontend Monolith
YouTube recording: https://www.youtube.com/watch?v=W3_8sxUurzA
