Post on 12-Jun-2020
Podium
Breaking the monolith with microservices!
μs μs μs
Frontend
Business logic
Data access layer
frontend
μs
μs
Monolith architecture Microservice “real world”?
μs μs μs
fe
Microservice “ideal world”?
fefe fe
Why microservices?
● Isolation● Independent● Autonomous● Evolutionary● Standard driven
● Complexity● Overhead● “The death star”
Advantages Drawbacks
«frontend»
Owned by a single team
A fragment of a page
Business component- Data requirements- (not a generic UI widget)
What is a «component»?
Re-composable and it just works!
Podium parts
Asset ServiceLayout server
podlet
contract
Podlet
“A business feature”
A fragment of a page
Enables full-stack ownership of features
Layout Server
The user-facing webapp
Responsibilities:- Fetch content from podlets- Error-handling- Rendering a page- Proxy for podlets
Asset service
Responsibilities:- Build frontend dependencies- Monitor dependency usage
Frontend platform
Backend platform
Assets service Layout service(finn.no)
Domain service
Podlet Podlet
Domain service
Domain service
Domain service
Podlet
Layout service(xyz.com)
CDN
1. 2.
3.
Contract based
{ name: "my-podlet", version: "1.0.0", content: "/content", fallback: "/fallback", assets: { js: "def53.json", css:"ee212.json" }}
manifest.json
JSON Web TokenLocaleDevice TypeResource Mount Point
Podlet options- Static- Runtime (adId)
Context
?Browser API
Why?
More efficient development- Standardize common challenges
- Team should focus on delivering awesome business features
Isolation- Clear boundaries; Autonomous
- Easier to work on concrete features
- More robust
No “off the shelf” solutions- Secret sauce of larger sites
- Evolutionary
prototype.js Angular.js Vue.js React.js
Front-End technologies changes over time
Evolutionary Frontend Tech Strategy
React React React React React React Spring
React React React React
Next 2 React
Next Next Next
Next Next Next Next Next Next React
Next Next Next Next Next
2018
2020
2022
2024Rewrite Web Platform
frontend unchanged
When new frontend technology is needed, we are able to introduce it gradually - one component at a time,
with no complete rewrites needed!
FrontendEvolution
Architecture direction
/Reise/Search /Småjobber/Front-Page /Object-page /Min-finn
Shared look & feel
Shared UI Components
/...
Shared tools
Webapp owned by Platform WEB Team
Teams owns Podlets
Webapp owned by domain teams
Follow guidelines and use standardized platform components (spaden, tools, ui components)
Demo Time!
Words words words. Show me the real deal!