Standard Banking Demo: Introduction

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.

Anthony Viard - Monday, August 30, 2021
Tags: Engineering

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.

This blog post is part of the Entando Standard Banking Demo series:

  • Standard Banking Demo: Introduction
  • Standard Banking Demo: JHipster Generated Microservices and Micro Frontends
  • Standard Banking Demo: Discovering Entando CMS Components

Table of contents

  1. A Quick Overview
  2. Install the Standard Banking Demo on Your Own
  3. How is the Standard Banking Demo Built? Example with the Dashboard page
  4. The Microservices and Micro Frontends Architecture
  5. Other components
  6. What’s next?

A Quick Overview

image5.png

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.

image2.png

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:

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.

image8.png

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.

image6.png

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.

image1.png

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
image7.png

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.

image3.png

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:

image4.png

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.

White_Paper_cover.png

Learn How To Create Better Apps, Portals, & Websites--Faster.

This white paper outlines how your organization can accelerate UX innovation by developing with micro frontends on Kubernetes, as well as how a micro frontend platform can help you execute this methodology more effectively.