High-level discussion on the Micro Frontend Architecture, pros and cons, my insights and experiences. Devcon Davao 2020

1. THE MODERN WEB WITH
MICRO FRONTENDS
@gloriamaris

2. Micro Frontends
● Insights
● Experience
● Thoughts

3. Microservices

4. Features
● Login or sign up using Google, LinkedIn, Twitter, or
Facebook
● Select a restaurant
● Select orders from the restaurant
● View your cart
● Pay for your order through COD, Online Bank
Payment or GCash
● Track your order
● View history of orders

6. MONOLITHIC APPLICATION

7. MONOLITHIC APPLICATION

8. MONOLITHIC APPLICATION
x 10000 lol

9. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger as
modules are added

10. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger as
modules are added
● Difficulty in keeping track of the independence of
modules

11. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger as
modules are added
● Difficulty in keeping track of the independence of
modules
● Any minor or major changes would require the entire
monolith to be rebuilt and deployed

12. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger as
modules are added
● Difficulty in keeping track of the independence of
modules
● Any minor or major changes would require the entire
monolith to be rebuilt and deployed!
● Code migration and maintenance

13. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger as
modules are added
● Difficulty in keeping track of the independence of
modules
● Any minor or major changes would require the entire
monolith to be rebuilt and deployed!
● Code migration and maintenance
● You can’t scale modules individually
● etc
huhu :(

14. MICROSERVICE
ARCHITECTURE

15. MICROSERVICE
ARCHITECTURE

16. MICROSERVICE
ARCHITECTURE
● Self-contained applications
● Can be built and deployed independently
● Can be scaled independently
● Can be written in entirely different tech stack
● Can be managed by different teams

17. Micro frontends are microservices,
but for frontends :)

18. Micro frontends are microservices,
but for frontends :)
wow

20. MONOLITHIC APPLICATION

21. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - as your application
grows, the application bundle grows

22. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger
as modules are added
● Difficulty in keeping track of the independence of
modules

23. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger
as modules are added
● Difficulty in keeping track of the independence of
modules
● Any minor or major changes would require the
entire monolith to be rebuilt and deployed!

24. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger
as modules are added
● Difficulty in keeping track of the independence of
modules
● Any minor or major changes would require the
entire monolith to be rebuilt and deployed!
● Code migration and maintenance
● Inflexibility of the application
● etc

25. MONOLITHIC APPLICATION
ISSUES
● Frustration in development - codebase gets bigger
as modules are added
● Difficulty in keeping track of the independence of
modules
● Any minor or major changes would require the
entire monolith to be rebuilt and deployed!
● Code migration and maintenance
● Inflexibility of the application
● etc

26. Use Cases

27. USE CASE 1: PRODUCT PIVOT
Food Delivery Service
Platform
Customized
E-commerce Platform
for Restaurants

28. USE CASE 1: PRODUCT PIVOT
Bob Belcher
Product Owner
Restaurant Page

29. USE CASE 1: PRODUCT PIVOT
Bob Belcher
Product Owner
Restaurant Micro Frontend

30. USE CASE 2: USING A NEW FRAMEWORK
FOODKOALA WEB APP
Angular 2
Bubbles
Software Solutions
Architect

31. USE CASE 2: USING A NEW FRAMEWORK
FOODKOALA WEB APP
Angular 2
FOODKOALA PAYMENT
React

32. Advantages
● Distributed teams
● Independent Deployments
● Scalability
● Feature Toggle
● Fast Time to Ship Features
● Framework Independence

33. Header
Micro Frontend
Payments
Micro Frontend
Restaurant
Micro Frontend
3rd Party Ads
Micro Frontend

34. Advantages
● Distributed teams
● Independent Deployments
● Scalability
● Feature Toggle
● Fast Time to Ship Features
● Framework Independence

35. Header
Micro Frontend
Payments
Micro Frontend
Restaurant
Micro Frontend
3rd Party Ads
Micro Frontend

36. Advantages
● Distributed teams
● Independent Deployments
● Scalability
● Feature Toggle
● Fast Time to Ship Features
● Framework Independence

37. Advantages
● Distributed teams
● Independent Deployments
● Scalability
● Feature Toggle
● Fast Time to Ship Features
● Framework Independence

38. Do you need to use Micro Frontends?

39. Do you need to use Micro Frontends?
Not really

40. Disadvantages
● Tougher Orchestration
● User Design/Experience Consistency
● Duplication of Common Dependencies
● Operational Cost and Complexity

41. Disadvantages
● Tougher Orchestration
● User Design/Experience Consistency
● Duplication of Common Dependencies
● Operational Cost and Complexity

42. Disadvantages
● Tougher Orchestration
● User Design/Experience Consistency
● Duplication of Common Dependencies
● Operational Cost and Complexity

43. Disadvantages
● Tougher Orchestration
● User Design/Experience Consistency
● Duplication of Common Dependencies
● Operational Cost and Complexity

44. Other possible great and cost-effective solutions:
● Building Resilient Components
● Unified Component Library (e.g. Storybook, Bit, etc.)
● Create a Good Component Model
● Code Reviews and Pair Programming
● Make your teams agree on a unified freaking framework

45. Companies Using Micro Frontends

46. Software architecture is the most
important cornerstone towards
building scalable applications.

47. @gloriamaris
Link to the slides:
slideshare.net/moniquedingding
Nikki Dingding
Senior Software Developer, Lamudi
Buy me coffee :-) ko-fi.com/gloriamaris