Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend...
Transcript of Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend...
![Page 1: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/1.jpg)
Micro FrontendsCreating complex and integrated distributed
systems
![Page 2: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/2.jpg)
Once upon a time...
In recent years, microservices have exploded in popularity, with many organisations using this architectural style to avoid the limitations of large, monolithic backends. While much has been written about this style of building server-side software, many companies continue to struggle with monolithic frontend codebases
![Page 3: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/3.jpg)
Monolith...
Fron
tend
Back
end
Product Team
![Page 4: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/4.jpg)
Front-end & Back-end...
Fron
tend
Back
end
Frontend Team
Backend Team
API
![Page 5: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/5.jpg)
Microservice
Fron
tend
Back
end
Frontend Team
Mic
rose
rvic
eAPI
Mic
rose
rvic
e
Mic
rose
rvic
e
Mic
rose
rvic
e
![Page 6: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/6.jpg)
Micro frontend
![Page 7: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/7.jpg)
Microfrontend
"An architectural style where independently deliverable frontend applications are composed into a greater whole"
- Martin Fowler, 2016
![Page 8: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/8.jpg)
Microfrontend
Fron
tend
Back
end
Frontend Team
APITe
am G
reen
Team
Blu
e
Team
Red
Team
Ora
nge
![Page 9: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/9.jpg)
Microfrontend
![Page 10: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/10.jpg)
Microfrontend
![Page 11: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/11.jpg)
Integration approaches
![Page 12: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/12.jpg)
App shell
Web Components
![Page 13: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/13.jpg)
App shell
iFrames
![Page 14: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/14.jpg)
App shell
Hybrid
![Page 15: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/15.jpg)
Real Example App Shell - team orangetea
m BLU
E
team
RED
![Page 16: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/16.jpg)
“ No silver bullet.
- Fred Brooks, 1986
![Page 17: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/17.jpg)
Microfrontend - Benefits vs Downsides
Incremental upgrades
Simple, decoupled codebases
Independents deployment
Autonomous teams
In a nutshell
Payload Size
Environment differences
Operational and Governance Complexity
![Page 18: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/18.jpg)
Questions
Can you fit your team around a large table?
You might not need micro frontends yet
Micro frontends might help you
Yes
No
Do you have monolithic dependencies?
Integration might be complicated
Micro frontends may be easily integrated
Yes
No
Got devops experience?
Micro frontends might be valuable
Consider giving them a try first
Yes
No
![Page 19: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/19.jpg)
Projects Initiatives
![Page 20: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/20.jpg)
Project Mosaic
![Page 21: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/21.jpg)
PuzzleJs
![Page 22: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/22.jpg)
Get our hands dirty!
![Page 23: Micro Frontends - Prodemge..."An architectural style where independently deliverable frontend applications are composed into a greater whole"-Martin Fowler, 2016 Microfrontend Frontend](https://reader033.fdocuments.us/reader033/viewer/2022060301/5f085f737e708231d421afed/html5/thumbnails/23.jpg)
Referenceshttps://www.slideshare.net/YugoSakamoto1/state-of-micro-frontend-114560988
https://pt.slideshare.net/spyrosioakeimidis/micro-frontends-86962142
https://www.mosaic9.org/
https://github.com/puzzle-js/puzzle-js/blob/master/docs/guide.md#architecture
https://www.dwmkerr.com/the-death-of-microservice-madness-in-2018/
https://martinfowler.com/articles/micro-frontends.html
https://www.thoughtworks.com/pt/radar/techniques?blipid=1035
https://micro-frontends.org/
https://medium.com/javascript-in-plain-english/microfrontends-bringing-javascript-frameworks-together-react-angular-vue-etc-5d401cb0072b