Front-End Platform Engineering
Serg Hospodarets
Executive VP of Global Engineering
at Finalsite
Author, Speaker. DevOps and Web contributor:
contributed to Terraform, ECMAScript/JS, and Chrome
My path
Platforms Creator
| Title | Managed team size |
|---|---|
| Developer, Tech. Leader | ~10 |
| Architect, Eng. Manager | ~20 |
| Director of Engineering | 50+ |
| VP, Global Head of Eng. | 100+ |
What problems did we need to solve?
What we had
🏦 What we were requested
| Organization | Main request |
|---|---|
| 💰 Finance (CFO) | Cost efficiency |
| Product (CPO) | ⏰ Time to market |
| 🔐 Security (CIO) | - security checks - fast security fixes |
| CEO, COO | 📊 Be ready for M&A |
| Product and UX | 💅 Consistent look and feel and CX |
| 🏛 Architects | Common scalable architecture |
| Eng. and Operations | Less cognitive load |
- 3 acquired companies with different UX/UI solutions and Tech-stack
- up to 20 days of downtime per year
- 124 different Vendors, and hard request to decrease the cost by 40%
- 3 days to roll out critical security fixes across all the projects and regions
- MTTR 2 days
- Prod deployments once per a month
How to create a Front-End Platform
and organization
First step- simple static docs:
- Docusaurus- create simple versioned doc sites
- Slate- simple static docs for API
Next step:
- Backstage- open-source Internal Development Portal
For scale:
Tooling Demo: Engineering Portal
Tooling Demo: Front-End
- Storybook - Frontend workshop for UI development (React, Vue, Angular, JS)
- Storybook Addons- extend Storybook to fit your team's development workflow
Platform stage at this point: Childhood
Typical team structure at this point
Front-End
Platform
pillars
Next steps- move fast and bring the business value ASAP
Create a simple starter App and CLI to generate applications based on it. Include mobile app capabilities if needed.
- Vite , create Next.js app - app starter generators
- commander.js , oclif- CLI building Frameworks
- React Native , Capacitor - tooling for cross-platform development
Platform stage at this point: Adoléscence
Front-End
Platform
pillars
Typical team structure at this point
Design system
Next Platform steps
- Add feature flags
- Introduce Micro-Frontends where fits
- Better integration with back-end
- Environments per PR, stage, etc.
- Common Observability
- Add scalable metrics, infrastructure, and artifacts management...
List of platform tooling 👉
Platform stage at this point: Maturity
Typical team structure and customers at this point
Front-End
Platform
pillars
What was achieved
| Area | Outcome |
|---|---|
| Cost | Common Vendors' payment cost was decreased by 35% |
| Platform area | 50+ apps, 100+ microservices, 20+ microfrontends |
| UX design and UI framework | 82% of the company products were switched to a standard design system and UI Framework |
| 📝 DORA metrics | MTTR decreased from 1 day to 4 hours Availability went from 95% (20 days down) to 99.999% (5 min/year) |
| ⏰ Time to market | Once per month prod deployments ➡️ to daily deployments with feature flags and weekly releases. |
| 🔐 Security checks - fast security fixes |
Applied Common Platform security guardrails (shared CI/CD) Supply chain fixes delivered in ~3 hours to prod across portfolio |
* Cloud cost had increased by 15%; additional work was done to resolve this
Tips from experience
- Pilot team(s) is super important to become evangelists
- Treat Platform as a product:
1. Internal teams are your customers: provide support, Slack etc. channels
2. Invest in Platform PM and DevX culture
3. Evangelise- regular releases, demos, newsletters
- For UI adoption put heads together with the UX, infra- DevOps, security- SecOps
- Cooperate with Architects/Directors/VP/CXO across the org
- Jackpot Platform strategy- find a way and deliver your platform to your company customers
Inspirational 🗣
- Prefer golden path over golden cage
- Foster the Pull vs Push culture
- Work with leadership for a top-down support for bottom-up enablement
Dev Platform into customers' hands:
Jutro Digital Platform
THANK YOU!
Serg Hospodarets
ㅤ
