a high-performance solution to microservice ui composition @ xconf hamburg
TRANSCRIPT
SMALL PIECESLOOSELY JOINED
A High-Performance Solution toMicroservice UI Composition
ARIF WIDERMicroservices Scala Data
“[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
I do everything
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
“[...]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)
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!
Irish Chambre Orchestra: http://www.irishchamberorchestra.com/press/press-releases/
© arte.tv / picture-alliance / dpa
Thomas Hengelbrock
JIGSAW
Autonomous teams
As fast and compliant as possible
“Small pieces loosely joined”
You want people to use this, right?
vs
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
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
ALTERNATIVES
API GATEWAY PATTERN
Mobile apps
Web app
API Gateway
AdsHeade
rFooter
Home
Bad for team autonomy
Great for page performance
Unified UI frontend
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
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
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>
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>
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>
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 Performance of Composed Page
Page Performance of Composed Page
Jigsaw Header
Footer
Homepage
Development machine
HeaderJigsaw
LOCAL TESTING
SUMMARY
Ideal for autonomous teamsVery low response times
Dynamically optimized content
