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

72a2082c6a4dd79ad68befb3db911616?s=47 Matt Raible
February 13, 2020

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

72a2082c6a4dd79ad68befb3db911616?s=128

Matt Raible

February 13, 2020
Tweet

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
  4. None
  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