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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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 ﬂickr.com/photos/glynlowe/10039742285

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

developer.okta.com

Slide 6

Slide 6 text

What About You?

Slide 7

Slide 7 text

A Brief History of Web Frameworks

Slide 8

Slide 8 text

The Microservices Explosion https://martinfowler.com/articles/microservices.html

Slide 9

Slide 9 text

The Microservices Explosion Conway's Law in action Service boundaries reinforced by team boundaries

Slide 10

Slide 10 text

UI Development in a Microservices World https://micro-frontends.org

Slide 11

Slide 11 text

State of the Art in Java + JavaScript https://www.jhipster.tech

Slide 12

Slide 12 text

JHipster 6 Microservices UI Overview https://youtu.be/-QCuWgLQmdg

Slide 13

Slide 13 text

⚡Micro Frontends https://martinfowler.com/articles/micro-frontends.html

Slide 14

Slide 14 text

⚡Micro Frontends https://micro-frontends.org

Slide 15

Slide 15 text

⚡Micro Frontends https://micro-frontends.org

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Frameworks for Micro Frontends Project Mosaic: https://www.mosaic9.org Single-spa: https://single-spa.js.org Demo: https://single-spa.surge.sh

Slide 18

Slide 18 text

Framework Usage https://twitter.com/mraible/status/1156263974649778176

Slide 19

Slide 19 text

Real Developer Stories

Slide 20

Slide 20 text

Other Companies using Micro Frontends https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to- front-end-web-development-f325ebdadc16

Slide 21

Slide 21 text

Single-spa Success Story https://twitter.com/JustinMcMurdie/status/1227687469534941184

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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?

Slide 24

Slide 24 text

Make some $$ https://github.com/jhipster/generator-jhipster/issues/10189

Slide 25

Slide 25 text

Entando Blueprint https://es-entando.github.io/build-your-ﬁrst-app

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

developer.okta.com/blog @oktadev

Slide 28

Slide 28 text

Thanks! Keep in Touch raibledesigns.com @mraible Presentations speakerdeck.com/mraible Code github.com/oktadeveloper developer.okta.com

Slide 29

Slide 29 text

developer.okta.com