This document discusses microfrontends architecture. It begins by explaining why an organization may want to use a microfrontends approach, such as when different teams in different locations need to work on the same project simultaneously. It then discusses some of the downsides of a monorepo approach and when a monorepo may be preferable to microfrontends. The document outlines some of the challenges microfrontends can present and why they can also be a good choice. It provides examples of how to divide an app into microfrontends, such as by routes, features, or a combination, and options for using different frameworks within microfrontends like web components, module federation, and iframes. It concludes by discussing testing and development

1. MicroFrontends
Architecture
August 2021
Karpenko
Liliia
Summer. Sea. JavaScript.

2. Experience: 9+ yearsof development, mostlyFE,JS, TSand
Reactoriented
Current Position:Team Lead(SoftwareDelivery Manager)at
Alteryx
Hobbies: Sport(Fitness/CrossFit/Volleyball/Tennis)+ Self-
development (Coaching/Psychology)+ Traveling +Music
(Guitar,Piano,Vocal)

3. Why are we talking about Micro Frontends?

5. Why MicroFrontends Architecture?
1. Some partsofapplication,canbeusedbyotherproducts
2. Differentteams in differentcountries,thatwill workonthe projectin differenttime zones,so MF is an
answer
3. Convey Law

6. Why MonoRepo is not for us?
1. A bunchofMR in 1repo, andwespendatonof time toreview them
2. Teamsshouldsomehow splitappbydirectories, orotherzonesofresponsibilityto makeit less painful
3. Resolveconflicts
4. Maintaintestsandpipeline
5. Nodiversity between backendandfrontend

7. Where Mono Repo can be good and when?
1. Thereisonly1 teamthatwill develop theapp
2. The appis notbig, it’s asmall simple app
3. Wedon’tspend alot oftime forintegrationtesting
4. Everythingis in 1 placeandfollow thesamerules

8. Why MicroFrontends can cause pain?
1. Youshouldinvest andspend timeonintegrationtesting tomakesureeverything workstogether
2. Some thingscanbedone fasterandeasier,if it is MonoRepo

9. Why MicroFrontends is a good choice?
1. Appsaresmall andit’seasytomaintain
2. Testsaresimplertorun,theysmall andindependent
3. It tookless time toruntestsin pipeline, means CI/CDbecomes smaller
4. Youcanchoosedifferentframeworksandtechnologiesforeach MFe, you
canuseReact/View/Angularandnothingcanstopyou!

10. How to organize MFe architecture?

11. Micro FrontendApps

12. What are options to divide App into MFe?
1. ByRoutes/Pages/Domains
2. ByFeatures/Differentpartsofapp
3. ByRoutesandFeatures

13. Putting all together

14. But first, answerthe question: do you
want to use one framework or different
ones?

15. Using different Frameworks
1. WebComponents
2. Webpackmodulefederation
3. Nginx
4. Iframes
5. NPM dependencies

16. Web Components
This technologyhelps youreusethe codeandcreateelements, thatareencapsulated
Createour own custom elements and then reuse them in different parts of the app.
Createyour custom elements andattach them tothe ShadowRoot of HTML
UseHTML template with <template> и <slot> components, andthen use simple DOM apiAPI,
clone elements, and attach them toDOM.

17. Webpack module federation
Multiple separatebuildsthatforma single application.

18. Nginx
This onlyworksforPage basedMFe, andthelogic ofserving the pages areonthe backendside.

19. Iframes
This isalsoavalid solution,so youcancreatedifferentApps,andthenrender eachof themin separateIframe

20. NPMdependencies
EachpartofApplication,is aseparateNPM module,
thatexportsas defaultsingle component,thatcanbe
thenimportedin themainApplication.
Main App
AppdividedbyRoutes

22. It’s time
to see
some
code =)

23. How to develop locallywithoutpublishingthe
packages?
npm link || yalc
This toolswill helpus switchtolocal version ofa package
Add local version of code to the node_modules dir
Createa link tolocal version of code, but does not replace the code in node_modules

24. What about testing?

25. Testing
1. Tests is written using react-testing-library
2. Add tests to each MFe
3. Test the main application for correct routing

26. Thank you for attention!
Want totalk?
Find me in a crowd =)