Implementing Micro Frontends Using React as we are doing in Logo Maker from Fiverr. In this talk, I will briefly describe how Logo Maker works and how it utilizes microservice architecture.

1. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

2. Yuriy Dadichin
Team Lead.

3. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
If you are small then just enjoy some jokes
Before we start disclaimer.

4. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Fiverr is big.
We are huge and we are growing. We are doing
great on stock and on this year we hit the Super
Bowl!!!

5. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Fiverr is not new to the
world.
Operating on
market
11 years
Gig costs
5$ to 8K$
1M$+ per
year side
projects
3
A lot of successful freelancers

6. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Some stats to provide scale.
Landing page visits per day
1M
10K
80
Logo Maker landing visits
Production deploys per day
800 Running pods
100K Test cases

7. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
● How to deploy?
● How to revert?
● How to scale?
● How to run tests?
● How to migrate?
○ From Ruby to Kotlin
○ From JS to TS
○ From Mongo to GraphDB
Such scale brings us to next
issues.

8. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
● No QA specialists
● Task forces
○ PM, Design
○ TL, FE, BE, BI
● Domain per task force(s)
Some Fiverr specific setup.

9. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Logo Maker is cool.
Very new.
Still in Beta. Making 1M$ a year. In the first year.
Place where you as a seller can enhance your logo
and enhance it more as a buyer exactly for your
taste.

10. Guts.

11. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Logo Maker services diagram.

12. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
● Has http interface
● Works with MongoDB
● Capable to fire events to the
Kafka
● Listens to the user
actions(POST requests)
● Effect in world Redux
● In fact it's ruby from historical
reasons, will be Kotlin
Chimera is:

13. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
● Has http interface
● Works with MongoDB
● Capable to listen to the Kafka
events
● Provide read-optimized
data(GET requests)
● Selector in world Redux
● In fact it's ruby from historical
reasons, will be Kotlin
Phoenix is:

14. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
● Main Front-end unit
● Express based
application
● React
● SSR and client
● AJAX calls handler
● Micro Frontend
Perseus is:

15. Perseus
Is micro FE.

16. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Typical Micro FE scheme .

17. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
● By Feature
● By Section
● By Page
● By Domain
How Split Apps?

18. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Fiverr Does it By Page/Domain.

19. How it works?

20. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

21. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

22. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

23. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

24. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

25. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

26. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Entry point
express app.
On init
Perseus looks at src/apps for app

27. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
For each app.
Perseus app structure and entry

28. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Entry point.
Perseus app structure and entry entries/index.js

29. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
SSR route.
Routes routes/v1.js

30. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
AJAX express
app.
Routes routes/v1.js

31. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Micro frontends will not:
● Make your app faster
● Make your team develop faster
● Make your infrastructure easy
● Nothing simple

32. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Micro frontends will:
● Make it possible to scale:
○ Your app
○ Your team(s)
○ Your infrastructure

33. © 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.
Resources
● https://medium.com/fiverr-engineering
● Front End Resource Sharing in Fiverr’s
Decentralized System
https://medium.com/fiverr-engineering/fro
nt-end-dependency-sharing-19ed0ce9089
e
● Domain-Driven Design Case study:
Introducing Fiverr Logo Maker
https://medium.com/fiverr-engineering/do
main-driven-design-case-study-introducin
g-fiverr-logo-maker-94f0339e41aa
● Implementing Micro Frontends Using React
https://medium.com/swlh/implementing-mi
cro-frontends-using-react-8d23b7e0a687
● https://medium.com/bb-tutorials-and-thou
ghts/how-to-implement-micro-frontend-ar
chitecture-with-react-5ab172a0fec7

34. Thank
you.
© 2020 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.