Web Component Approach
There are many benefits to building an application using web components, some of which are explained here:
Component-based Architecture
Web components follow a component-based architecture, where the UI is divided into independent and reusable components.
In the case of StarterKit and derived plugins, the application is broken down into the following groups of web components:
| Web Component | Description |
|---|---|
| Application | The top level web component which is added to the HTML page and is responsible for the interface between the application and Temenos Explorer; and rendering the target element of the application router where content will be dynamically loaded. |
| Pages | Pages are components dynamically loaded into the main application based on the router configuration. These could be dashboards containing multiple cards, pages to display information to the user (e.g. view a customer and their accounts) or pages to capture information from the user (e.g. web form). |
| Cards | Cards are components that are typically loaded as part of a dashboard page. These contain modular self-contained elements such as charts, tables/lists of data, links/menus and web forms. |
Each page and card is a self-contained web component which handles the API calls, business logic and rendering for itself. This approach promotes separation of concerns and modular development, allowing developers to focus on building and maintaining individual components rather than the entire application.
Reusability
Web components are designed to be reusable and encapsulated. They allow you to create custom, self-contained UI elements that can be used across different projects and frameworks. This promotes code modularity and reduces duplication, making it easier to maintain and update your application.
Encapsulation
Web components encapsulate their internal implementation and do not interfere with the rest of the application or other components. This isolation helps prevent CSS and JavaScript conflicts, making it easier to reason about the component's behavior and ensuring that changes to one component don't unintentionally impact others.
Maintainability
With web components, each component is self-contained and has its own lifecycle and logic. This modularity makes it easier to understand, test, and maintain individual components, leading to improved code maintainability and reusability.
Framework Agnostic
Web components are framework agnostic, meaning they can be used with any JavaScript framework or library. This flexibility allows developers to leverage their existing tech stack or choose the best tools for their project without being tied to a specific framework.
Browser Compatibility
Web components are supported by modern browsers without the need for additional libraries or polyfills. This broad browser support ensures that your components will work consistently across different platforms and devices, providing a seamless user experience.