“Dividing an Orange” Evolution
How the public-web architecture of a large fintech evolved from 2016 to 2019
Slide contents
1. “Dividing an Orange” Evolution
How the public-web architecture of a large fintech evolved from 2016 to 2019
2. What we'll cover
Acquisition Department and the process
Frontend: monolith → micro-frontends
CMS: templates → block editor
Personalization: A/B → ML, and lessons
3. 01. Acquisition Department
What's under the hood
4. Inside acquisition
Public web and surrounding systems · ~60 engineers
Unauthenticated flagship web
Release-less CMS for web and mobile
Personalization and A/B testing
Acquisition channel automation
5. 02. Rendering Process
What happens between the user request and the rendered page
6. End-to-end pipeline
User → LB → Frontend → CMS → Personalization → DataStore
7. Three systems changed the most
That's where we'll focus
8. 03. Frontend Story
Story #1 — from monolith to micro-frontends
9. Frontend in 2016
Starting point of the story
10. Step #0 — get up to speed
Before changing anything — understand
Meet the team
Dip into the dev process
Understand team and stakeholder pains
Form a tactical plan
11. Step #1 — extract components
From a monolith to a component model
Split responsibilities
Minimize coupling
An ownership area per team
Agree on contracts
12. Step #2 — build a platform
So components can ship independently
13. Step #3 — scale teams
With platform ready — grow teams
Our own framework — tramvai
Main components moved into it
First micro-frontend app in one team
Validated with an A/B test
14. 04. CMS Story
Story #2 — from a monolith to microservices and cloud native
15. Two releases a year
16. Microservices without a platform stalled
We stabilized the legacy system and formed an architecture team
Stabilize the legacy system
Arch team and a default stack
Dozens of services from product teams
Nowhere to deploy them
17. Cloud native instead of an arch team
A platform instead of a central approval body
The arch team was disbanded
12-factor and k8s primitives
Frameworks for backend and frontend
Almost all prod on k8s
18. 05. Personalization Story
Story #3 — from A/B tests to ML predictors
19. One customer and a boxed product
The starting point of the third story
One main customer
A boxed product in production
A self-made C++ solution in alpha
One developer on the project
20. Our MVP replaced the boxed product
The team grew and the MVP shipped
Extended the team
Finished the MVP
Replaced the boxed product
Business is happy and wants more
21. An MVP does not grow into a platform
22. 06. Lessons from 3 Years
What we learned about evolving architecture
23. Strategy follows system size
Three systems, three paths
Small codebase or MVP — drop-in replacement
Medium codebase — parallel work and a painful swap
Large codebase and team — long evolution
evolution beats revolution — migrate in steps
24. References and Materials
Building Microservices — Sam Newman (2015)
Building Evolutionary Architectures — Ford, Parsons, Kua (2017)
The Twelve-Factor App — 12factor.net
Frontend Architecture for Design Systems — Micah Godbolt (2016)
25. Thank you!
polomodov.tech
All slides and links — in the Telegram channel
Alexander Polomodov, Engineering manager, Tinkoff.ru acquisition
@book_cube