This document summarizes a presentation given by Sarah Zurmühle on implementing micro-frontends at acrevis Bank AG using Camunda 7. The presentation covered the architecture of the system, how communication between micro-frontends and services occurred, and the advantages and disadvantages of the micro-frontend approach and using Camunda 7. It included a demonstration of a simple BPMN process and user interface to showcase the proof of concept. Questions were then taken from the audience.

1. 13.09.2023
Partage d'expériences adesso
sur Camunda7 et Camunda Platform 8
Sarah Zurmühle
adesso Suisse SA
Software Engineer
Jean-François Gonguet
adesso Suisse SA
Senior Software
IT Architect

2. 13.09.2023 | 2
ADESSO IN CH
INTERNATIONAL SCALING WITH LOCAL ANCHORING
› We completed our vision of
having 500 employees by
2024 early – in late 2022.
› We work in German, English,
French, and Italian.
› We have just been voted 3rd-
best employer in Zurich by
Kununu.
HIGHLIGHTS
› Digital Transformation
› Application Modernization
› Analytics & BI
› CRM
› Compliance
› Mobile Solutions
› Cloud Solutions
› Operational Excellence
› AI
› Robotics RPA
› Process Mining
› BPM Camunda partner
› Payments
› Portals
CROSS INDUSTRY SUBJECTS
2022
2021

3. AGENDA
13.09.2023 | 3
1- Micro-frontend at acrevis Bank AG
We would talk about the content of the acrevis Project, its
architecture and communication patterns, how the micro-
frontends and the camunda component were connected and in
the end a conclusion with advantages and disadvantages.
This section will be given in English.
2- Camunda Platform 8 – Connecteurs
Nous résumerons les principes clés des nouveaux
connecteurs de la plateforme Camunda 8 et
illustrerons concrètement la façon de
procéder à l'aide d'un exemple.
Agenda Micro-frontend at acrevis Bank AG Camunda Platform 8 – Connecteurs

4. AGENDA
13.09.2023 | 4
1- Micro-frontend at acrevis Bank AG
We would talk about the content of the acrevis Project, its
architecture and communication patterns, how the micro-
frontends and the camunda component were connected and in
the end a conclusion with advantages and disadvantages.
This section will be given in English.
2- Camunda Platform 8 – Connecteurs
Nous résumerons les principes clés des nouveaux
connecteurs de la plateforme Camunda 8 et
illustrerons concrètement la façon de
procéder à l'aide d'un exemple.
Agenda Micro-frontend at acrevis Bank AG Camunda Platform 8 – Connecteurs

5. 13.09.2023 | 5
See slides from Sarah …
MICRO-FRONTEND AT ACREVIS BANK AG

6. AGENDA
13.09.2023 | 6
1- Micro-frontend at acrevis Bank AG
We would talk about the content of the acrevis Project, its
architecture and communication patterns, how the micro-
frontends and the camunda component were connected and in
the end a conclusion with advantages and disadvantages.
This section will be given in English.
2- Camunda Platform 8 – Connecteurs
Nous résumerons les principes clés des nouveaux
connecteurs de la plateforme Camunda 8 et
illustrerons concrètement la façon de
procéder à l'aide d'un exemple.
Agenda Micro-frontend at acrevis Bank AG Camunda Platform 8 – Connecteurs

7. 13.09.2023 | 7
Camunda7 : Embedded engine architecture

8. Camunda7 : ViaParl application reference
ViaParl_BackEnd
J A V A
Tomcat Web server
Spring Boot
ViaParl_DB
Camunda
workflow
DB
REST
API
Integration layer
Common services :
• Persistence
• Reporting
• IdentityMgt
Orchestration engines
• BPMN
• CMMN
• DMN
Camunda
apps
Camunda
Cockpit Admin Tasklist
MVC layer
ViaParl
ViaParl
app
ViaParl_FrontEnd
N O D E. J S
ViaParl
Angular
Identité
SSO
Mail
server
DMS Proxy Client
OpenText
Document
repository
Services exposed
(REST, HTTP)
ProcessEngine
Bean
Java
API
Spring Security

9. Spring Boot
Orchestration engines
• BPMN
• CMMN
• DMN
Camunda
MVC layer
ViaParl business logic
ProcessEngine
Bean
Java
API
Recevoir nouvelle intervention
public class BeanInsererInterventionDansECM implements JavaDelegate {
@Override
public void execute(DelegateExecution execution) throws Exception {
// --------------------------------------------------------------------------------------
// --- Cette méthode a pour objectif de générer le document
// --- initial de l'intervention parlementaire
// --------------------------------------------------------------------------------------
….
….
}
}
Camunda7 : ViaParl application reference

10. 13.09.2023 | 10
Camunda7 : Weaknesses of the embedded engine
No isolation between the engine and the application, meaning :
Troubleshooting gets harder
Libraries are mixed
Extensibility weakens stability
Rebuild and redeployment necessary
Complex configurations
No polyglot environments

11. | 11
Camunda8 : Remote engine architecture
13.09.2023

12. 13.09.2023 | 12
Camunda8 : External task pattern

13. 13.09.2023 | 13
Camunda7 vs Camunda8
BPM
engine
BPM
engine
Waiting task list
Service Micro-service

14. 13.09.2023 | 14
Camunda8 : Scaling Zeebe cluster

15. 13.09.23 | 15
Camunda8 : OOTB Connectors
INBOUND
Inbound Connectors enable workflows to receive
data or messages from external systems or services.
OUTBOUND
Outbound Connectors allow workflows to trigger
external systems or services.
• Amazon EventBridge Webhook
• Amazon SNS inbound
• Amazon SQS
• GitHub Webhook
• HTTP Webhook
• RabbitMQ Consumer
• Kafka Consumer
• Slack inbound
• Twilio Webhook
Out-of-the-box (OOTB) Connectors accelerate solution implementation by providing pre-built,
ready-to-use connectors to popular external systems.
• Amazon DynamoDB
• Amazon EventBridge Service
• Amazon SNS Outbound
• Amazon SQS
• Asana
• Automation Anywhere
• AWS Lambda
• Blue Prism
• Camunda Operate
• Easy Post
• GitHub
• GitLab
• Google Drive
• Google Maps Platform
• Google Sheets
• Kafka Producer
• Microsoft Teams
• OpenAI
• Power Automate
• RabbitMQ
• Salesforce
• SendGrid
• Slack
• UiPath
• WhatsApp

16. 13.09.2023 | 16
DEMO : custom connector
CAMUNDA
engine
Waiting task list
External worker
Service task Custom Connector
Spring Java
worker
Connector
based on
ConnectorSDK

17. 13.09.2023 | 17
Let’s see it in action …

18. | 18
MERCI
13.09.2023
adesso Suisse SA
Rue Pichard 13
1003 Lausanne
info@adesso.ch
www.adesso.ch
POUR VOTRE ATTENTION

19. 13.09.2023 | Sarah Zurmühle
PROOF OF CONCEPT
CAMUNDA & MICRO-FRONTENDS

20. 13.09.2023
AGENDA
Architecture
2
Communication
3
Advantages and Disadvantages
4
Q&A
5
Task Description & Demo
1

21. 13.09.2023
TASK DESCRIPTION
Create a simple
user interface
for selecting,
modifying and
presenting
customer data
Showcase
Camunda 7
for processs
orchestration
Use a micro-
frontend
architecture

22. 13.09.2023
MICRO-FRONTENDS – WHAT’S THE DEAL?
https://micro-frontends.org/
https://micro-frontends.org/

23. 13.09.2023
POC BPMN

24. 13.09.2023
DEMO

25. 13.09.2023
Technology:
• Vue.js
• Java Spring Boot
• Camunda 7
• REST-API
• RabbitMQ
• WebSocket
• H2 in-Memory Database
ARCHITEKTUR
Vue.js
Spring
Boot
Camunda
REST-API
RabbitMQ
WebSocket
H2 DB
Camunda

26. 13.09.2023
• Communication:
• Micro-Frontend → Micro-Service: REST-API
• Micro-Service → Micro-Frontend: WebSocket
• Micro-Service → Micro-Service: RabbitMQ
• Micro-Service → Camunda: RabbitMQ
ARCHITEKTUR

27. 13.09.2023
EXAMPLE COMMUNICATION FLOW

28. 13.09.2023
Advantages:
• Teams can work independently
• Less conflicts, e.g. git merge conflicts
• Micro-frontends can run in their own
environment which makes testing easier
• Less conflics with the implementation of
other teams
Disadvantages:
• Building a communication structure for
micro-frontends is time consuming
• Communication patterns have to be
selected with care
• Each micro-frontend has to run in order to
run the end product
• In our case, it were 8 micro-frontends and
services
PROS AND CONS OF A MICRO-FRONTEND ARCHITECTURE

29. 13.09.2023
Advantages:
• Clear definition of processes
• No need for additional communication
practices
• Completly done via Message Queue
• All processes for multiple micro-frontends
are gathered together
• Adaptable to the defintion of new micro-
frontends
Disadvantages:
• Increase in message exchanges
• Makes the system more complex
• More space for creating error
• Strong Coupling
• Camunda has to be implemented
accordingly to work with micro-frontends
• Micro-frontends have to be adapted to work
together with Camunda
PROS AND CONS OF USING CAMUNDA 7

30. 13.09.2023
Q&A

31. 13.09.2023
adesso Schweiz AG
Vulkanstrasse 106
CH-8048 Zürich
T +41 58 520 97 10
info@adesso.ch
www.adesso.ch