A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
-
Upload
arif-wider -
Category
Technology
-
view
946 -
download
1
Transcript of A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
![Page 1: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/1.jpg)
SMALL PIECESLOOSELY JOINED
A High-Performance Solution toMicroservice UI Composition
![Page 2: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/2.jpg)
ARIF WIDERMicroservices Scala Data
![Page 3: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/3.jpg)
![Page 4: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/4.jpg)
“[The web] is enabling us to rediscover what we've always known about being human: we are connected creatures in a connected world about which we care passionately.”
David Weinberger - “Small Pieces Loosely Joined” via Wikipedia: https://en.wikipedia.org/wiki/Small_Pieces_Loosely_Joined
![Page 5: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/5.jpg)
I do everything
![Page 6: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/6.jpg)
PROJECT TATSU @ AUTOSCOUT24
- Breaking apart the monolith using Microservices
- Moving out of the datacenter and to the AWS cloud
- Focus on the JVM and Scala in favor of .NET/C#- Run it all on Linux instead of Windowshttps://github.com/AutoScout24/scout24-it-principles
![Page 7: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/7.jpg)
“[...]composition is the placement or arrangement of [...] elements or ingredients in a work of art, as distinct from the subject of a work.”
Wikipedia: https://en.wikipedia.org/wiki/Composition_(visual_arts)
![Page 8: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/8.jpg)
I can do stuff!
Me too!I can do two things at once!
I wish I could do stuff!
I love lamp!
Woo! I’m here!
I’m really boring but important
What am I supposed to do?
I can do other stuff!
![Page 9: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/9.jpg)
Irish Chambre Orchestra: http://www.irishchamberorchestra.com/press/press-releases/
![Page 10: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/10.jpg)
© arte.tv / picture-alliance / dpa
Thomas Hengelbrock
![Page 11: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/11.jpg)
JIGSAW
![Page 12: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/12.jpg)
Autonomous teams
As fast and compliant as possible
“Small pieces loosely joined”
You want people to use this, right?
vs
![Page 13: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/13.jpg)
UI COMPOSITION
Web app
Ads
HeaderFooter
Home
CSSHTMLJS CSS
HTMLJS
CSS HTML JS
CSS HTML JS
CSS HTML JS
CSS HTML JS
Great for teamautonomy
Bad page performance
![Page 14: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/14.jpg)
UI COMPOSITION
Web app
Ads
HeaderFooter
HomeHTMLJS
HTML JS
HTML JS Tricky to get page performance right
CSS HTML JS
CSS HTML JS
CSSHTMLJS
CSS CSS CSS
![Page 15: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/15.jpg)
ALTERNATIVES
![Page 16: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/16.jpg)
API GATEWAY PATTERN
Mobile apps
Web app
API Gateway
AdsHeade
rFooter
Home
Bad for team autonomy
Great for page performance
Unified UI frontend
![Page 17: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/17.jpg)
Jigsaw
nginxproxy(Service definitions)
2
Elasticache
ngx_pagespeed
ngx_srcache
/home
Header SSIIndex HTMLFooter SSI
3
Browser1
SSI module
HTML + S
SI inclu
des
4
/contentservice
Header HTMLFooter HTML
SSI req
5
ngx_pagespeed
HTMLCSSJS
6
7
![Page 18: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/18.jpg)
Pages
are publicly accessible
get called from the client
include fragments
could be cacheable
define contracts
are parts of a page
get called from nginx SSI
could include fragments
should be cacheable
adhere to contracts
Fragments
![Page 19: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/19.jpg)
SSI Include<html> <head> <title>AutoScout24</title> <!-- Minified and combined css used by this page (not by the fragments) --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> </head> <body> <!--#include virtual="/headerservice/fragment/header_de_DE" --> Lorem ipsum.... <!-- Minified and combined javascript used by this page --> <script type="text/javascript" src="/assets/home/66ee72f9-main.min.js"></script> </body> </html>
![Page 20: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/20.jpg)
SSI Include Resolved
20
<html> <head> <title>AutoScout24</title> <!-- Minified and combined css used by this page (not by the fragments) --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> </head> <body> <head> <!-- Minified and combined css used by this fragment --> <link rel="stylesheet" href="/assets/headerservice/08ffaf28-main.min.css" /> </head> <ul><li>Home</li><li>Search</li><li>Sell</li></ul> <script type="text/javascript" src="/assets/headerservice/26ed612f-main.js"></script> Lorem ipsum.... <!-- Minified and combined javascript used by this page --> <script type="text/javascript" src="/assets/home/66ee72f9-main.min.js"></script> </body> </html>
![Page 21: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/21.jpg)
ngx_pagespeed: combine heads<html> <head> <title>AutoScout24</title> <!-- Minified and combined css used by this page (not by the fragments) --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> <link rel="stylesheet" href="/assets/headerservice/08ffaf28-main.min.css" /> </head> <body> <ul><li>Home</li><li>Search</li><li>Sell</li></ul> <script type="text/javascript" src="/assets/headerservice/26ed612f-main.js"></script> Lorem ipsum.... <!-- Minified and combined javascript used by this page --> <script type="text/javascript" src="/assets/home/66ee72f9-main.min.js"></script> </body> </html>
![Page 22: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/22.jpg)
ngx_pagespeed: combine CSS & JS<html> <head> <title>AutoScout24</title> <!-- Minified and combined css by pagespeed --> <link rel="stylesheet" href="/assets/home,,_ebacb8194-main.min.css +headerservice,,_08ffaf28-main.min.css" /> </head> <body> <ul><li>Home</li><li>Search</li><li>Sell</li></ul> Lorem ipsum.... <!-- Minified and combined js by pagespeed --> <script type="text/javascript" href="/assets/home,,_ebacb8194-main.min.js +headerservice,,_08ffaf28-main.min.js" defer async /> </body> </html>
![Page 23: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/23.jpg)
Page Performance of Composed Page
![Page 24: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/24.jpg)
Page Performance of Composed Page
![Page 25: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/25.jpg)
Jigsaw Header
Footer
Homepage
Development machine
HeaderJigsaw
LOCAL TESTING
![Page 26: A High-Performance Solution to Microservice UI Composition @ XConf Hamburg](https://reader031.fdocuments.in/reader031/viewer/2022022415/586f733a1a28ab10258b56b9/html5/thumbnails/26.jpg)
SUMMARY
Ideal for autonomous teamsVery low response times
Dynamically optimized content