Micro frontends is a design pattern that splits an application into multiple independently deployable frontend applications to reduce dependencies between teams and improve the speed of delivery. This approach can reduce execution and delivery risks like long cycle times and inconsistent user experiences. It allows for more autonomous teams and faster time to market. However, it also introduces some risks around broken user interfaces if components are not built consistently. Adopting a micro frontends approach requires buy-in from engineering leadership as well as change management to shift teams away from old habits.

1. What is so special about
Micro Frontends value
proposition?
Maksym
Klymyshyn
Summer. Sea. JavaScript.

2. ● 3 slides intro
● Execution & Delivery Risks
● Quality and Speed Impact on Value
Delivery
● Organization Architecture
● Change Management
Agenda

3. ● 2 years as Software Engineer
● 4 as technical co-founder
● 3 years as tech lead
● 5 years as a CTO of small startup
(Zakaz.ua)
● 3 years as Software Architect of
mid-size startup (Takeoff
Technologies)
● Now Director of Engineering at
Takeoff Technologies
About

6. What is Micro Frontend?

7. A design pattern in which
app developers split the application into
multiple frontend apps, so that each
consequent app can be deployed
independently (Separation of Concerns*)
Architecture standpoint
*Separation of Concerns (SoC) – a design principle for separating a computer program into
distinct sections such that each section addresses a separate concern

8. A way to decouple teams while working
on the application UI to reduce
dependencies and boost speed of value
delivery
Execution standpoint

9. High level diagram

10. Risks

11. Execution & Delivery Risks
● Longer Cycle Time
● Unidentified Dependencies
● Inconsistent UX/UI
● Sequential Delivery (when
they, then we)

12. Lead & Cycle Time

13. Broken UI
Source: Broken UI on Chrome on Windows 10 #5691

14. ● Increase in Cycle Time
● Higher number of Escaped Defects
● Increase of User Error Rate
● Increase of Time-on-Task
Delivery Risks Trends

15. Escaped Defects*
*escaped defect – a defect that was not found by, or one that escaped from, the quality
assurance process

16. Quality and Speed Impact
on Value Delivery

17. According to research paper “Trust determinants and outcomes in global B2B service”
Trust, Reliability and Customer
Orientation
● Overall Software Quality (or reliability)
responsible for 17% of the trust-building
with the client in B2B sector
● Customer Orientation (or speed of
customization delivery for particular
partner) responsible for 31%
● It’s 48% of trust-building!

18. It impacts NPS*
*NPS – Net promoter score, measures customer experience and predicts business growth

19. NPS impacts Churn Rate*
*Churn Rate - is the rate at which customers stop doing
business with an entity.

20. NPS impacts CRR
*CRR – Customer Retention Rate, the rate at which customers stay
with a business in a given period of time

21. Impact on Organization
Architecture

22. Independent deployment

23. Technical Strategy
● Less dependencies means more
autonomy for a team
● More autonomy means less coordination
between teams
● Less coordination means shorter Cycle
Time
● Shorter Cycle Time means faster Time to
Market*
*Time to Market or “TTM” are synonyms describing the period of time
it takes from initial idea to finished product

24. Autonomous Teams

25. Teams dependencies example

26. Enablement Team
● Develop infrastructure
for Micro Frontends
● Develop integration with
legacy software
● Maintain comprehensive
documentation to enable
others

27. ● Develop capability to add
micro-frontends into monolithic app
● It shouldn’t be ideal, it should work
● Make sure there’s buy-in from Product
organization
● Be careful with PoCs – don’t erode
trust by shipping low qual pieces
Integration with Monolith

28. Inconsistent UI
Source: Here are some of the problems, inconsistencies, and missing features in Windows 10

29. Shared component libraries
● Should be owned by Enablement
Team
● Clear guidance how to contribute
● Conscious and systematic Code
Review

30. Storybook

31. Change Management

32. Buy-in from
● Engineering Leadership – alignment
about approach, risks and value
● Teams – more autonomy [a.k.a.
freedom], less meetings
● Product organization – risks, value
and roadmap clearly articulated
● It’s not about consensus, it’s about
alignment

33. ● Find champion within a team and pair
program
● Make it part of the Definition of Done
● Prohibit old approach via Quality Gate
● Essentially, create an environment
where much easier to deliver will be
through MFT
Breaking old habits

34. Conclusion

35. ● Micro Frontends is a much broader
concept than just a design pattern
● Faster feedback loop impacts
motivation positively
● It enables teams to deliver with fewer
dependencies
● And it’s new shiny thing to try!

36. Questions?
https://linkedin.com/in/klymyshyn

37. ● Using risk management in the front end of projects
● Things you should never do, Part 1
● Micro Frontends
● How to drive growth with eCommerce customer retention rate optimization
● Net promoter score guide
● NPS Scores and Churn
● Trust determinants and outcomes in global B2B service
● Your Team Structures Ain’t Working. Let’s Apply Team Topologies
● 64 Essential Testing Metrics for Measuring Quality Assurance Success
● 20+ User Experience (UX) Metrics & KPIs to Measure by Product Managers: From
Real User Monitoring to Usability, Engagement, Adoption and Retention
Materials