In this talk, we plan to explain some general tech considerations that developers need to be aware of while building a micro-frontends application. This comes from my year-long experience in building a micro-frontends application in a geographically distributed team. I will share some approaches and practices that worked for us and things that were learned from them!

1. Building applications in a
Micro-frontends way
Prasanna N Venkatesan@pvenk

2. Lead Developer with
ThoughtWorks for 9
Years
pvenk
prasann
#java #ruby #javascript #clojure
prasann@thoughtworks.com

3. AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends

4. TEAM AND TECH-STACK
Migrate a legacy application
for selling cars by 2020
5teams with 30developers
distributed over 2countries

5. AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends

6. INTRODUCING MICRO-FRONTENDS
Monoliths aren’t a
bad design choice
Monolith
web
application

7. INTRODUCING MICRO-FRONTENDS
Then came Microservices
Monolith
web
application
● Strong module boundaries
● Independent deployment
● Technology diversity
But...

8. INTRODUCING MICRO-FRONTENDS
Microservices were like these
Monolith
web
application Independent deployments
!== Independent releases
Frontend Monolith

9. INTRODUCING MICRO-FRONTENDS
All of Microservices’
promises
+
Independent releases
Frontend Monolith
Monolith
web
application
Micro-frontends

10. AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends

11. THINGS TO LOOK OUT IN MICRO-FRONTENDS
● Composing multiple frontends
● Sharing data between multiple
frontends.
● Consistent UX across multiple frontends
● Testing strategy

12. INTRODUCING SERVICES
Configure
Search
Order
Frame
A business-logic agonistic
orchestrator service that knows
how to download the rest of the
services’ frontend

13. 1
3
Composing Multiple
Frontends

14. COMPOSING MULTIPLE FRONTENDS
Build time
Composition
Run-time
Composition
vs

15. BUILD TIME FRONTEND COMPOSITION
Search
Configure
Order
Package
Registry
Frame
deploys to
deploys to
deploys to
builds the
app
deploys
App
Server

16. BUILD TIME FRONTEND COMPOSITION
Good dependency
management resulting in
smaller bundles
Independent cross team
development
A monolith built by
different teams
Non atomic deployments

17. RUN TIME FRONTEND COMPOSITION
Frame
downloaded initially
Search
Configure
Order
downloaded later
dow
nloaded
later
downloadedlater
Integration happens in
browser

18. RUN TIME FRONTEND COMPOSITION - TOOLKIT
Client Side
● JSPM
● SystemJS
● FrintJS
● Single-Spa
Server Side
● SSI (Server side
includes)
● Tailor (from Zalando)

19. RUN TIME FRONTEND COMPOSITION
Independent teams with
independent deployments.
Atomic deployments, so no
versioning issues.
Too many network calls
from client, with increased
bundle size.

20. Sharing data
between multiple
frontends

21. SHARING DATA - COMPONENT INITIALIZATION

22. SHARING DATA - BROWSER STORE
State
Management
Tools
MobX

23. SHARING DATA - THROUGH DOM EVENTS

24. SHARING DATA - REDUX ACTIONS
● Reducers will receive all
actions within a store.
● Dynamically possible to
combine reducers after
store initialization.

25. Design consistency

26. DESIGN CONSISTENCY
Design
Issues
UX
Consistency
CSS
Ambiguity

27. CSS AMBIGUITY

28. CSS AMBIGUITY

29. UX CONSISTENCY

30. UX CONSISTENCY
Design
Guild

31. UX CONSISTENCY
Design Guild
# 0 0 7 8 b f
0 ,1 2 0 ,1 9 1
# 0 0 b c c d
0 ,1 8 8 ,2 0 5
# 7 d c e d 5
1 2 5 ,2 0 6 ,2 1 3
# 0 0 a a 5 b
0 ,1 7 0 ,9 1
# 8 5 b 8 8 0
1 3 3 ,1 8 4 ,1 2 8
# b d b d 3 2
1 8 9 ,1 8 9 ,5 0
# f f f 3 5 0
2 5 5 ,2 4 3 ,8 0
# f b e 0 c e
2 5 1 ,2 2 4 ,2 0 6
# f 2 b a 9 7
2 4 2 ,1 8 6 ,1 5 1
# a 1 7 8 6 1
1 6 1 ,1 2 0 ,9 7
# 8 0 8 1 8 4
1 2 8 ,1 2 9 ,1 3 2
# e e e e e e
2 3 8 ,2 3 8 ,2 3 8
# e e 5 b a 0
2 3 8 ,9 1 ,1 6 0
# 7 0 2 2 6 9
1 1 2 ,3 4 ,1 0 5
# b 5 1 b 5 8
1 8 1 ,2 7 ,8 8
# e d 3 1 2 f
2 3 ` 7 ,4 9 ,4 7
# f 5 8 a 3 3
2 4 5 ,1 3 8 ,5 1
# 5 f 3 c 2 5
9 5 ,6 0 ,3 7
Styleguide

32. Testing strategy

33. TESTING STRATEGY
3
3
Integration Tests
● Consumer driven
Contracts (CDC)
● Api journey tests

34. TESTING STRATEGY - CDC
3
4
● Frame services is the consumer of
all services
● Frame issues a contract that runs
in all pipelines

35. TESTING STRATEGY - CDC
3
5
Sample of
Frame’s
contract

36. TESTING STRATEGY
3
6
Functional Tests

37. TESTING STRATEGY
3
7
Service level testing
Application Smoke
Test

38. AGENDA
Team and Tech-
stack
Introducing Micro-
frontends
Things to take care
in Micro-frontends
When to choose
Micro-frontends

39. WHEN MICRO-FRONTENDS
● Distributed self-contained teams, with a need for
independent releases.
● Collaborate with different frameworks in the frontend.
● Teams have experience building Microservices application,
and willing to take it to next step.

40. It’s not a sprint, it’s a
marathon.

41. Questions?
Prasanna N Venkatesan@pvenk