Search for a command to run...
My name is Michael Lehmann. I'm a developer, architect, technical team lead and occasional speaker. I work for Zühlke Engineering AG as a Lead Software Architect aiming to help my customers and team mates to design and develop software. I specialised in developing distributed systems with micro-service architectures and modern web technologies.
No comments yet. Be the first to comment.
15 years ago, C# did not have a large variety of unit test frameworks and supporting libraries. That has changed in the meantime. The community has grown considerably and so has the range of libraries and tools that can be used for unit tests. While ...
If you read my blog regularly you may have noticed that I recently introduced pagination to my article list. In order of that, I would like to explain how I implemented that with the tech stack of my blog - NextJS and MongoDB. Pagination is one of th...
I recently implemented a small hint showing the reading time of an article in my blog. This is a functionality used quite much when reading some technical articles written by the developer community. It helps me to decide whether I have the time to r...
In larger projects, the cooperation of several teams and long-term maintenance is always an issue. The architecture must be defined in such a way that such aspects are possible. This is often implemented with a certain degree of modularization. This ...
On this page
A good friend of mine once told me about a conference talk that was about so-called task-based UIs. I considered this architecture style for an application in a private bank which was responsible for checking the suitability for finance instrument transactions.
I'm on a project with a completely different topic now. However, the software architecture and the way business entities are getting processed are quite similar. So I remembered this architectural pattern from those times. Since I consider that a very good fit, it might be worth an article.
Task-based UI is a special kind of micro frontend architecture pattern invented for a very specific use case.
Imagine we have a business entity that follows a well-defined business process during its lifetime. We can model that with the well-known pipes and filter architecture pattern.
This pattern is quite flexible. It can enforce the sequential flow of the business process. But it is not necessary. Certain process steps can also be handled in parallel.
It fits very well into a microservice architecture where every task along the business process gets handled by its own microservice. But what about the UI for such an application? We don't want to lose the benefit of the decoupling gained through the microservice architecture. I wrote a few articles about this topic. It basically leads us to go in the direction of micro frontends or self-contained systems.
We can actually go a step further and introduce an SCS per process step. Every SCS has its own UI and is responsible for handling the process step it is responsible for in its own UI.
There is actually nothing new until now. Anything I described so far we do in an SCS system as well. The idea of the task-based UI starts with the need for an overview of the entities describing their status along the process. This is not a simple thing since the processing of the entities is now distributed.
We could build an SCS gathering all the data from the process-related data over an API and build a UI that aggregates this data. This will build up a strong dependency on those SCS and this is something we actually want to avoid. We have a loose coupling through the asynchronous nature of the pipes and filter architecture and destroy it more or less with an aggregation.
What is, when we would leverage the micro frontend approach? Every SCS can provide a frontend snippet showing their piece of status from the corresponding entity. This is will return the responsibility of displaying its own data to its origin and we can loosely couple it in the frontend. This UI composition pattern is called task-based UI.
Task-based UI's are a special kind of micro frontends. Basically, every technical approach of the micro frontend architecture pattern also works for task-based UIs. A modern way to build micro frontends will leverage the new standard of web components. I will not explain how to build micro frontends and web components in this article. But give you a small example of how it could look like using them. Important is, that we pass in only the identifier of the processed entity. The rest is the responsibility of the corresponding microservice or SCS:
<script src="...../financial-instruments.js" />
<script src="...../suitability-check.js" />
<script src="...../document-handover.js" />
<script src="...../contact-notes.js" />
<fi-transaction-proposal>
<financial-instruments order-id="1" />
<suitability-check order-id="1" />
<document-handover order-id="1" />
<contact-notes order-id="1" />
</fi-transaction-proposal>
Entities that will go through several steps of a business process can be distributed with the pipes and filter architecture pattern. Aggregating and displaying the data from the different services/steps will break the benefits of the distributed and loosely coupled architecture. We can mitigate this problem by introducing the task-based UI architecture pattern. This is a special type of micro frontends dedicated to displaying the status(es) of entities that go through a distributed business process.
What do you think about this architectural pattern? Did you already have some experience with something similar? Leave a comment and discuss it with me.