The burden of maintenance, keeping things consistent, secure and up-to-date grows with the number of services and libs owned by the teams.
At Marktplaats/Adevinta Benelux we work hard on improving developer experience of our frontend platform so less time is spent on housekeeping and developers can focus all their efforts on product development and nothing else.
3. New ads per day
350K
Visits per day
6.5M
Hits per day
300-400M
Connected ads per day
100K
Marktplaats: Facts & Figures
With over 8 million unique visitors monthly and 18.7 million live ads at any given
time, Marktplaats is the largest trading platform in the Netherlands.
4. Vision
Product development teams at Marktplaats focus all their efforts on building
the product and nothing else.
Making it happen
We accelerate product development by providing the Frontend Platform:
set of services, tools, components and other resources to enable FE engineers to
effectively deliver secure, reliable and efficient software.
5. Used by development teams
8
to build services and libraries
40
60
15
that generate production releases per day
Frontend platform adoption
6. Team autonomy vs dev efficiency
Level of team autonomy
reusability reinventing the wheel
consistency fragmentation
dev support maintenance burden
7. Frontend Golden path
● Stack: most important technologies that are aligned
and shared across the teams.
● Information support: ADRs, TechRadar, best-practices,
Slack channel, PR reviews.
● Governance: Developed in collaboration with teams,
owned by the Platform org.
Teams can deviate but they have to pay extra costs!
Golden path -
opinionated and
supported path to
build something
8. Golden path stack
Client-side
● React setup
● Design System
● Translations
Server-side
● Express.js
middlewares
● React SSR
● API clients
● Observability tools
Build and deploy
● Webpack config
● TypeScript
● Eslint/Prettier
● Jest
● Node.js Docker
9. Keep teams up-to-date
● Dashboard with live overview of all services, inventory of
outdated dependencies on production.
● Automated dependency updates by Renovate.
● Timely security updates by Snyk.
● Batch fixes and improvements with codemods.
● Information support and developer assistance.
13. Automated dependency updates
● 24/7 updates for internal NPM packages and Docker
images.
● Bi-weekly updates for trusted 3rd-party NPM packages.
● Minor and patch updates are auto-merged when build is
green. PRs are only created if build fails.
● Major updates always result in a PR and won't be
auto-merged.
● NCU dashboard has overview of pending Renovate PRs
~6 hours to propagate new version to all the services and libraries.
14. Timely security updates
● Regular updates to fix vulnerabilities in open source
dependencies (direct and transitive).
● All updates always result in a PRs and are not auto-merged.
● For feature PRs run security check for newly added
dependencies.
15. Batch code changes
● Install/update/remove dependency(s).
● Apply custom jscodeshift codemod.
● Run Putout code transformations to fix code smells.
● Apply Prettier to format the source code.
● Run tests and update Jest snapshots.
● Create PR and optionally auto-merge it.
Codemod - write a
code to rewrite
your code.
16. Information support
● ADRs - capture an important architectural decisions
made along with its context and consequences.
● Tech Radar - list of Techniques, Tools, Platforms,
Language & frameworks we observe: currently used,
tested, under research or put on hold.
● Dev assistance - Slack channel to provide immediate
help and support. PR reviews to give feedback and
guidance.
17. Key takeaways
1. Align
the most important
technologies across the
teams to define the
Golden path.
2. Automate
dependency updates,
security fixes and roll
out of the platform
improvements.
3. Accelerate
the teams by reducing
the maintenance
burden and providing
support.
18. Credits
Articles:
● How We Use Golden Paths to Solve Fragmentation in Our Software Ecosystem
● Software Sprawl, The Golden Path, and Scaling Teams With Agency
Images:
● Cover image by pikisuperstar on Freepik
● Robot images by macrovector on Freepik