Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

54 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 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
  2. 2. 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
  3. 3. developer.okta.com
  4. 4. What About You?
  5. 5. 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
  6. 6. A Brief History of Web Frameworks
  7. 7. The Microservices Explosion 💥 https://martinfowler.com/articles/microservices.html
  8. 8. The Microservices Explosion 💥 Conway's Law in action Service boundaries reinforced by team boundaries
  9. 9. UI Development in a Microservices World 🌎 https://micro-frontends.org
  10. 10. State of the Art in Java + JavaScript https://www.jhipster.tech
  11. 11. JHipster 6 Microservices UI Overview https://youtu.be/-QCuWgLQmdg
  12. 12. ⚡Micro Frontends https://martinfowler.com/articles/micro-frontends.html
  13. 13. ⚡Micro Frontends https://micro-frontends.org
  14. 14. ⚡Micro Frontends https://micro-frontends.org
  15. 15. 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
  16. 16. Frameworks for Micro Frontends Project Mosaic: https://www.mosaic9.org Single-spa: https://single-spa.js.org Demo: https://single-spa.surge.sh
  17. 17. Framework Usage https://twitter.com/mraible/status/1156263974649778176
  18. 18. Real Developer Stories
  19. 19. Other Companies using Micro Frontends https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to- front-end-web-development-f325ebdadc16
  20. 20. 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
  21. 21. 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?
  22. 22. Make some $$ 🤑 https://github.com/jhipster/generator-jhipster/issues/10189
  23. 23. developer.okta.com/blog @oktadev
  24. 24. Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com

×