How to Win at UI Development in the World of Microservices - THAT Conference 2019

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 August 7, 2019 Matt Raible | @mraible Photo by Matthew Sullivan flickr.com/photos/shoebappa/2186734172 #THATConference
4. Blogger on raibledesigns.com and developer.okta.com/blog Web Developer and Java Champion Father, Husband, Skier, Mountain Biker, Whitewater Rafter Open Source Connoisseur Hi, I’m Matt Raible! Bus Lover Okta Developer Advocate
6. developer.okta.com
7. What About You?
8. 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
9. A Brief History of Web Frameworks
10. The Microservices Explosion https://martinfowler.com/articles/microservices.html
11. The Microservices Explosion Conway's Law in action Service boundaries reinforced by team boundaries
12. UI Development in a Microservices World https://micro-frontends.org
13. State of the Art in Java + JavaScript https://www.jhipster.tech
14. JHipster 6 Microservices UI Overview https://youtu.be/-QCuWgLQmdg
15. ⚡Micro Frontends https://martinfowler.com/articles/micro-frontends.html
16. ⚡Micro Frontends https://micro-frontends.org
17. ⚡Micro Frontends https://micro-frontends.org
18. 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
19. Frameworks for Micro Frontends Project Mosaic: https://www.mosaic9.org Single-spa: https://single-spa.js.org Demo: https://single-spa.surge.sh
20. Framework Usage https://twitter.com/mraible/status/1156263974649778176
21. Real Developer Stories
22. Other Companies using Micro Frontends https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to- front-end-web-development-f325ebdadc16
23. 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
24. 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?
25. Make some $$ https://github.com/jhipster/generator-jhipster/issues/10189
26. developer.okta.com/blog @oktadev
27. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com