SlideShare una empresa de Scribd logo
1 de 28
Descargar para leer sin conexión
How to Win at UI Development in the World of Microservices
Feb 5, 2020
Matt Raible | @mraible
Photo by Keith Cuddeback flickr.com/photos/in2photos/15419811651
#jfokus
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
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
developer.okta.com
What About You?
A Brief History of Web Frameworks
The Microservices Explosion 💥
https://martinfowler.com/articles/microservices.html
The Microservices Explosion 💥
Conway's Law in action Service boundaries reinforced by team boundaries
UI Development in a Microservices World 🌎
https://micro-frontends.org
State of the Art in Java + JavaScript
https://www.jhipster.tech
JHipster 6 Microservices UI Overview
https://youtu.be/-QCuWgLQmdg
⚡Micro Frontends
https://martinfowler.com/articles/micro-frontends.html
⚡Micro Frontends
https://micro-frontends.org
⚡Micro Frontends
https://micro-frontends.org
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
Frameworks for Micro Frontends
Project Mosaic: https://www.mosaic9.org
Single-spa: https://single-spa.js.org
Demo: https://single-spa.surge.sh
Framework Usage
https://twitter.com/mraible/status/1156263974649778176
Real Developer Stories
Other Companies using Micro Frontends
https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-
front-end-web-development-f325ebdadc16
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
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?
Make some $$ 🤑
https://github.com/jhipster/generator-jhipster/issues/10189
Entando Blueprint
https://es-entando.github.io/build-your-first-app
https://developer.okta.com/blog/2019/08/08/micro-frontends-for-microservices
developer.okta.com/blog
@oktadev
Thanks!
Keep in Touch
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/oktadeveloper
developer.okta.com
developer.okta.com

Más contenido relacionado

Más de Matt Raible

Más de Matt Raible (20)

Native Java with Spring Boot and JHipster - Garden State JUG 2021
Native Java with Spring Boot and JHipster - Garden State JUG 2021Native Java with Spring Boot and JHipster - Garden State JUG 2021
Native Java with Spring Boot and JHipster - Garden State JUG 2021
 
Java REST API Framework Comparison - PWX 2021
Java REST API Framework Comparison - PWX 2021Java REST API Framework Comparison - PWX 2021
Java REST API Framework Comparison - PWX 2021
 
Web App Security for Java Developers - PWX 2021
Web App Security for Java Developers - PWX 2021Web App Security for Java Developers - PWX 2021
Web App Security for Java Developers - PWX 2021
 
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
Mobile App Development with Ionic, React Native, and JHipster - Connect.Tech ...
 
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Joker...
 
Web App Security for Java Developers - UberConf 2021
Web App Security for Java Developers - UberConf 2021Web App Security for Java Developers - UberConf 2021
Web App Security for Java Developers - UberConf 2021
 
Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021Java REST API Framework Comparison - UberConf 2021
Java REST API Framework Comparison - UberConf 2021
 
Native Java with Spring Boot and JHipster - SF JUG 2021
Native Java with Spring Boot and JHipster - SF JUG 2021Native Java with Spring Boot and JHipster - SF JUG 2021
Native Java with Spring Boot and JHipster - SF JUG 2021
 
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
Lock That Shit Down! Auth Security Patterns for Apps, APIs, and Infra - Sprin...
 
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
Reactive Java Microservices with Spring Boot and JHipster - Denver JUG 2021
 
Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Get Hip with JHipster - Colorado Springs Open Source User Group 2021Get Hip with JHipster - Colorado Springs Open Source User Group 2021
Get Hip with JHipster - Colorado Springs Open Source User Group 2021
 
JHipster and Okta - JHipster Virtual Meetup December 2020
JHipster and Okta - JHipster Virtual Meetup December 2020JHipster and Okta - JHipster Virtual Meetup December 2020
JHipster and Okta - JHipster Virtual Meetup December 2020
 
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
Java REST API Comparison: Micronaut, Quarkus, and Spring Boot - jconf.dev 2020
 
Security Patterns for Microservice Architectures - SpringOne 2020
Security Patterns for Microservice Architectures - SpringOne 2020Security Patterns for Microservice Architectures - SpringOne 2020
Security Patterns for Microservice Architectures - SpringOne 2020
 
Security Patterns for Microservice Architectures - ADTMag Microservices & API...
Security Patterns for Microservice Architectures - ADTMag Microservices & API...Security Patterns for Microservice Architectures - ADTMag Microservices & API...
Security Patterns for Microservice Architectures - ADTMag Microservices & API...
 
Microservices for the Masses with Spring Boot, JHipster, and OAuth - South We...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - South We...Microservices for the Masses with Spring Boot, JHipster, and OAuth - South We...
Microservices for the Masses with Spring Boot, JHipster, and OAuth - South We...
 
Security Patterns for Microservice Architectures - London Java Community 2020
Security Patterns for Microservice Architectures - London Java Community 2020Security Patterns for Microservice Architectures - London Java Community 2020
Security Patterns for Microservice Architectures - London Java Community 2020
 
Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
Mobile Development with Ionic, React Native, and JHipster - AllTheTalks 2020
 
Security Patterns for Microservice Architectures - Oktane20
Security Patterns for Microservice Architectures - Oktane20Security Patterns for Microservice Architectures - Oktane20
Security Patterns for Microservice Architectures - Oktane20
 
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
Full Stack Reactive with React and Spring WebFlux - Switzerland JUG 2020
 

Último

CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
anilsa9823
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceCALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
anilsa9823
 

Último (20)

Microsoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdfMicrosoft AI Transformation Partner Playbook.pdf
Microsoft AI Transformation Partner Playbook.pdf
 
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected WorkerHow To Troubleshoot Collaboration Apps for the Modern Connected Worker
How To Troubleshoot Collaboration Apps for the Modern Connected Worker
 
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online  ☂️
CALL ON ➥8923113531 🔝Call Girls Kakori Lucknow best sexual service Online ☂️
 
Hand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptxHand gesture recognition PROJECT PPT.pptx
Hand gesture recognition PROJECT PPT.pptx
 
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICECHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
 
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
Short Story: Unveiling the Reasoning Abilities of Large Language Models by Ke...
 
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS LiveVip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
Vip Call Girls Noida ➡️ Delhi ➡️ 9999965857 No Advance 24HRS Live
 
Software Quality Assurance Interview Questions
Software Quality Assurance Interview QuestionsSoftware Quality Assurance Interview Questions
Software Quality Assurance Interview Questions
 
5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf5 Signs You Need a Fashion PLM Software.pdf
5 Signs You Need a Fashion PLM Software.pdf
 
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
Tech Tuesday-Harness the Power of Effective Resource Planning with OnePlan’s ...
 
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
The Real-World Challenges of Medical Device Cybersecurity- Mitigating Vulnera...
 
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
Shapes for Sharing between Graph Data Spaces - and Epistemic Querying of RDF-...
 
Optimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTVOptimizing AI for immediate response in Smart CCTV
Optimizing AI for immediate response in Smart CCTV
 
How To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.jsHow To Use Server-Side Rendering with Nuxt.js
How To Use Server-Side Rendering with Nuxt.js
 
Right Money Management App For Your Financial Goals
Right Money Management App For Your Financial GoalsRight Money Management App For Your Financial Goals
Right Money Management App For Your Financial Goals
 
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
Try MyIntelliAccount Cloud Accounting Software As A Service Solution Risk Fre...
 
HR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.comHR Software Buyers Guide in 2024 - HRSoftware.com
HR Software Buyers Guide in 2024 - HRSoftware.com
 
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AISyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
SyndBuddy AI 2k Review 2024: Revolutionizing Content Syndication with AI
 
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdfThe Ultimate Test Automation Guide_ Best Practices and Tips.pdf
The Ultimate Test Automation Guide_ Best Practices and Tips.pdf
 
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female serviceCALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
CALL ON ➥8923113531 🔝Call Girls Badshah Nagar Lucknow best Female service
 

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