Break Up
With Your
Frontend Monolith
Elisabeth Engel
@_lizzelo_
@_lizzelo_
Side Effects
Complexity
Dependency
Coordination
Slow Onboarding
Processes
Killing Innovation
Let's migrate!
@_lizzelo_
Microservices
to the rescue!
π
Keep It
Simple & Stupid
@_lizzelo_
All in one place
Backend
Microservices
Frontend
Frontend ?
@_lizzelo_
Speed Dating
https://www.flickr.com/photos/lmdo/6404420503
/home
/content
/settings
β
β
β
Team Ownership
6 passing
4 failing
Develop Independently
Run Independently
Technology Agnostic
Fast Loading
Native Support
Corporate Identity
Sharing Basics
Smooth User Interaction
Modular
iFrames ?!?
CMS
@_lizzelo_
Links
β
Links
β
β
β
/home
/content
/settings
β
Team Ownership
7 passing
3 failing
Develop Independently
Run Independently
Technology Agnostic
Fast Loading
Native Support
Corporate Identity
Sharing Basics
Smooth User Interaction
Modular
@_lizzelo_
Server Side Includes
β
β
β
β
β
β
β
@_lizzelo_
/home
/content
/settings
β
Team Ownership
7 passing
3 failing
Develop Independently
Run Independently
Technology Agnostic
Fast Loading
Native Support
Corporate Identity
Sharing Basics
Smooth User Interaction
Modular
@_lizzelo_
Integration on Code Level
Bundle
β
Lazy Loading
β
β
Web Components
/home
/content
/settings
β
@_lizzelo_
App Shell
β
β
β
β
β
@_lizzelo_
App Shell
β
/settings
β
Routing
@_lizzelo_
const routeEntries = [
{
name: 'home',
path: 'xy.com/home'
},
{
name: 'content',
path: 'xy.com/content'
},
{
name: 'settings',
path: 'xy.com/settings'
}
}
/settings
β
xy.com/settings
β
Loading via Manifest Files
{
"name": "Settings",
"version": "1.0.1",
"content": {
"js": [
"/js/bundle.min.js"
],
"css": [
"/css/style.min.css"
]
}
}
@_lizzelo_
App Shell
β
β
JS
CSS
xy.com/settings
Initialization
window.xy.settings.init(
applicationUrl,
path,
dependencies,
...
)
@_lizzelo_
App Shell
β
β
JS
CSS
App Shell
/home
/content
/settings
β
Team Ownership
7 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
β
β
β
β
β
Second Date
2017 @ gutefrage
Logged Out
SEO
Single Page Speed
Single Technology Stack
Engagement
Smooth Page Switch
Different Technologies
Logged In
?
Shall we?
have a look at our new home: www.gutefrage.net/invitation
have a look at our new home: www.gutefrage.net/invitation
App Shell @ gutefrage
@_lizzelo_
Team Ownership
6 passing
3 challenges
Develop Independently
Run Independently
Technology Agnostic
Super Fast Loading
Native Support
Corporate Identity
Sharing Basics
Smooth User Interaction
Modular
1Β failing
www.gutefrage.net/invitation
[Micro Frontends]
@_lizzelo_
Complex Environment
Build Scripts
Error Handling
Redundancy
Shared Dependencies
π³
π€
π
Β
π
π€
Independence
Easier Testing
Faster Onboarding
π
π
π
Future Proof
Resilient
π
π
Maintainable
π
Mission Phase
@_lizzelo_
Be Open
π
@_lizzelo_
Youtube: Micro Frontends
Zeef: Micro Frontends
Look Around
http://bit.ly/2zIhQzd
https://www.youtube.com/playlist?list=PLI1AtZo9B3YL_xpi19IuxFcTuCi2_thQT
Start Dating
@_lizzelo_
Don't Go Too Fast
@_lizzelo_
Start small
Same Repository
Naming Conventions
Living Styleguide
πΆπΌ
πΆπ»
πΆπ½
πΆπΎ
@_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
- 406