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

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

E.g. instead of creating all components manually, reuse the accessible library of components, ↙️ headless or styled ↘️

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

ChatGPT AI Docs for Front-End Platform

 

AI-driven documentation, knowledge base and chatbot

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!

         Platform Engineering tooling:
https://github.com/shospodarets/awesome-platform-engineering ⭐️

 

 

shospodarets

Serg Hospodarets 

 

 

 

 

 

Front-End Platform Engineering (short)

By Serg Hospodarets

Front-End Platform Engineering (short)

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.

  • 243