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!