Serg Hospodarets
Engineering and technology leader, speaker, Web and Cloud infrastructure enthusiast.
Front-End Platform Engineering
Serg Hospodarets
Executive VP of Engineering
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
Use AI to speed-up development:
Warp AI, at your command
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
Tooling: Upgradability
- Use for automated rollout of new features and versions across Platform customers
Front-End: Codeshift / Codemods
Microservices, apps and infra: JHipster Upgrading application
Dependencies: Renovate- multi-platform and multi-language.
Guidance: Implement non-breaking additive changes and LTS versions drop timeline
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
THANK YOU!
Serg Hospodarets
ㅤ
Front-End Platform Engineering
By Serg Hospodarets
Front-End Platform Engineering
We are switching from the era of Front-End DevOps to a Platform Engineering- to create company-specific platform to develop and deliver their products. It goes through the stages of a Design System creation, integrated in a UI Framework (React, Vue, Angular…), and building an abstraction level on top of Cloud providers (AWS, Azure etc.) and tooling (K8S, Terraform..), and CI/CD pipelines (GitLab, Github) + observability and security enablement, to move the cognitive load from the product delivery teams. Picking the right tooling, foster the culture, solution and approaches is complex, but there is a common set of patterns and tools, so this talk is to describe both the reasons why Platform Engineering is a must, and to demo which tools and approaches will help you in this journey.
