Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SMALL PIECES
LOOSELY JOINED
A High-Performance Solution to
Microservice UI Composition
ARIF WIDER
Microservices
Scala
Data
“[The web] is enabling us to rediscover what we've always
known about being human: we are connected creatures
in a connect...
I do
everything
PROJECT TATSU @ AUTOSCOUT24
- Breaking apart the monolith using Microservices
- Moving out of the datacenter and to the AW...
“[...]composition is the placement or arrangement of [...]
elements or ingredients in a work of art, as distinct from
the ...
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
borin...
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
Header
Footer
Home
CSS
HTML
JS
CSS
HTML
JS
CSS HTML JS
CSS HTML JS
CSS HTML JS
CSS HTML JS
Grea...
UI COMPOSITION
Web app
Ads
Header
Footer
Home
HTML
JS
HTML JS
HTML JS
Tricky to get page
performance right
CSS HTML JS
CSS...
ALTERNATIVES
API GATEWAY PATTERN
Mobile apps Web app
API Gateway
Ads
Header
Footer
Home
Bad for team
autonomy
Great for page
performanc...
Jigsaw
nginx
proxy
(Service
definitions)
2
Elasticache
ngx_pagespeed
ngx_srcache
/home
Header SSI
Index HTML
Footer SSI
3
...
Pages
are publicly accessible
get called from the client
include fragments
could be cacheable
define contracts
are parts o...
SSI Include
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css used by this page (not by the fragment...
SSI Include Resolved
20
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css used by this page (not by ...
ngx_pagespeed: combine heads
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css used by this page (no...
ngx_pagespeed: combine CSS & JS
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css by pagespeed -->
<...
Page Performance of Composed Page
Page Performance of Composed Page
Jigsaw Header
Footer
Homepage
Development
machine
HeaderJigsaw
LOCAL TESTING
SUMMARY
Ideal for autonomous teams
Very low response times
Dynamically optimized
content
THANK YOU
For questions or suggestions:
Arif Wider - awider@thoughtworks.com
Moritz Heiber - mheiber@thoughtworks.com
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
Upcoming SlideShare
Loading in …5
×

A High-Performance Solution to Microservice UI Composition @ XConf Hamburg

2,901 views

Published on

A presentation given at XConf Hamburg by Moritz Heiber and Arif Wider

Published in: Technology
  • Be the first to comment

A High-Performance Solution to Microservice UI Composition @ XConf Hamburg

  1. 1. SMALL PIECES LOOSELY JOINED A High-Performance Solution to Microservice UI Composition
  2. 2. ARIF WIDER Microservices Scala Data
  3. 3. “[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
  4. 4. I do everything
  5. 5. 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 Windows https://github.com/AutoScout24/scout24-it-principles
  6. 6. “[...]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)
  7. 7. 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!
  8. 8. Irish Chambre Orchestra: http://www.irishchamberorchestra.com/press/press-releases/
  9. 9. © arte.tv / picture-alliance / dpa Thomas Hengelbrock
  10. 10. JIGSAW
  11. 11. Autonomous teams As fast and compliant as possible “Small pieces loosely joined” You want people to use this, right? vs
  12. 12. UI COMPOSITION Web app Ads Header Footer Home CSS HTML JS CSS HTML JS CSS HTML JS CSS HTML JS CSS HTML JS CSS HTML JS Great for team autonomy Bad page performance
  13. 13. UI COMPOSITION Web app Ads Header Footer Home HTML JS HTML JS HTML JS Tricky to get page performance right CSS HTML JS CSS HTML JS CSS HTML JS CSS CSS CSS
  14. 14. ALTERNATIVES
  15. 15. API GATEWAY PATTERN Mobile apps Web app API Gateway Ads Header Footer Home Bad for team autonomy Great for page performance Unified UI frontend
  16. 16. Jigsaw nginx proxy (Service definitions) 2 Elasticache ngx_pagespeed ngx_srcache /home Header SSI Index HTML Footer SSI 3 Browser1 SSI module 4 /contentservice Header HTML Footer HTML SSI req 5 ngx_pagespeed HTML CSS JS 6 7
  17. 17. 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
  18. 18. 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>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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>
  22. 22. Page Performance of Composed Page
  23. 23. Page Performance of Composed Page
  24. 24. Jigsaw Header Footer Homepage Development machine HeaderJigsaw LOCAL TESTING
  25. 25. SUMMARY Ideal for autonomous teams Very low response times Dynamically optimized content
  26. 26. THANK YOU For questions or suggestions: Arif Wider - awider@thoughtworks.com Moritz Heiber - mheiber@thoughtworks.com

×