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
@MatthiasLaug

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

3. 3
Lead Developer with
ThoughtWorks for 2
Years
MatthiasLaug
#java #ruby #javascript #clojure
mlaug@thoughtworks.com

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

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

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

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

8. INTRODUCING MICRO-FRONTENDS
Then came MicroservicesMonolith
web
application
● Strong module boundaries
● Independent deployment
● Technology diversity
But...

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

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

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

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

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

14. 1
4
Composing Multiple
Frontends

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

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

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

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

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

20. 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.

21. Sharing data
between multiple
frontends

22. SHARING DATA - COMPONENT INITIALIZATION

23. SHARING DATA - BROWSER STORE
State
Management
Tools
MobX

24. SHARING DATA - THROUGH DOM EVENTS

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

26. Design consistency

27. 2
7
Design
Issues
UX
Consistency
CSS
Ambiguity

28. CSS AMBIGUITY

29. CSS AMBIGUITY

30. UX CONSISTENCY

31. UX CONSISTENCY
Design
Guild

32. 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

33. Testing strategy

34. TESTING STRATEGY
3
4
Integration Tests
● Consumer driven
Contracts (CDC)
● Functional tests

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

36. TESTING STRATEGY - CDC
3
6
Sample of
Frame’s
contract

37. TESTING STRATEGY
3
7
Functional Tests

38. TESTING STRATEGY
3
8
Service level testing
Application Smoke
Test

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

40. 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.

41. Sustain the pace!

42. Questions?
@MatthiasLaug