Introduction to the Standard Banking Demo

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

• https://github.com/entando-samples/standard-demo

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.