Hi my fellow developers,
The Entando Standard Banking Demo provides a set of microservices, micro frontends and CMS components to demonstrate how you can leverage the platform to develop, deploy and make your applications available for your users.
This series gives you an overview of what you can find in the Standard Banking Demo including microservices and micro frontends generated by the Entando Component Generator, CMS components, and Entando global components you need to make this work perfectly.
A Quick Overview
The Standard Banking Demo application uses banking and insurance terms to create a professional rendering of an Entando application. Please note, this application does not attempt to answer a real business use case and it’s not provided to be used as-is in production.
As with most standard Entando applications that are packaged as bundles, the Standard Banking Demo Application uses different Git repositories.
A central repository, the source repository, contains multiple child source code projects.
Four bundle repositories are artifact repositories tagged by versions and used to install and deploy the compiled components via the Entando Component Repository.
The repositories for the Standard Banking Demo can be found under the Entando Samples GitHub organization. This is the project source repository
These are the bundle artifact repositories:
- https://github.com/entando-samples/standard-demo-banking-bundle
- https://github.com/entando-samples/standard-demo-customer-bundle
- https://github.com/entando-samples/standard-demo-manage-users-bundle
- https://github.com/entando-samples/standard-demo-content-bundle
If you want to learn more about the bundles, please check out our bundle series.
Install the Standard Banking Demo on Your Own
If you want to test the Standard Demo you can follow the dedicated tutorial to deploy and install the bundle. If you don’t have a running Entando instance follow the Getting Started guide first and then move on to the Standard Banking Demo bundle tutorial
How is the Standard Banking Demo Built? Example with the Dashboard page
The dashboard page is the best example we can take from the Standard Banking Demo to understand how it’s built: several micro frontends gathered under the same page to serve a business purpose.
Micro frontends present in this page are React or Angular applications using custom elements wrapped as web components and using REST APIs to reach the backend APIs through HTTP calls.
The second image presents the different micro frontends you can find on this page. In blue those developed with React and in red with Angular.
The page designer in the Entando App Builder allows you to compose pages with components such as micro frontends. Pages are available under the Pages → Management menu and you can design it by clicking on the design entry in the page kebab menu. Then you can drag and drop components to compose your page.
This tutorial can help you understand how to create pages in the App Builder.
The numbers added here help you to identify the different micro frontends from the design step to the final rendering.
You can also find the descriptor of this page, included in the bundle, to install and configure it. The technical widget names, aka “code” in the descriptor, help you to understand the link between the descriptor widgets entry and what you can see on the page designer.
code: dashboard
parentCode: homepagesd
titles:
en: My dashboard
it: La mia Dashboard
pageModel: dashboard
ownerGroup: free
joinGroups: []
displayedInMenu: true
seo: false
charset: utf-8
status: published
widgets:
- code: Brand-Logo
config: null
pos: 0
- code: Login_buttons
config: null
pos: 2
- code: sd_seeds_card
config:
cardname: checking
pos: 4
- code: sd_seeds_card_ng
config:
cardname: savings
pos: 5
- code: sd_seeds_card
config:
cardname: creditcard
pos: 6
- code: sd_alert_bar_icon
config:
icon: managealerts
title: Alerts
pos: 7
- code: sd_alert_bar_icon
config:
icon: viewstatements
title: View Statements
pos: 11
- code: sd_seeds_card_transaction_table
config: null
pos: 13
The backend banking application consumed by these micro frontends is running inside a pod on the Kubernetes cluster. You can use the following command to display all the pods and check the banking app:
ent kubectl get pods
The Microservices and Micro Frontends Architecture
The Standard Banking Demo application contains more microservices and micro frontends than the example presented above.
Here is a component map to understand what you can find in the Standard Banking Demo.
Other components
As mentioned above, the Standard Banking Demo does not only contain Java and Javascript code based components but also Entando native components. These components are used to manage dynamic content handled by the CMS engine, to compose micro frontends to define pages, to include static resources or to define security rules.
Here is a quick schema of what you can find:
What’s next?
This article is only an appetizer regarding all the content you can find in the Standard Banking Demo. The next articles will dive more deeply into the code and the architecture and the next one will focus on the microservices and micro frontends.
Top comments (0)