A micro frontend architecture is an approach to developing web applications as a composition of small frontend apps. Instead of writing a large monolith frontend application, the application can be broken down into domain-specific micro frontends, which are self-contained and can be developed and deployed independently. Each micro frontend can be owned by verticalised domain specific teams. Micro frontends do have advantages and disadvantages and they are not suitable in many cases. When micro frontends is a potential solution, make sure to use a domain driven top-down approach, with no big design upfronts. Keep it simple! Frontend Developer Love Amsterdam - 30 January 2018

1. Micro Frontends
Extending the Micro Services
Architecture to Web Development
Jan 2018 | Frontend Developer Love @ Usabilla

2. Monolith

3. Monolith

4. Monolith
+ Single codebase
+ Easy quick setup
+ No version management
+ Single CI/CD pipeline

5. Monolith
+ Single codebase
+ Easy quick setup
+ No version management
+ Single CI/CD pipeline
- Refactoring is difficult
- Try new stack
- Experiment
- Long build times
- Long development times
- Long deployment cycles

6. Service 1 Service 2 Service 3
Frontend
Monolith

7. Service 1 Service 2 Service 3
Frontend
Monolith???

8. Service 1 Service 2 Service 3
Frontend
Monolith???
Micro Frontends???

9. Spyros Ioakeimidis
Software Engineer
twitter
@spyros_io
github
@spirosikmd

10. Chapter 1: What? Why?

11. Technology Radar
https://www.thoughtworks.com/radar/techniques/micro-frontends

13. https://twitter.com/svdberg/status/625932935204610048

14. https://twitter.com/mircealungu/status/946878978463289344

15. Service 1 Service 2 Service 3
Frontend
Monolith

16. Service 1 Service 2 Service 3
Frontend 2Frontend 1 Frontend 3

17. > Reusable Code
> Agility
> Reduce risk
> Easier Testing
Service 1 Service 2 Service 3
Frontend 2Frontend 1 Frontend 3

18. Service 1 Service 2 Service 3
Frontend 2Frontend 1 Frontend 3
+ Verticalised teams
+ Self contained
+ Vertical decomposition
+ UI Composition

19. Service 1 Service 2 Service 3
Frontend 2Frontend 1 Frontend 3
+ Verticalised teams
+ Self contained
+ Vertical decomposition
+ UI Composition
- Proprietary solution
- Fit current architecture
- Load times
- Redundancy risk

20. Reporting
Account
Management
Security
Interactions
Single
Responsibility

21. Consistent
Look & UX
Reporting
Account
Management
Security
Interactions

22. Common
Interface
Reporting
Account
Management
Security
Interactions

23. Isolation
Separate
Deployment
Feels Like
One Page
Different
Frameworks
Tree
Shaking
Vendor
Bundles
Several
Frontends
No Version
Conflicts
Separate
Development

24. Chapter 2: How?

25. App Shell FTW!

26. iframe
App Shell
- State
- Routing

27. iframe
App Shell
- State
- Routing
Isolation
Separate Deployment
Feels like one page
Different Frameworks
Tree Shaking
Several Frontends
No Version Conflicts
Separate Development
Vendor Bundles

28. https://github.com/manfredsteyer/meta-router

29. https://github.com/manfredsteyer/meta-router

30. We need to register
routing in the micro
frontend!

31. Web Components
Each app a
component
Again App Shell is
the orchestrator

32. Separate Deployment
Feels like one page
Different Frameworks
Tree Shaking
Several Frontends
Separate Development
Isolation
Vendor Bundles
No Version Conflicts
Web Components
Each app a
component
Again App Shell is
the orchestrator

33. imports
https://github.com/CanopyTax/single-spa
https://github.com/medikoo/event-emitter

34. imports
imports
https://github.com/CanopyTax/single-spa
https://github.com/medikoo/event-emitter

35. Reporting
Account
Management
Security Interactions
/reporting
/account
/editor Hybrid

36. Reporting
Account
Management
Security Interactions
/reporting
/account
/editor
Isolation
Separate Deployment
Feels like one page
Different Frameworks
Vendor Bundles
Tree Shaking (per app)
Several Frontends
Separate Development
No Version Conflicts
Hybrid

37. loads
Move responsibility to micro frontends

38. Chapter 3: Challenges?

39. Integration!

40. Is this a micro frontend?

41. Or are these micro frontends?

42. app-1.js
app-2.js
app.css
app-1.css
app-2.css
…
…
This person suffers

43. Its your time to figure out what
the previous developers had in mind!
We use docker, it should work!
And this person suffers

44. Adaptive, Responsive & Accessible Design

45. Integration
Testing is
probably your
best bet!

46. Chapter 4: Thoughts?

47. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
Can you fit your team
around a large table?
Yes
No
You might not need
micro frontends yet
Micro frontends
might help you

48. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
Can you fit your team
around a large table?
Do you have monolithic
dependencies?
Yes
No
Yes
No
You might not need
micro frontends yet
Micro frontends
might help you
Integration might be
complicated
Micro frontends may
be easily integrated

49. http://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
Can you fit your team
around a large table?
Do you have monolithic
dependencies?
Got container, orchestration,
devops experience?
Yes
No
Yes
No
Yes
No
You might not need
micro frontends yet
Micro frontends
might help you
Micro frontends
might be valuable
Consider giving
them a try first
Integration might be
complicated
Micro frontends may
be easily integrated

50. Extend the monolith?

51. “Architecture in micro frontends is domain driven,
and low level components can be technical driven.
It makes sense to follow a top down approach.
Thinking of how to split your monolith in apps
according to your domain. No big design upfront
as things might go wrong.”
Stefan Tilkov @ Devoxx Belgium 2016

53. https://twitter.com/derberq/status/910056617881817089

54. Thank you!
https://jobs.usabilla.com/

55. https://undraw.co/

56. Check these out!
> https://medium.com/@gilfink/why-im-betting-on-web-components-and-you-should-think-
about-using-them-too-8629396e27a
> https://softwarearchitekt.at/post/2017/12/28/a-software-architect-s-approach-towards-using-
angular-and-spas-in-general-for-microservices-aka-microfrontends.aspx
> https://www.upwork.com/blog/2017/05/modernizing-upwork-micro-frontends/
> https://x-team.com/blog/micro-frontend
> https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-
development-f325ebdadc16
> https://www.packtpub.com/books/content/what-micro-frontend
> https://technologyconversations.com/2015/08/09/including-front-end-web-components-into-
microservices
> https://www.tikalk.com/js/introduction-to-micro-frontends/
> https://micro-frontends.zeef.com/elisabeth.engel?
ref=elisabeth.engel&share=ee53d51a914b4951ae5c94ece97642fc