index.html

---
layout: default
title: "SCS: Self-contained Systems"
description: "An architectural approach that separates a larger system’s functionality into many independent, collaborating systems."
og_image: og-home.jpeg
canonical_url: https://scs-architecture.org/
---

<header class="page-cover">
	<div class="page-cover-container container">
		<img src="img/scs-selected-slice.svg" alt="monolith cut into multiple scs">
		<div class="page-cover-content">
			<h1>Self-contained Systems (SCS)</h1>
			<h2>An architectural approach that separates a larger system’s functionality into many independent, collaborating systems.</h2>
			<p>Created by <img src="/img/INNOQ_Logo-primary.svg" alt="INNOQ" class="logo-small" />. Driven by the community.</p>
		</div>
	</div>
</header>

<section id="characteristics" class="container container-spacing">
	<h2 class="text-centered">Characteristics</h2>
	<div class="container-with-tiles">
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/characteristics-autonomous.svg" alt="autonomous" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">Autonomous</h3>
				<a id="autonomous" href="#autonomous" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">Each SCS is an autonomous web application. For the SCS’s domain, all data, the logic to process that data and all code to render the web interface is contained within the SCS. An SCS can fulfill its primary use cases on its own, without having to rely on other systems being available.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/characteristics-one-team.svg" alt="scs own team" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">One Team</h3>
				<a id="one-team" href="#one-team" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">Each SCS is owned by one team. This does not necessarily mean that only one team can change the code, but the owning team has the final say on what goes into the code base, for example by merging pull-requests.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/characteristics-asynchronous-dependencies.svg" alt="asynchronous dependencies" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">Asynchronous Dependencies</h3>
				<a id="asynchronous-dependencies" href="#asynchronous-dependencies" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">Communication with other SCSs or 3rd party systems is asynchronous wherever possible. Specifically, other SCSs or external systems should not be accessed synchronously within the SCS's own request/response cycle. This decouples the systems, reduces the effects of failure, and thus supports autonomy. The goal is decoupling concerning time: An SCS should work even if other SCSs are temporarily offline. This can be achieved even if the communication on the technical level is synchronous, e.g. by replicating data or buffering requests.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/charactersitics-service-api-is-optional.svg" alt="service api optional" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">Service API is Optional</h3>
				<a id="service-api-is-optional" href="#service-api-is-optional" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">An SCS can have an optional service API. Because the SCS has its own web UI, it can interact with the user — without going through a UI service. However, an API for mobile clients or for other SCSs might still be useful.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/charactersistics-own-data-and-logic.svg" alt="own data and business logic" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">Own Data & Logic</h3>
				<a id="own-data-and-logic" href="#own-data-and-logic" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">Each SCS must include data and logic. To really implement any meaningful features both are needed. An SCS should implement features by itself and must therefore include both.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/characteristics-own-ui.svg" alt="own ui" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">Own UI</h3>
				<a id="own-ui" href="#own-ui" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">An SCS must make its features usable to end-users via its own UI. Therefore the SCS should have no shared UI with other SCSs. SCSs might still have links to each other. However, asynchronous integration means that the SCS should still work even if the UI of another SCS is not available.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/characteristics-no-shared-business-logic.svg" alt="no shared business logic" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">No Shared Business Logic</h3>
				<a id="no-shared-business-logic" href="#no-shared-business-logic" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">To avoid tight coupling an SCS should share no business code with other SCSs. It might be fine to create a pull-request for an SCS or use common libraries, e.g. database drivers or oAuth clients.</p>
		</div>
		<div class="tile">
			<div class="tile__img-container"><img loading="lazy" src="img/characteristics-hardly-shared-infrastructure.svg" alt="hardly shared infrastructure" class="benefit-image-customizable"></div>
			<div class="tile__heading">
				<h3 class="tile__heading-text">Hardly Shared Infrastructure</h3>
				<a id="hardly-shared-infrastructure" href="#hardly-shared-infrastructure" class="tile__heading-anchor">
					<img loading="lazy" src="img/anchor.svg" class="anchor-icon" alt="Anchor link to this section" />
				</a>
			</div>
			<p class="text-center">To make SCSs more robust and improve decoupling shared infrastructure can be minimized. E.g. a shared database make fail safeness and scalability of the SCSs depend on the central database. However, due to e.g. costs a shared database with separate schemas or data models per SCS can be a valid alternative.</p>
		</div>
	</div>
</section>

<section id="the-idea" class="container container-spacing">
	<h2 class="text-centered">The Idea</h2>
	<div class="container-with-the-idea">
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/monolith.svg" alt="A monolith contains numerous things inside of a single system ..."/>
			</div>
			<p class="text-center idea-text">A monolith contains <b>numerous</b> things inside of a single system …</p>
		</div>

		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/monolith-with-domains.svg" alt="various domains,"/>
			</div>
			<p class="text-center idea-text">Various Domains</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/monolith-with-layers.svg" alt="user interface, business logic, persistence,"/>
			</div>
			<p class="text-center idea-text">
				<span style="color:#9191a5;"><b>User Interface</b></span><br/>
				<span style="color:#99e8d6"><b>Business Logic</b></span><br/>
				<span style="color:#fe9dae"><b></b>Persistence</b></span>
			</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/monolith-with-components.svg" alt="... as well as a lot of modules, components, frameworks and libraries."/>
			</div>
			<p class="text-center idea-text">… as well as a <b>lot</b> of modules, components, frameworks and libraries.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/monolith-with-layers-domains-components.svg" alt="With all these layers in one place, a monolith tends to grow..."/>
			</div>
			<p class="text-center idea-text">With all these layers in one place, a monolith tends to <b>grow</b>...</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/monolith-with-layers-domains-components.svg" alt="... and to grow."/>
			</div>
			<p class="text-center idea-text">... and to <b>grow</b>.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/system-of-systems-scs.svg" alt="If you cut a monolithic system along its very domains ..."/>
			</div>
			<p class="text-center idea-text">If you cut a monolithic system along its very domains …</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-selected-slice.svg" alt="... and wrap every domain in a separate, replaceable web application ..."/>
			</div>
			<p class="text-center idea-text">… and wrap every domain in a <b>separate</b>, <b>replaceable</b> web application …</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-single-slice.svg" alt="... then that application can be referred to as a self-contained system (SCS)."/>
			</div>
			<p class="text-center idea-text">… then that application can be referred to as a <b>self-contained system</b> (SCS).</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-single-slice-in-out.svg" alt="On its outside, an SCS is a decentralized unit that is communicating with other systems via RESTful HTTP or lightweight messaging."/>
			</div>
			<p class="text-center idea-text">On its outside, an SCS is a decentralized unit that is communicating with other systems via <b>RESTful HTTP or lightweight messaging.</b></p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-on-platform.svg" alt="Therefore, self-contained systems can be individually developed for different platforms."/>
			</div>
			<p class="text-center idea-text">Therefore, self-contained systems can be individually developed for <b>different platforms.</b></p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-own-ui-bl-db.svg" alt="An SCS contains its own user interface, business layer, and persistence layer."/>
			</div>
			<p class="text-center idea-text">
				<span>An SCS contains its own </span>
				<span style="color:#9191a5;"><b>user interface</b></span><span>, specific </span>
					<span style="color:#99e8d6"><b>business logic</b></span>
				  <span> and separate </span>
				  <span style="color:#fe9dae"><b>data storage</b></span>
				  <span>.</span>
			</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-optional-api.svg" alt="In addition to a web interface, a self-contained system can also provide an optional API."/>
			</div>
			<p class="text-center idea-text">In addition to a web interface, a self-contained system can also provide an <b>optional API</b>.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-autonomous-business-layer.svg" alt="The business logic part solely addresses problems that occur within its core domain. This logic is shared with other systems only through a well defined interface."/>
			</div>
			<p class="text-center idea-text">The business logic part <b>solely</b> addresses problems that occur within its core domain. This logic is shared with other systems only through a <b>well defined interface.</b></p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/microservices.svg" alt="The business logic may consist of microservices to solve domain specific problems."/>
			</div>
			<p class="text-center idea-text">The business logic may consist of <b>microservices</b> to solve domain specific problems.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-own-db.svg" alt="Each SCS brings its own data storage and with it redundant data depending on the context and domain."/>
			</div>
			<p class="text-center idea-text">Each SCS brings its <b>own data storage</b> and with it redundant data depending on the context and domain.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-sovereignty.svg" alt="These redundancies are tolerable as long as the sovereignty of data by its owning system is not undermined."/>
			</div>
			<p class="text-center idea-text">These redundancies are tolerable as long as the <b>sovereignty of data</b> by its owning system is not undermined.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-polyglot.svg" alt="This enables polyglot persistence, implying a database can be selected to solve a domain specific problem, rather than to fulfil a technical urge."/>
			</div>
			<p class="text-center idea-text">This enables <b>polyglot persistence</b>, implying a database can be selected to solve a domain specific problem, rather than to fulfil a technical urge.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-technical-decisions.svg" alt="Within a self-contained system, a variety of technical decisions can be made independently of other systems, such as choices regarding programming language, frameworks, tooling, or workflow."/>
			</div>
			<p class="text-center idea-text">Within a self-contained system, a variety of technical decisions can be made independently of other systems, such as choices regarding programming language, frameworks, tooling, or workflow.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-own-team.svg" alt="The manageable domain specific scope enables the development, operation, and maintenance of an SCS by a single team."/>
			</div>
			<p class="text-center idea-text">The manageable domain specific scope enables the development, operation, and maintenance of an SCS by a <b>single team.</b></p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-web-interfaces.svg" alt="Self-contained systems should be integrated via their web interfaces to minimize coupling to other systems."/>
			</div>
			<p class="text-center idea-text">Self-contained systems should be integrated via their <b>web interfaces</b> to minimize coupling to other systems.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-hyperlinks.svg" alt="Therefore, simple hyperlinks can be used to navigate between systems."/>
			</div>
			<p class="text-center idea-text">Therefore, simple <b>hyperlinks</b> can be used to navigate between systems.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-redirection.svg" alt="Redirection can be used to ensure navigation works in both directions."/>
			</div>
			<p class="text-center idea-text"><b>Redirection</b> can be used to ensure navigation works in both directions.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-dynamic-inclusion.svg" alt="Hyperlinks can also facilitate the dynamic inclusion of content served by another application into the web interface of a self-contained system."/>
			</div>
			<p class="text-center idea-text">Hyperlinks can also facilitate the <b>dynamic inclusion</b> of content served by another application into the web interface of a self-contained system.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-hardly-synchronous-calls.svg" alt="To further minimize coupling to other systems, synchronous remote calls inside the business logic should be avoided."/>
			</div>
			<p class="text-center idea-text">To further minimize coupling to other systems, synchronous remote calls inside the business logic should be <b>avoided</b>.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-asynchronous-api-calls.svg" alt="Instead, remote API calls should be handled asynchronously to minimize dependencies and prevent error cascades."/>
			</div>
			<p class="text-center idea-text">Instead, remote API calls should be handled asynchronously to minimize dependencies and prevent error cascades.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container">
				<img loading="lazy" src="img/scs-asynchronous-api-calls.svg" alt="This implies that, depending on the desired rate of updates, the data model’s consistency guarantees may be relaxed"/>
			</div>
			<p class="text-center idea-text">This implies that, depending on the desired rate of updates, the data model’s consistency guarantees may be <b>relaxed</b>.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-system-of-systems.svg" alt="An integrated system of systems like this has many benefits."/>
			</div>
			<p class="text-center idea-text">An integrated <b>system of systems</b> like this has many benefits.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-resilience.svg" alt="Overall, resilience is improved through loosely coupled, replaceable systems."/>
			</div>
			<p class="text-center idea-text">Overall, <b>resilience</b> is improved through loosely coupled, replaceable systems.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-individually-scaled.svg" alt="Some systems can be individually scaled to serve varying demands."/>
			</div>
			<p class="text-center idea-text">Some systems can be <b>individually</b> scaled to serve varying demands.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-version1.svg" alt="It is not necessary to perform a risky big bang release to migrate an outdated, monolithic system ..."/>
			</div>
			<p class="text-center idea-text">It is not necessary to perform a risky <b>big bang release</b> to migrate an outdated, monolithic system …</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-version2.svg" alt="... into a system of systems."/>
			</div>
			<p class="text-center idea-text">… into a system of systems.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-evolutionary-modernization1.svg" alt="An evolutionary modernization of a large and complex system can be done by ..."/>
			</div>
			<p class="text-center idea-text">An <b>evolutionary modernization</b> of a large and complex system can be done by …</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-evolutionary-modernization.svg" alt="... migrating in small, manageable steps and by that minimizing the risk of failure."/>
			</div>
			<p class="text-center idea-text">… migrating in small, manageable steps and by that minimizing the risk of failure.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-standard-products.svg" alt="In reality a system of systems consists of individually developed software and standard products."/>
			</div>
			<p class="text-center idea-text">In reality a system of systems consists of individually developed software <b>and</b> standard products.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-product.svg" alt="A product that fits well into a system of systems can be selected based on the following aspects: it should solve a defined set of tasks and provide the same integration mechanisms that a self-contained system offers."/>
			</div>
			<p class="text-center idea-text">A product that fits well into a system of systems can be selected based on the following aspects: it should solve a <b>defined set of tasks</b> and provide the same <b>integration mechanisms</b> that a self-contained system offers.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-standard-products.svg" alt="This ensures that products can be replaced safely ..."/>
			</div>
			<p class="text-center idea-text">This ensures that products can be <b>replaced safely</b> …</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-with-standard-software-new.svg" alt="... by other products once their lifetime has ended."/>
			</div>
			<p class="text-center idea-text">… by other products once their lifetime has ended.</p>
		</div>
		<div class="idea">
			<div class="idea__img-container idea__img--large">
				<img loading="lazy" src="img/scs-uniform-interfaces.svg" alt="If a product with such integration mechanisms cannot be found, it should at least be possible to extend that product with uniform interfaces that integrate smoothly with the rest of the system."/>
			</div>
			<p class="text-center idea-text">If a product with such integration mechanisms cannot be found, it should at least be possible to extend that product with <b>uniform interfaces</b> that integrate smoothly with the rest of the system.</p>
		</div>
	</div>
</section>

<section id="how-to-contribute" class="container container-spacing">
	<p class="text-center">
		Would you like to use this content?<br/>
		Sure, SCS is licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/">Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license</a>.
	</p>
	<p class="text-center">
		Would you like to have <a href="#the-idea">the idea</a> in slide deck format? There you go:<br/>
		English: <a href="slidedeck/en/scs-infodeck-english.pdf">PDF</a>, <a href="slidedeck/en/scs-infodeck-english.key">Keynote</a>, <a href="slidedeck/en/scs-infodeck-english.pptx">PowerPoint</a>, <a href="slidedeck/en/scs-infodeck-english.odp">OpenDocument</a>
		German: <a href="slidedeck/de/scs-infodeck-deutsch.pdf">PDF</a>, <a href="slidedeck/de/scs-infodeck-deutsch.key">Keynote</a>, <a href="slidedeck/de/scs-infodeck-deutsch.pptx">PowerPoint</a>, <a href="slidedeck/de/scs-infodeck-deutsch.odp">OpenDocument</a>
	</p>
	<p class="text-centered">
		You have got comments, questions, or suggestions?<br/>
		Checkout the <a href="faq.html">FAQ</a> or create an <a href="https://github.com/innoq/SCS/issues">issue</a>.
	</p>
	<p class="text-centered">
		Contribute on <a href="https://github.com/innoq/SCS">Github</a>.<br>
		Find us on <a href="https://x.com/scsarchitecture">X (Twitter)</a>
	</p>
</section>