How to Win at UI Development in the World of Microservices - Utah JUG 2020

You've figured out how to split up your backend services into microservices and scale your teams to the moon! But what about the front-end? Are you still building monoliths for your UI? This session will talk about the history of web frameworks, the microservices explosion, and techniques + frameworks for complementing your microservices with micro frontends. It'll include developer stories from folks implementing micro frontends and recommendations for learning more about them.

Blog post: https://developer.okta.com/blog/2019/08/08/micro-frontends-for-microservices

Transcript

1. How to Win at UI Development in the World of Microservices Feb 13, 2020 Matt Raible | @mraible Photo by Nagaraju Hanchanahal flickr.com/photos/nhanchanahal/7068341215
2. Today’s Agenda History of Web Frameworks The Microservices Explosion UI Development in a Microservices World Real Developer Stories How to Win Photo by Glyn Lowe PhotoWorks flickr.com/photos/glynlowe/10039742285
3. Hi, I’m Matt Raible! Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion Father, Husband, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Bus Lover Okta Developer Advocate
5. developer.okta.com
6. What About You?
7. A Brief History of Web Frameworks
8. The Microservices Explosion https://martinfowler.com/articles/microservices.html
9. The Microservices Explosion Conway's Law in action Service boundaries reinforced by team boundaries
10. UI Development in a Microservices World https://micro-frontends.org
11. State of the Art in Java + JavaScript https://www.jhipster.tech
12. JHipster 6 Microservices UI Overview https://youtu.be/-QCuWgLQmdg
13. ⚡Micro Frontends https://martinfowler.com/articles/micro-frontends.html
14. ⚡Micro Frontends https://micro-frontends.org
15. ⚡Micro Frontends https://micro-frontends.org
16. Techniques Web components as the target output Custom elements to create web components DOM Events to communicate between frontends Server-side rendering and SSI (server-side includes) or ESI (edge-side includes) CDNs and cache-busting as a deployment mechanism
17. Frameworks for Micro Frontends Project Mosaic: https://www.mosaic9.org Single-spa: https://single-spa.js.org Demo: https://single-spa.surge.sh
18. Framework Usage https://twitter.com/mraible/status/1156263974649778176
19. Real Developer Stories
20. Other Companies using Micro Frontends https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to- front-end-web-development-f325ebdadc16
21. Single-spa Success Story https://twitter.com/JustinMcMurdie/status/1227687469534941184
22. How to Win at UI Dev with Microservices Use a monolith with one framework, components, and lazy-loading Use micro frontends that allows any framework, leveraging web components
23. Learn More https://micro-frontends.org https://martinfowler.com/articles/micro-frontends.html CaSE Podcast - https://www.case-podcast.org Micro Frontends with Gustaf Nilsson Kotte Web Frontend with Lucas Dohmen ThoughtWorks Podcast: What’s so cool about micro frontends?
24. Make some $$ https://github.com/jhipster/generator-jhipster/issues/10189
25. Entando Blueprint https://es-entando.github.io/build-your-first-app
26. https://developer.okta.com/blog/2019/08/08/micro-frontends-for-microservices
27. developer.okta.com/blog @oktadev
28. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com
29. developer.okta.com