SlideShare a Scribd company logo
www.autoscout24.com
www.autoscout24.com
An Unexpected Solution To
Microservices UI Composition
Munich | 01/12/2016 | Johannes Müller and Arif Wider
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)
• Enable teams to innovate independently

Recommended for you

Patterns for Enterprise Integration Success
Patterns for Enterprise Integration Success Patterns for Enterprise Integration Success
Patterns for Enterprise Integration Success

WSO2 is a global open source software company that provides a middleware platform for enterprise integration. This document discusses integration patterns that can be implemented using WSO2's middleware products, including the Enterprise Service Bus (ESB), which supports all enterprise integration patterns and can integrate disparate systems. Specific patterns covered include service orchestration, RESTful integration, SAP integration, guaranteed delivery, API facades, cloud-to-cloud and cloud-to-on-premise integration, high availability, and security patterns. Real-world use cases demonstrate how to achieve integration for connected businesses.

 
by WSO2
wso2 webinars
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019

Get to know the new AMA application, the most important basic features of it, the differences between the Community and Enterprise version, and how you could extend it using our new plugin system. What the differences are between AMA and the APS, and what challenges we had during its development.

alfrescodevcondevcon2019
Microservices Journey Summer 2017
Microservices Journey Summer 2017Microservices Journey Summer 2017
Microservices Journey Summer 2017

We consider a microservices architecture to achieve an end goal, not because it's "the cool thing to do". Every organization looking to adopt this architecture must realize (and adhere) to a set of foundational principles. Guided by those principles, we can correctly choose the technology to help support a microservices architecture and meet our end goals. This talk explains those core principles and gives you the tools needed for your microservices journey.

camelkubernetesopenshift
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!
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
Breaking the Monolith
The API Gateway Pattern
7
API Gateway Pattern
8
Home
Header/
Footer
Ads
API Gateway
Mobile
apps

Recommended for you

MS Insights Brazil 2015 containers and devops
MS Insights Brazil 2015   containers and devopsMS Insights Brazil 2015   containers and devops
MS Insights Brazil 2015 containers and devops

Talking about DevOps and containers at MS Insights Sao Paolo 2015. Talking about containers being or not the solution to implementing DevOps practices ? This talk includes a demonstration that show the integration between Visual Studio Online, Docker Hub and GitHub for continuous integration and automated deployment.

brazilgithubdevops
Going MicroServices with Net
Going MicroServices with NetGoing MicroServices with Net
Going MicroServices with Net

This document discusses starting microservices with .NET. It begins with an introduction to microservices and the benefits of using them, such as improved scalability and resilience. It then covers common microservice patterns and technologies like API gateways, messaging, CQRS/DDD, and containers. Specific .NET tools are presented, including Ocelot for API gateways, RabbitMQ for messaging, MediatR for CQRS/events, and Docker for containers. The document emphasizes building microservices with failure in mind using techniques like retries, circuit breakers, and exponential backoff.

microservices.netmicrosoft
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entitySpring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity

The presentation explains the journey from a monolithic architecture to Spring Cloud Microservices for application development inside a financial entity, along with the transition to DevOps strategies… a journey that has just begun…

javasoftware developmentcloud computing
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
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 versions must be consistent
• Page structure must not break page performance
• Request latency needs to stay low
• Independent and integration testing of UI components

Recommended for you

API Microservices with Node.js and Docker
API Microservices with Node.js and DockerAPI Microservices with Node.js and Docker
API Microservices with Node.js and Docker

Microservices with Node & Docker allow for building and deploying applications as independent services that can scale independently. Docker provides lightweight isolated environments for running services, while Node is well-suited as a platform due to its asynchronous and non-blocking I/O model and ease of building scalable network services. Together, Docker and Node enable a microservices architecture with improved developer productivity, deployment flexibility, and scalability compared to traditional monolithic applications.

#iloveapis2015#iloveapismsa
An introduction to Microservices
An introduction to MicroservicesAn introduction to Microservices
An introduction to Microservices

This document provides an introduction to microservices architecture. It discusses why companies adopt the microservices style, how to design microservices, common patterns, and examples from Netflix. The key points are: 1) Microservices architecture breaks applications into small, independent services that communicate over well-defined interfaces. This improves modularity, scalability, and allows independent deployments. 2) When designing microservices, services should be organized around business capabilities, have decentralized governance and data, and be designed to fail independently through patterns like circuit breakers. 3) Netflix is a leader in microservices and has open sourced many tools like Hystrix for latency handling and Eureka for service discovery that

architecturemicroservicesnetflix
MongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB World 2019: Mastering MongoDB in KubernetesMongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB World 2019: Mastering MongoDB in Kubernetes

We will demonstrate why the MongoDB Enterprise Operator for Kubernetes is a game changer at Amadeus. The MongoDB Enterprise Operator for K8S is not just a resource for managing containers, it is a controller that extends the Kubernetes API.

mongodbmongodb world
First Attempt
Varnish & ESI
Varnish & ESI
14
ESI Include
15
<html>
<head>
<title>AutoScout24</title>

<link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" />
</head>
<body>

<esi:include src="http://content.as24.com/fragment/header_de_DE" />
Lorem ipsum....

<script src="/assets/home/66ee72f9-main.min.js"></script>
</body>
</html>
ESI Include Resolved
16
<html>
<head>
<title>AutoScout24</title>

<link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" />
</head>
<body>

<link rel="stylesheet" href="http://content.as24.com/assets/08ffaf28-main.min.css" />
<ul><li>Home</li><li>Search</li><li>Sell</li></ul>

<script src="http://content.as24.com/assets/26ed612f-main.min.js"></script>
Lorem ipsum....

<script src="/assets/home/66ee72f9-main.min.js"></script>
</body>
</html>

Recommended for you

THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
 THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS

Security in applications is a never-ending story. Most of the knowledge about how to build secure applications is derived from knowledge and experience. And we've all done the same mistakes every Java EE developer does over and over again. But how to solve the real business requirements behind access and authorization with Java EE? Can I have a 15k rights matrix? Does that perform? How to secure the transport layer? How does session binding works? Can I implement 2-Factor-Authentication? And what about social integrations? This talk outlines the key capabilities of the Java EE platform and introduces the audience to additional frameworks and concepts which do help by implementing all kinds of security requirements in Java EE based applications.

standardssecurityjavaee
How to deploy a Private Cloud based on WAP and Nutanix
How to deploy a Private Cloud based on WAP and NutanixHow to deploy a Private Cloud based on WAP and Nutanix
How to deploy a Private Cloud based on WAP and Nutanix

Presented on May 28th, 2015 at TechDays Netherlands in The Hague: The rise of virtualization and new applications has created pressure on IT departments to develop, deliver and maintain an application & storage infrastructure that is not only high performing, but also simple to manage, VM-centric and highly scalable. In this technical session, we'll discuss how to create the ideal infrastructure for Hyper-V and virtualized Windows applications, that is always available and literally invisible to the application teams. We will also explore a real world Windows Azure Pack deployment of the European Service Provider Synergics during this technical session. One of the Synergics’ architects will explain and demonstrate how they deployed a scalable, easy-to-manage cloud based on Windows Azure Pack.

azure packcloudoswap
Microservices Journey NYC
Microservices Journey NYCMicroservices Journey NYC
Microservices Journey NYC

Christian Posta is a principal middleware specialist and architect who has worked with large microservices architectures. He discusses why companies are moving to microservices and cloud platforms like Kubernetes and OpenShift. He covers characteristics of microservices like small autonomous teams and decentralized decision making. Posta also discusses breaking applications into independent services, shedding dependencies between teams, and using contracts and APIs for communication between services.

microservicesdistributed systemspromise theory
Multiple ESI Includes
17
<html>
<head>
<title>AutoScout24</title>

<link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" />

<esi:include src="http://content.example.com/fragment/header_styles" />
</head>
<body>

<esi:include src="http://content.example.com/fragment/header_de_DE" />
Lorem ipsum....

<script src="/assets/home/66ee72f9-main.min.js"></script>

<esi:include src="http://content.example.com/fragment/header_scripts" />
</body>
</html>
Multiple ESI Includes Resolved
18
<html>
<head>
<title>AutoScout24</title>

<link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" />

<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....

<script src="/assets/home/66ee72f9-main.min.js"></script>

<script src="http://content.example.com/assets/26ed612f-main.js"></script>
</body>
</html>
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
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)

Recommended for you

Continuous Delivery at Wix
Continuous Delivery at WixContinuous Delivery at Wix
Continuous Delivery at Wix

In this presentation we go over the motivations for wix.com R&D to move to a CI/CD/TDD model, how the model was implemented and the impact on Wix R&D. We will cover the tools used (developed in-house and 3rd party), change in methodologies, what we have learned during the transformation and the unexpected change in working with product and the rest of the company.

continuous deploymentwix.comcontinuous integration
Introduction to microservices (from rails monolith)
Introduction to microservices (from rails monolith)Introduction to microservices (from rails monolith)
Introduction to microservices (from rails monolith)

A simplified microservice architecture using Amazon Simple Queue Service to implement communication between microservices.

railsrubymicroservice
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)

Red Hat JBoss Fuse integration services delivers cloud-based integration based on OpenShift by Red Hat to deliver continuous delivery of tested, production-ready integration solutions. Utilizing a drag and drop, code-free UI and combining that with the integration power of Apache Camel, Fuse integration services is the next generation iPaaS. In this session, we'll walk you through why iPaaS is important, the current Fuse integration services roadmap, and the innovation happening in open source community projects to make this a reality.

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
Jigsaw
How to solve it
Jigsaw Components
23
Request Flow
24

Recommended for you

Whirlwind tour of Activiti 7 by Ryan Dawson
Whirlwind tour of Activiti 7 by Ryan DawsonWhirlwind tour of Activiti 7 by Ryan Dawson
Whirlwind tour of Activiti 7 by Ryan Dawson

This document summarizes Activiti 7 and Activiti Cloud. It discusses the core/non-cloud examples of embedding an Activiti engine into a single Java runtime. It then covers the key concepts of Activiti Cloud including connectors, runtime bundles, supporting services, and components. Examples are provided for security, processes, connectors, and the REST API. The document concludes by mentioning future directions for Activiti Cloud.

activiti cloudcloud nativekubernetes
Stay productive while slicing up the monolith
Stay productive while slicing up the monolith Stay productive while slicing up the monolith
Stay productive while slicing up the monolith

DevNexus 2017 Microservices-based architectures are en-vogue. The last couple of years we have learned how the thought-leaders implement them, and every other week we have heard about how containers and Platform-as-a-Service offerings make them ultimately happen. The problem is that the developers are almost forgotten and left alone with provisioning and continuous delivery systems, containers and resource schedulers, and frameworks and patterns to help slice existing monoliths. How can we get back in control and efficiently develop them without having to provision complete production-like environments locally, by hand? All the new buzzwords, frameworks, and hyped tools have made us forget ourselves—Java developers–and what it means to be productive and have fun building systems. The problem that we set out to solve is: how can we run real-world Microservices-based systems on our local development machines, managing provisioning, and orchestration of potentially hundreds of services directly from a single command line tool, without sacrificing productivity enablers like hot code reloading and instant turnaround time? During this talk, you’ll experience first-hand how much fun it can be to develop large-scale Microservices-based systems. You will learn a lot about what it takes to fail fast and recover and truly understand the power of a fully integrated Microservices development environment.

microserviceslagomdevnexus
A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition

So you have decided to go for Microservices and you want to achieve maximum autonomy for your teams. However, at the front end your services still have to be joined into a single page.Here you have two options: Either have a single UI layer which all teams depend on or let each service render its own UI and compose these UI pieces later on. In the course of moving the Autoscout24 platform - one of Europe’s leading internet car portals - to an AWS-hosted Microservice architecture, we favored autonomy and therefore decided for the UI Composition approach. During this process we faced all the challenges of UI Composition, such as performance, consistency, isolation, and testing. Learn how we started off with a rather complex attempt and then managed to greatly improve and simplify our solution.

microserviceswebui
Request Flow
25
Request Flow
26
Request Flow
27
Request Flow
28

Recommended for you

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

This document proposes an approach called Jigsaw for composing microservice user interfaces that balances team autonomy and page performance. Jigsaw defines pages as publicly accessible endpoints that include fragments from other services using server-side includes. The fragments adhere to contracts and can be cached. An Nginx proxy handles routing to services and uses modules like ngx_pagespeed to optimize and combine assets for improved page load performance when composing the user interface from multiple autonomous microservices.

microservices
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS

The document discusses organizing CSS for maintainability and readability. It recommends dividing CSS into separate style sheets for different media types, rule types, or site sections. Within style sheets, related rules should be indented and grouped with comments. Declarations should be formatted consistently, either each on its own line or all on one line. Class and ID names should be meaningful. Informational comments can provide context. The goal is to structure CSS so it is easily understood by anyone viewing it.

web designcssweb development
IWMW 2003: Content Management - Buy or Build?
IWMW 2003: Content Management - Buy or Build?IWMW 2003: Content Management - Buy or Build?
IWMW 2003: Content Management - Buy or Build?

Slides for plenary talk on "Content Management - Buy or Build?" given by Ricky Ranking and Gareth McLeese at the IWMW 2003 event held at the University of Kent on 11-13 June 2003. See http://www.ukoln.ac.uk/web-focus/events/workshops/webmaster-2003/sessions/#talk-6

iwmwiwmw2003
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
SSI Include
30
<html>
<head>
<title>AutoScout24</title>

<link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" />
</head>
<body>

Lorem ipsum....

<script type="text/javascript" src="/assets/home/66ee72f9-main.min.js"></script>
</body>
</html>
SSI Include Resolved
31
<html>
<head>
<title>AutoScout24</title>

<link rel="stylesheet" href="/assets/home/ebacb8194-main.min.css" />
</head>
<body>
<head>

<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....

<script type="text/javascript" src="/assets/home/66ee72f9-main.min.js"></script>
</body>
</html>
ngx_pagespeed: combine heads
32
<html>
<head>
<title>AutoScout24</title>

<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....

<script type="text/javascript" src="/assets/home/66ee72f9-main.min.js"></script>
</body>
</html>

Recommended for you

Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011

This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.

codemashjavascriptperformance
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial

Turbocharge your development efforts your with a "hands on" introduction to quickly building apps using the MongoDB database as a service offering known as Atlas and the serverless / REST based application development environment known as Stitch. We'll begin with a brief introduction to MongoDB, Atlas, and Stitch. You will learn about 3 real world examples of two day prototypes and rapid production cycles. You will then create your own free MongoDB Atlas database as a service cluster. Then you will write your first Stitch application to put data into your database and query data out of it. You will learn how to enhance your application with serverless stitch functions and triggers. At the end of the 90 minute session you will have a hands on experience and good grasp of how to write custom serverless applications with MongoDB.

mongodbmongodb.localmongodb stitch
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutions

This document discusses developing sandboxed solutions in SharePoint. It covers setting up a sandbox development environment in Visual Studio 2010, building the feature structure and web template, making the solution locally installable, structuring the data, adding chrome, business logic, provisioning jQuery, custom web parts, views and connections. The session aims to teach the right approach to sandbox development and common issues.

ngx_pagespeed: Combine CSS & JS
33
<html>
<head>
<title>AutoScout24</title>

<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....

<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
34
Page Performance of Composed Page
35
Caching
36

Recommended for you

Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...

Office 365 Saturday Event: https://www.meetup.com/O365-Saturday/events/238372859/ Other speakers: https://www.meetup.com/O365-Saturday/pages/23487743/2017_Speaker_Presentations/

sharepoint frameworkspospfx
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud   slide shareWriting an extensible web testing framework ready for the cloud   slide share
Writing an extensible web testing framework ready for the cloud slide share

This document summarizes Mike Ensor's presentation on writing an extensible web testing framework ready for the cloud. The presentation covered: - Introducing the Geb framework for browser testing in Groovy, which provides page objects and modules to reduce duplication. - Extending Geb's inheritance model by subclassing page objects and modules to handle different scenarios like logged in vs logged out states. - Making the testing framework extensible by inheriting test functionality between different implementations of a SaaS platform using Spock specifications. Features can be overridden and page objects dynamically swapped. - Running tests in the cloud on continuous integration using a remote WebDriver to execute tests across different browsers without requiring a local browser

software testinggebautomated testing
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction

An introduction to Web Components describes why we should use web components for Web App development and how Polymer Javascript library from Google can help build web components faster.

web components and polymer
Recap
37
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
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)
Jigsaw Caching of Assets
40

Recommended for you

Website optimization with request reduce
Website optimization with request reduceWebsite optimization with request reduce
Website optimization with request reduce

This document discusses RequestReduce, a tool that automatically optimizes websites for performance by reducing the number of HTTP requests. It does this through CSS and JavaScript merging, minification, automatic sprite generation, caching headers, and synchronization across multiple servers with minimal customization needed. The document provides details on how RequestReduce works, its features, limitations, and ways to optimize and troubleshoot sites optimized with RequestReduce.

cssoptimizationminification
MVC 6 - Tag Helpers and View Components
MVC 6 - Tag Helpers and View ComponentsMVC 6 - Tag Helpers and View Components
MVC 6 - Tag Helpers and View Components

MVC 6 / ASP.NET 5 represent a fundamental shift for the ASP.NET framework. More than simply the next version, this is a complete rewrite and a break from the old System.Web that was central to all previous versions of ASP.NET. The result is a lighter-weight framework that supports cross platform development and deployment. In this session we explore some of the new building blocks in MVC 6 including Tag Helpers and View Components.

asp.net 5mvc6vs 2015
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial

This document summarizes a MongoDB "Hands On" Stitch tutorial presentation. The presentation provided an overview of MongoDB Atlas and Stitch, demonstrated a basic blog tutorial to show how quickly applications can be built, and had attendees complete a hands-on tutorial creating an Atlas cluster and Stitch application. It discusses how the tutorial enabled developers at various companies and events.

mongodbmongodb.localmongodb stitch
Jigsaw Caching of Assets
41
Jigsaw Caching of Documents
42
Jigsaw Caching of Documents
43
Jigsaw Caching of Documents with Vary Header
44

Recommended for you

Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate

Introduction to Paul Irish and Divya Manian's HTML5 Boilerplate project. HTML5 Boilerplate helps you to quickly get up and running with front-end web project.

html5 boilerplatehtml5media queries
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial

oin this hands-on tutorial for an introduction to Stitch (MongoDB's serverless platform) and Atlas (MongoDB's database-as-a-service). Upon completing this session, you will have created an Atlas cluster and created your first stitch app. You will have a clear picture of how to rapidly develop and iterate on apps using MongoDB. In 90 minutes we will walk through three real-world prototypes and leave you with a number of learns you can apply to your own projects. Come learn about DBaaS, database triggers, and serverless applications with MongoDB! Requirements Laptop Wifi Connection Chrome or Firefox Browser Text Editor

mongodbmongodb.localmongodb stitch
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant

The document provides an introduction to ASP.NET MVC, including definitions of MVC and its components. It discusses the pros and cons of traditional ASP.NET WebForms compared to MVC. Key aspects of MVC like models, views, controllers, routing and HTML helpers are described at a high level. Popular MVC frameworks for different programming languages are also listed.

c#beginnersasp.net
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 outside of <head>
• stylesheet refs with different attributes
• Assets not located in /assets/
• Can run in a deployment pipeline

Recommended for you

Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...

This document provides an overview of how to create custom branding for SharePoint. It discusses the design process, using master pages and page layouts, and deploying branding solutions. The presenters are SharePoint MVPs who provide information on their backgrounds and expertise. They outline the SharePoint design process and discuss elements like vision, requirements, design, development, testing and deployment. Details are provided on master page history and functionality in ASP.NET and SharePoint. The use of controls, content placeholders and CSS are explained. Methods for creating and customizing SharePoint master pages are described. Finally, deployment options like sandboxed and farm solutions are covered.

sptechcon
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets

Tips on developing self-contained JavaScript applications that can be added to a page; especially useful in content management systems

javascript angular widget
Atomic design
Atomic designAtomic design
Atomic design

All matter, no matter how complex, can be broken down into molecules which can be broken down further into atomic elements. All web interfaces can be broken down down the same way. Atomic Design provides a methodology for building an effective design system. It consists of five distint stages: atoms, molecules, organisms, templates and pages.

pattern libraryweb designresponsive web design
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
Conclusion
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
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

Recommended for you

DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought

Nick Santamaria's performance and scalability presentation from DrupalSouth 2015. https://melbourne2015.drupal.org.au/session/performance-not-afterthought

drupal performance scalability technocrat drupalso
Data Mesh - It's not about technology, it's about people
Data Mesh - It's not about technology, it's about peopleData Mesh - It's not about technology, it's about people
Data Mesh - It's not about technology, it's about people

A talk presented by Arif Wider at the Data Innovation Summit 2022 on May 6th 2022 in Stockholm, Sweden.

data meshbig datamachine learning
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...

A talk presented by Max Schultze from Zalando and Arif Wider from ThoughtWorks at NDC Oslo 2020. Abstract: The Data Lake paradigm is often considered the scalable successor of the more curated Data Warehouse approach when it comes to democratization of data. However, many who went out to build a centralized Data Lake came out with a data swamp of unclear responsibilities, a lack of data ownership, and sub-par data availability. At Zalando - europe’s biggest online fashion retailer - we realised that accessibility and availability at scale can only be guaranteed when moving more responsibilities to those who pick up the data and have the respective domain knowledge - the data owners - while keeping only data governance and metadata information central. Such a decentralized and domain focused approach has recently been coined a Data Mesh. The Data Mesh paradigm promotes the concept of Data Products which go beyond sharing of files and towards guarantees of quality and acknowledgement of data ownership. This talk will take you on a journey of how we went from a centralized Data Lake to embrace a distributed Data Mesh architecture and will outline the ongoing efforts to make creation of data products as simple as applying a template.

devopsmicroservicesdata lake
www.autoscout24.com
www.autoscout24.com
Thank you!
Questions?
Contact:
jmueller@autoscout24.com
awider@thoughtworks.com

More Related Content

What's hot

From Monolithic to Microservices in 45 Minutes
From Monolithic to Microservices in 45 MinutesFrom Monolithic to Microservices in 45 Minutes
From Monolithic to Microservices in 45 Minutes
MongoDB
 
Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture
AppDynamics
 
Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...
Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...
Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...
Gary Arora
 
Patterns for Enterprise Integration Success
Patterns for Enterprise Integration Success Patterns for Enterprise Integration Success
Patterns for Enterprise Integration Success
WSO2
 
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
András Popovics
 
Microservices Journey Summer 2017
Microservices Journey Summer 2017Microservices Journey Summer 2017
Microservices Journey Summer 2017
Christian Posta
 
MS Insights Brazil 2015 containers and devops
MS Insights Brazil 2015   containers and devopsMS Insights Brazil 2015   containers and devops
MS Insights Brazil 2015 containers and devops
Damien Caro
 
Going MicroServices with Net
Going MicroServices with NetGoing MicroServices with Net
Going MicroServices with Net
David Revoledo
 
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entitySpring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Toni Jara
 
API Microservices with Node.js and Docker
API Microservices with Node.js and DockerAPI Microservices with Node.js and Docker
API Microservices with Node.js and Docker
Apigee | Google Cloud
 
An introduction to Microservices
An introduction to MicroservicesAn introduction to Microservices
An introduction to Microservices
Cisco DevNet
 
MongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB World 2019: Mastering MongoDB in KubernetesMongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB
 
THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
 THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
Markus Eisele
 
How to deploy a Private Cloud based on WAP and Nutanix
How to deploy a Private Cloud based on WAP and NutanixHow to deploy a Private Cloud based on WAP and Nutanix
How to deploy a Private Cloud based on WAP and Nutanix
Tom Van Gramberen
 
Microservices Journey NYC
Microservices Journey NYCMicroservices Journey NYC
Microservices Journey NYC
Christian Posta
 
Continuous Delivery at Wix
Continuous Delivery at WixContinuous Delivery at Wix
Continuous Delivery at Wix
Yoav Avrahami
 
Introduction to microservices (from rails monolith)
Introduction to microservices (from rails monolith)Introduction to microservices (from rails monolith)
Introduction to microservices (from rails monolith)
Leandro Parazito
 
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
Red Hat Developers
 
Whirlwind tour of Activiti 7 by Ryan Dawson
Whirlwind tour of Activiti 7 by Ryan DawsonWhirlwind tour of Activiti 7 by Ryan Dawson
Whirlwind tour of Activiti 7 by Ryan Dawson
Mauricio (Salaboy) Salatino
 
Stay productive while slicing up the monolith
Stay productive while slicing up the monolith Stay productive while slicing up the monolith
Stay productive while slicing up the monolith
Markus Eisele
 

What's hot (20)

From Monolithic to Microservices in 45 Minutes
From Monolithic to Microservices in 45 MinutesFrom Monolithic to Microservices in 45 Minutes
From Monolithic to Microservices in 45 Minutes
 
Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture Anatomy of a Modern Node.js Application Architecture
Anatomy of a Modern Node.js Application Architecture
 
Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...
Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...
Leapfrog into Serverless - a Deloitte-Amtrak Case Study | Serverless Confere...
 
Patterns for Enterprise Integration Success
Patterns for Enterprise Integration Success Patterns for Enterprise Integration Success
Patterns for Enterprise Integration Success
 
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019Alfresco/Activiti Modeler Application - Andras Popovics - 2019
Alfresco/Activiti Modeler Application - Andras Popovics - 2019
 
Microservices Journey Summer 2017
Microservices Journey Summer 2017Microservices Journey Summer 2017
Microservices Journey Summer 2017
 
MS Insights Brazil 2015 containers and devops
MS Insights Brazil 2015   containers and devopsMS Insights Brazil 2015   containers and devops
MS Insights Brazil 2015 containers and devops
 
Going MicroServices with Net
Going MicroServices with NetGoing MicroServices with Net
Going MicroServices with Net
 
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entitySpring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
Spring IO 2016 - Spring Cloud Microservices, a journey inside a financial entity
 
API Microservices with Node.js and Docker
API Microservices with Node.js and DockerAPI Microservices with Node.js and Docker
API Microservices with Node.js and Docker
 
An introduction to Microservices
An introduction to MicroservicesAn introduction to Microservices
An introduction to Microservices
 
MongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB World 2019: Mastering MongoDB in KubernetesMongoDB World 2019: Mastering MongoDB in Kubernetes
MongoDB World 2019: Mastering MongoDB in Kubernetes
 
THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
 THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
THEFT-PROOF JAVA EE - SECURING YOUR JAVA EE APPLICATIONS
 
How to deploy a Private Cloud based on WAP and Nutanix
How to deploy a Private Cloud based on WAP and NutanixHow to deploy a Private Cloud based on WAP and Nutanix
How to deploy a Private Cloud based on WAP and Nutanix
 
Microservices Journey NYC
Microservices Journey NYCMicroservices Journey NYC
Microservices Journey NYC
 
Continuous Delivery at Wix
Continuous Delivery at WixContinuous Delivery at Wix
Continuous Delivery at Wix
 
Introduction to microservices (from rails monolith)
Introduction to microservices (from rails monolith)Introduction to microservices (from rails monolith)
Introduction to microservices (from rails monolith)
 
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
IPaaS 2.0: Fuse Integration Services (Robert Davies & Keith Babo)
 
Whirlwind tour of Activiti 7 by Ryan Dawson
Whirlwind tour of Activiti 7 by Ryan DawsonWhirlwind tour of Activiti 7 by Ryan Dawson
Whirlwind tour of Activiti 7 by Ryan Dawson
 
Stay productive while slicing up the monolith
Stay productive while slicing up the monolith Stay productive while slicing up the monolith
Stay productive while slicing up the monolith
 

Similar to An Unexpected Solution to Microservices UI Composition

A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition
Alexey Gravanov
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
Dr. Arif Wider
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
 
IWMW 2003: Content Management - Buy or Build?
IWMW 2003: Content Management - Buy or Build?IWMW 2003: Content Management - Buy or Build?
IWMW 2003: Content Management - Buy or Build?
IWMW
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
Timothy Fisher
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB
 
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutions
woutervugt
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Anupam Ranku
 
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud   slide shareWriting an extensible web testing framework ready for the cloud   slide share
Writing an extensible web testing framework ready for the cloud slide share
Mike Ensor
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
cherukumilli2
 
Website optimization with request reduce
Website optimization with request reduceWebsite optimization with request reduce
Website optimization with request reduce
Matt Wrock
 
MVC 6 - Tag Helpers and View Components
MVC 6 - Tag Helpers and View ComponentsMVC 6 - Tag Helpers and View Components
MVC 6 - Tag Helpers and View Components
David Paquette
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
Michael Enslow
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
 
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant
Nitin Sawant
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
SPTechCon
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
Bob German
 
Atomic design
Atomic designAtomic design
Atomic design
Brad Frost
 
DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought
Nick Santamaria
 

Similar to An Unexpected Solution to Microservices UI Composition (20)

A High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI CompositionA High-Performance Solution To Microservices UI Composition
A High-Performance Solution To Microservices UI Composition
 
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf HamburgA High-Performance Solution to Microservice UI Composition @ XConf Hamburg
A High-Performance Solution to Microservice UI Composition @ XConf Hamburg
 
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSSHighly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
 
IWMW 2003: Content Management - Buy or Build?
IWMW 2003: Content Management - Buy or Build?IWMW 2003: Content Management - Buy or Build?
IWMW 2003: Content Management - Buy or Build?
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
 
Hdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed SolutionsHdv309 - Real World Sandboxed Solutions
Hdv309 - Real World Sandboxed Solutions
 
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
Office 365 Saturday (Sydney) - SharePoint framework – build integrated user e...
 
Writing an extensible web testing framework ready for the cloud slide share
Writing an extensible web testing framework ready for the cloud   slide shareWriting an extensible web testing framework ready for the cloud   slide share
Writing an extensible web testing framework ready for the cloud slide share
 
Web components - An Introduction
Web components - An IntroductionWeb components - An Introduction
Web components - An Introduction
 
Website optimization with request reduce
Website optimization with request reduceWebsite optimization with request reduce
Website optimization with request reduce
 
MVC 6 - Tag Helpers and View Components
MVC 6 - Tag Helpers and View ComponentsMVC 6 - Tag Helpers and View Components
MVC 6 - Tag Helpers and View Components
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
 
Intro to html5 Boilerplate
Intro to html5 BoilerplateIntro to html5 Boilerplate
Intro to html5 Boilerplate
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
Developing JavaScript Widgets
Developing JavaScript WidgetsDeveloping JavaScript Widgets
Developing JavaScript Widgets
 
Atomic design
Atomic designAtomic design
Atomic design
 
DrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an AfterthoughtDrupalSouth 2015 - Performance: Not an Afterthought
DrupalSouth 2015 - Performance: Not an Afterthought
 

More from Dr. Arif Wider

Data Mesh - It's not about technology, it's about people
Data Mesh - It's not about technology, it's about peopleData Mesh - It's not about technology, it's about people
Data Mesh - It's not about technology, it's about people
Dr. Arif Wider
 
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Dr. Arif Wider
 
Continuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in ProductionContinuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in Production
Dr. Arif Wider
 
Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...
Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...
Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...
Dr. Arif Wider
 
Continuous Intelligence: Moving Machine Learning into Production Reliably
Continuous Intelligence: Moving Machine Learning into Production ReliablyContinuous Intelligence: Moving Machine Learning into Production Reliably
Continuous Intelligence: Moving Machine Learning into Production Reliably
Dr. Arif Wider
 
Continuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in ProductionContinuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in Production
Dr. Arif Wider
 
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & AnalyticsDataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
Dr. Arif Wider
 
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & AnalyticsDataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
Dr. Arif Wider
 
DataDevOps - A Manifesto on Shared Data Responsibility in Times of Microservices
DataDevOps - A Manifesto on Shared Data Responsibility in Times of MicroservicesDataDevOps - A Manifesto on Shared Data Responsibility in Times of Microservices
DataDevOps - A Manifesto on Shared Data Responsibility in Times of Microservices
Dr. Arif Wider
 
Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...
Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...
Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...
Dr. Arif Wider
 

More from Dr. Arif Wider (10)

Data Mesh - It's not about technology, it's about people
Data Mesh - It's not about technology, it's about peopleData Mesh - It's not about technology, it's about people
Data Mesh - It's not about technology, it's about people
 
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
Data Mesh in Practice - How Europe's Leading Online Platform for Fashion Goes...
 
Continuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in ProductionContinuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in Production
 
Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...
Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...
Continuous Intelligence: Keeping Your AI Application in Production (NDC Sydne...
 
Continuous Intelligence: Moving Machine Learning into Production Reliably
Continuous Intelligence: Moving Machine Learning into Production ReliablyContinuous Intelligence: Moving Machine Learning into Production Reliably
Continuous Intelligence: Moving Machine Learning into Production Reliably
 
Continuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in ProductionContinuous Intelligence: Keeping your AI Application in Production
Continuous Intelligence: Keeping your AI Application in Production
 
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & AnalyticsDataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
 
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & AnalyticsDataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
DataDevOps: A Manifesto for a DevOps-like Culture Shift in Data & Analytics
 
DataDevOps - A Manifesto on Shared Data Responsibility in Times of Microservices
DataDevOps - A Manifesto on Shared Data Responsibility in Times of MicroservicesDataDevOps - A Manifesto on Shared Data Responsibility in Times of Microservices
DataDevOps - A Manifesto on Shared Data Responsibility in Times of Microservices
 
Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...
Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...
Predictive Analytics for Vehicle Price Prediction - Delivered Continuously at...
 

Recently uploaded

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Mydbops
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
UiPathCommunity
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
welrejdoall
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 

Recently uploaded (20)

Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - MydbopsScaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
Scaling Connections in PostgreSQL Postgres Bangalore(PGBLR) Meetup-2 - Mydbops
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
UiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs ConferenceUiPath Community Day Kraków: Devs4Devs Conference
UiPath Community Day Kraków: Devs4Devs Conference
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
Manual | Product | Research Presentation
Manual | Product | Research PresentationManual | Product | Research Presentation
Manual | Product | Research Presentation
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 

An Unexpected Solution to Microservices UI Composition

  • 1. www.autoscout24.com www.autoscout24.com An Unexpected Solution To Microservices UI Composition Munich | 01/12/2016 | Johannes Müller and Arif Wider
  • 3. Project Tatsu: From a .NET-Monolith to AWS-hosted Microservices 3
  • 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. 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. 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. Breaking the Monolith The API Gateway Pattern 7
  • 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. Breaking the Monolith The UI Composition Pattern 10
  • 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
  • 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. 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. 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. 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. 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. 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. 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
  • 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. 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. 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. 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. 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. Page Performance of Composed Page 34
  • 35. Page Performance of Composed Page 35
  • 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. 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. Jigsaw Caching of Assets 40
  • 41. Jigsaw Caching of Assets 41
  • 42. Jigsaw Caching of Documents 42
  • 43. Jigsaw Caching of Documents 43
  • 44. Jigsaw Caching of Documents with Vary Header 44
  • 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. 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
  • 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. 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

Editor's Notes

  1. > Arif Before we go into the topic of UI composition, I’d like to give you some background about our motivation and the context in which we developed our solution to UI composition. And that context is a project that we call Tatsu. Tatsu means dragon (logo), because the project is nothing less than a complete rewrite of the AS24 platform, which is live in 18 countries across Europe, and therefore we compare the project with a dangerous but powerful dragon.
  2. In this project, which started a bit more than a year ago, we are doing 5 things at the same time. We are breaking the old rather monolithic system into a set of independent microservices. We are moving from a self hosted system to a completely cloud hosted system, using Amazon Web Services. We are moving from a Microsoft .NET stack to a Linux- and JVM-based tech stack. Because that is not enough, we are also changing the organisational structure, so that it reflects the Microservice approach. That means, we move from multiple product engineering teams that rely on a few operations and platform teams to cross-functional, autonomous teams that have enough ops knowledge to run their own services. This is depicted by those gradients here. Finally, as we are rebuilding everything, we want to make sure that we come out of the whole process with a new shiny AS24 page that contains only those features that are actually useful. 
  3. Now, this whole project is obviously a huge effort, so why are we doing it? One of the reasons is to attract talented developers, which was harder with the old .NET tech stack However, the main reason is to reduce time to market, so that we can respond to user needs more quickly For this it is important, that new features can be released very quickly, also for being able to do lots of A/B testing to get early user feedback  The idea here is to be able to think in minutes for feature to be released instead of thinking in days Now for this to be possible, teams must be enabled to innovate independently
  4. We believe that a key to achieve this are autonomous teams, that are able to independently ... Therefore, we believe that it is crucial to avoid any form of tight coupling as much as possible If a team wants to improve their own service but must wait for another team to release something in order to be able to do so then there is no real autonomy.  In fact, we value this team autonomy so much, that we also accept certain trade-offs E.g., we often rather copy some code around than to create tight coupling by introducing a shared library or shared infrastructure
  5. At the same time, we do not want to compromise page performance. In case you do not know it, Pagespeed Insights is a tool by Google that analyzes the structure of a page in terms of how fast it can be rendered, in particular on a mobile browser. ...and the score goes up to 100, and is considered good from 85 upwards. This means, that we heavily rely on different cache layers and that our pages must not contain blocking content. In the context of Microservices, it is a bit tricky to achieve both high page speed and high team autonomy. To explain this, I am now going to present you two different ways how to generally approach this problem.  And then afterwards Johannes will go more into detail on how we actually tried to solve it. 
  6. The first one is the API Gateway pattern
  7. In this example you see that there are already several backend services such as... So the monolith is already broken down into several independent services at the back end However, in the frontend, there is still one single web application that takes care of the whole web UI, and talks to the different backend APIs.  E.g., this red UI component here displays some content that is provided by the homepage service, whereas this In order to avoid that the web app needs to start several separate requests to several backend services just to perform a single action, it is generally a good idea to introduce a gateway layer that aggregates those requests to backend services.  This way, the number of requests is reduced which is particularly important when using a mobile device to view the page. The API Gateway pattern is also particularly useful to deal with native mobile apps, however, those won't be in the focus of this talk today. Now, of course, in this scenario it is is also fairly easy to optimize the performance of the page because all the UI components belong to one application.
  8. However, there are some drawbacks of applying this pattern from which, for us, the most severe is that independent feature releases are no longer possible (as long as they contain UI changes) Instead, in the worst case three teams are involved and need to be coordinated when changing a feature: the backend service team, the API gateway layer team, and the web app team One could say that the API Gateway pattern one goes only half way to split the monolith, i.e., only in the backend There are other drawbacks such as... but because team autonomy is one of the main reasons we went for Microservices in the first place, this issue made the API Gateway pattern no option for us
  9. Instead we went for another pattern and that is the UI composition pattern
  10. This looks as follows: Each service delivers its own UI component, e.g., red home page Those UI components are later composed to a single web page This way, each team can change their backend and their UI independently We also often speak of vertical slices here, because there is no layered architecture anymore and each service can contain a backend, a UI, and everything in between
  11. However, there are quite few challenges that come with this approach ... each part of the page could compromise page performance by introducing render blocking content ... the loading time of the page depends on its slowest component
  12. Jo why are we telling you this -> to narrow down the topic to the core questions to solve
  13. Varnish test setup infrastructure Varnish in front of services no service registration, just loading content from referenced URLs
  14. Page, therefore HTML tag ESI include syntax styles and scripts already minified by service
  15. ESI resolved = include replaced with fragment (by Varnish) fragment has its own minified styles and scripts in there also its own script section at its bottom need to have full qualified references to assets very bad page speed
  16. One ESI include for header styles One ESI include for header fragment One ESI include for header scripts
  17. Multiple ESI resolved = include replaced with fragment (by Varnish) One ESI include for header styles One ESI include for header fragment One ESI include for header scripts better page speed, but still not perfect (no combination etc) big problem: TTL of cached includes are not synchronized. Version mismatches!
  18. > Arif So before showing an example how this actually looks in code I have to explain that we conceptually distinguish between what we call a page and what we call a fragment ...and does not know the original request ...and this team is responsible for the performance and the stability of the page So when this page includes fragments, this team has to define a contract with the providers of this fragment The fragment on the other hand needs to obey this contract and behave well
  19. Now let's look at a simple example page Page, therefore HTML tag+ head and body styles already minified by service SSI include syntax
  20. SSI resolved = include replaced with fragment (by Nginx) fragment has its own head, with its own minified styles in there also its own script section at its bottom very bad page speed as of now
  21. now comes mod pagespeed combine heads
  22. combine css combine js, defer its loading
  23. > Jo
  24. Example: personalized pages (different content based on visitor, makes no sense to cache it)
  25. > Jo
  26. 3 parts on home page let's assume you want to change header and test
  27. defer async stops pagespeed from combining page barrier = inline script, order important, cannot combine assets above and below barrier stylesheet --> for example media attribute
  28. authentication and a/b testing -> need to get cookies and headers to the fragments javascript integration / interaction -> window.event or something else?? Bootstrap: for example Fonts or javascript error logger etc.
  29. > Arif
  30. ...as long as they stay within the boundaries of their contracts