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.
www.autoscout24.com
www.autoscout24.com
An Unexpected Solution To
Microservices UI Composition
Munich | 01/12/2016 | Johan...
Motivation
Project Tatsu
Project Tatsu:
From a .NET-Monolith to AWS-hosted Microservices
3
Project Tatsu: Goals
4
• Attract talent
• Reduce time to market
• Release new features quickly (for test or production)
• ...
Autonomous Teams, Loosely Coupled Services
5
Allow for cross-functional teams that are able to
independently create, impro...
Don't Compromise Page Performance
6
• Achieve PageSpeed Insights score of 95+
• Strive for low latency
• Benefit from cach...
Breaking the Monolith
The API Gateway Pattern
7
API Gateway Pattern
8
Home
Header/
Footer
Ads
API Gateway
Mobile
apps
API Gateway Pattern - Drawbacks
9
• No independent feature releases possible
• Web UI monolith
• API monolith
• Danger of ...
Breaking the Monolith
The UI Composition Pattern
10
UI Composition Pattern
11
HomeAds
Header/Footer
Challenges of UI Composition
12
• Combine HTML
• Let services deliver their own styles and JavaScript
• HTML and asset ver...
First Attempt
Varnish & ESI
Varnish & ESI
14
ESI Include
15
<html>
<head>
<title>AutoScout24</title>
<!-- CSS of page -->
<link rel="stylesheet" href="/assets/home/eba...
ESI Include Resolved
16
<html>
<head>
<title>AutoScout24</title>
<!-- CSS of page -->
<link rel="stylesheet" href="/assets...
Multiple ESI Includes
17
<html>
<head>
<title>AutoScout24</title>
<!-- CSS of page -->
<link rel="stylesheet" href="/asset...
Multiple ESI Includes Resolved
18
<html>
<head>
<title>AutoScout24</title>
<!-- CSS for page -->
<link rel="stylesheet" hr...
Varnish & ESI
Composition Issues
19
• Bad page performance because of page structure
• Tries to optimize the page structur...
Varnish & ESI
Additional Issues
20
• Combining assets with ESI adds lots of complexity
• Varnish cannot strong cache asset...
Requirements for a better solution
21
• References to asset URIs need to be included in HTML
snippet
• Therefore post-proc...
Jigsaw
How to solve it
Jigsaw Components
23
Request Flow
24
Request Flow
25
Request Flow
26
Request Flow
27
Request Flow
28
Pages
29
are publicly accessible
get called from the client
include fragments
could be cacheable
define contracts
are part...
SSI Include
30
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css used by this page (not by the fragm...
SSI Include Resolved
31
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css used by this page (not by ...
ngx_pagespeed: combine heads
32
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css used by this page ...
ngx_pagespeed: Combine CSS & JS
33
<html>
<head>
<title>AutoScout24</title>
<!-- Minified and combined css by pagespeed --...
Page Performance of Composed Page
34
Page Performance of Composed Page
35
Caching
36
Recap
37
Pagespeed Cache
38
• Caches generated assets
• memcached (ElastiCache on AWS)
• state is externalized to AWS
• allows for ...
nginx Proxy Cache
39
• Caches responses from upstream services
• Respects cache headers from upstream services
• Supports ...
Jigsaw Caching of Assets
40
Jigsaw Caching of Assets
41
Jigsaw Caching of Documents
42
Jigsaw Caching of Documents
43
Jigsaw Caching of Documents with Vary Header
44
Testing
Local Testing
46
Jigsaw Docker Container
47
Jigsaw Best Practice Analyzer
48
• Checks HTML code for anti-patterns
• defer async
• page barriers (inline scripts)
• CSS...
Things yet to be solved
49
• Authentication is not in scope yet
• A/B testing of fragments
• JavaScript integration / inte...
Conclusion
Features of the UI Composition Solution
51
• Teams are in full control of their service's UI and do
not need rely on other...
Learnings and Practices
52
• Try to keep composition layer as simple as possible!
• Stick to HTTP protocol use cases
• All...
www.autoscout24.com
www.autoscout24.com
Thank you!
Questions?
Contact:
jmueller@autoscout24.com
awider@thoughtworks.com
Upcoming SlideShare
Loading in …5
×

An Unexpected Solution to Microservices UI Composition

12,507 views

Published on

A talk by Johannes Müller (Autoscout24) and Arif Wider (ThoughtWorks) at the Microservice Meetup Munich on January 12th 2016

Published in: Technology
  • Be the first to comment

An Unexpected Solution to Microservices UI Composition

  1. 1. www.autoscout24.com www.autoscout24.com An Unexpected Solution To Microservices UI Composition Munich | 01/12/2016 | Johannes Müller and Arif Wider
  2. 2. Motivation Project Tatsu
  3. 3. Project Tatsu: From a .NET-Monolith to AWS-hosted Microservices 3
  4. 4. Project Tatsu: Goals 4 • Attract talent • Reduce time to market • Release new features quickly (for test or production) • Enable teams to innovate independently
  5. 5. Autonomous Teams, Loosely Coupled Services 5 Allow for cross-functional teams that are able to independently create, improve, and run their services.  Avoid tight coupling as much as possible!
  6. 6. Don't Compromise Page Performance 6 • Achieve PageSpeed Insights score of 95+ • Strive for low latency • Benefit from caching whereever possible tricky to combine with high team autonomy
  7. 7. Breaking the Monolith The API Gateway Pattern 7
  8. 8. API Gateway Pattern 8 Home Header/ Footer Ads API Gateway Mobile apps
  9. 9. API Gateway Pattern - Drawbacks 9 • No independent feature releases possible • Web UI monolith • API monolith • Danger of adding more and more logic to the API layer • Duplicated controller logic in the API gateway
  10. 10. Breaking the Monolith The UI Composition Pattern 10
  11. 11. UI Composition Pattern 11 HomeAds Header/Footer
  12. 12. Challenges of UI Composition 12 • Combine HTML • Let services deliver their own styles and JavaScript • HTML and asset versions must be consistent • Page structure must not break page performance • Request latency needs to stay low • Independent and integration testing of UI components
  13. 13. First Attempt Varnish & ESI
  14. 14. Varnish & ESI 14
  15. 15. ESI Include 15 <html> <head> <title>AutoScout24</title> <!-- CSS of page --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> </head> <body> <!-- ESI include of header --> <esi:include src="http://content.as24.com/fragment/header_de_DE" /> Lorem ipsum.... <!-- JavaScript of page --> <script src="/assets/home/66ee72f9-main.min.js"></script> </body> </html>
  16. 16. ESI Include Resolved 16 <html> <head> <title>AutoScout24</title> <!-- CSS of page --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> </head> <body> <!-- CSS of fragment --> <link rel="stylesheet" href="http://content.as24.com/assets/08ffaf28-main.min.css" /> <ul><li>Home</li><li>Search</li><li>Sell</li></ul> <!-- JavaScript of fragment --> <script src="http://content.as24.com/assets/26ed612f-main.min.js"></script> Lorem ipsum.... <!-- JavaScript of page --> <script src="/assets/home/66ee72f9-main.min.js"></script> </body> </html>
  17. 17. Multiple ESI Includes 17 <html> <head> <title>AutoScout24</title> <!-- CSS of page --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> <!-- ESI include for header CSS --> <esi:include src="http://content.example.com/fragment/header_styles" /> </head> <body> <!-- ESI include for header --> <esi:include src="http://content.example.com/fragment/header_de_DE" /> Lorem ipsum.... <!-- JavaScript for page --> <script src="/assets/home/66ee72f9-main.min.js"></script> <!-- ESI include for header JavaScript --> <esi:include src="http://content.example.com/fragment/header_scripts" /> </body> </html>
  18. 18. Multiple ESI Includes Resolved 18 <html> <head> <title>AutoScout24</title> <!-- CSS for page --> <link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" /> <!-- CSS for header --> <link rel="stylesheet" href="http://content.example.com/assets/08ffaf28-main.css" /> </head> <body> <ul><li>Home</li><li>Search</li><li>Sell</li></ul> Lorem ipsum.... <!-- JavaScript for page --> <script src="/assets/home/66ee72f9-main.min.js"></script> <!-- JavaScript for header --> <script src="http://content.example.com/assets/26ed612f-main.js"></script> </body> </html>
  19. 19. Varnish & ESI Composition Issues 19 • Bad page performance because of page structure • Tries to optimize the page structure led to increased complexity regarding the asset handling • High burden on the content providing teams
  20. 20. Varnish & ESI Additional Issues 20 • Combining assets with ESI adds lots of complexity • Varnish cannot strong cache assets combined with ESI • AWS ELB as Varnish backend wasn’t working (multiple short-lived IPs)
  21. 21. Requirements for a better solution 21 • References to asset URIs need to be included in HTML snippet • Therefore post-processing of references is required • Support for combined assets • Support for inlining CSS/JS • Support for shared cache between instances
  22. 22. Jigsaw How to solve it
  23. 23. Jigsaw Components 23
  24. 24. Request Flow 24
  25. 25. Request Flow 25
  26. 26. Request Flow 26
  27. 27. Request Flow 27
  28. 28. Request Flow 28
  29. 29. Pages 29 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
  30. 30. SSI Include 30 <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>
  31. 31. SSI Include Resolved 31 <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>
  32. 32. ngx_pagespeed: combine heads 32 <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>
  33. 33. ngx_pagespeed: Combine CSS & JS 33 <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>
  34. 34. Page Performance of Composed Page 34
  35. 35. Page Performance of Composed Page 35
  36. 36. Caching 36
  37. 37. Recap 37
  38. 38. Pagespeed Cache 38 • Caches generated assets • memcached (ElastiCache on AWS) • state is externalized to AWS • allows for stateless web server machines • no cache synchronization • no cold cache
  39. 39. nginx Proxy Cache 39 • Caches responses from upstream services • Respects cache headers from upstream services • Supports cache key control via Vary Header • AWS ElastiCache (via ngx_srcache module)
  40. 40. Jigsaw Caching of Assets 40
  41. 41. Jigsaw Caching of Assets 41
  42. 42. Jigsaw Caching of Documents 42
  43. 43. Jigsaw Caching of Documents 43
  44. 44. Jigsaw Caching of Documents with Vary Header 44
  45. 45. Testing
  46. 46. Local Testing 46
  47. 47. Jigsaw Docker Container 47
  48. 48. Jigsaw Best Practice Analyzer 48 • Checks HTML code for anti-patterns • defer async • page barriers (inline scripts) • CSS outside of <head> • stylesheet refs with different attributes • Assets not located in /assets/ • Can run in a deployment pipeline
  49. 49. Things yet to be solved 49 • Authentication is not in scope yet • A/B testing of fragments • JavaScript integration / interaction • Bootstrap fragment / common things • Native mobile apps
  50. 50. Conclusion
  51. 51. Features of the UI Composition Solution 51 • Teams are in full control of their service's UI and do not need rely on others when changing it • Fragments have a simple structure with head, body and script parts • Page performance is not compromised • Jigsaw serves as an effective cache layer • Fragments can be tested in isolation, and in integration with other pages or fragments
  52. 52. Learnings and Practices 52 • Try to keep composition layer as simple as possible! • Stick to HTTP protocol use cases • Allow services to control Jigsaw's caching behavior • Isolate fragments by CSS and JS packages • Try hard to have good documentation
  53. 53. www.autoscout24.com www.autoscout24.com Thank you! Questions? Contact: jmueller@autoscout24.com awider@thoughtworks.com

×