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.

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