Cosmos React and Constellation
The ongoing evolution of the Pega Infinity™ architecture includes a new architecture of UI technology called Constellation. Constellation includes a new client-side engine to orchestrate Pega Platform application logic and data with any front-end design system. While Constellation is front-end agnostic, it is the basis for Cosmos React.
The Pega-generated UI in this architecture is Cosmos React. Cosmos React is a realization of the Cosmos design system built with ReactJS, an open-source, front-end framework. Cosmos React offers a complete out-of-the-box (OOTB) front-end UX library of UX/UI templates, patterns, and components that are specifically designed to optimize workflows for complex case management applications. Cosmos React also offers improvements in out-of-the-box accessibility compliance, including compatibility with screen readers, localization, and more.
A true Single Page Application (SPA) architecture, Constellation with Cosmos React offers exceptional performance, including:
- 3x faster interactions
- 7x smaller network payload
- 10x faster initial server response time
- 30% fewer requests on the first load
Note: These metrics have been tested on version 8.6 of Pega Platform as compared to Theme Cosmos.
The Cosmos React with the Constellation architecture includes a new paradigm-changing authoring experience in App Studio. The architecture enables faster time to value and is tailored for citizen developers and Pega developers alike.
In the following image, click the + icons to learn more about the Constellation architecture.
Development paradigm shift from customizing to configuring
With this new architecture comes a new paradigm of development, one in which the core front-end experience (the navigation, workflows, and information architecture) is prescribed, but configurable. This approach allows customers to focus less on the lower-value aspects of the application. While the traditional section-based architecture with UI-Kit and Theme-Cosmos have continued support, the new architecture is critical to enable customers to focus on the core business logic and workflow of the application.
In the traditional section-based architecture with UI-Kit, developers can customize any aspect of the core experience. However, this approach leads to significant rule maintenance, inconsistent experiences across the application portfolio, and difficult upgrades since updating rules with the Save As functionality must be reconciled by developers to take advantage of new features.
In the new development paradigm with Constellation and Cosmos React, citizen developers configure the application in App Studio. Because the layout and core front-end experience are prescribed, upgrades are seamless, applications are consistent, and clients can achieve the value-building stage faster.
In the example below, a developer updates the Full case view by adding a new tab with a list view, and updates the Summary data view by adding a new field and reordering the fields. The changes are displayed in the Preview section.
Customizing in Cosmos React
Cosmos React provides customers with OOTB solutions to achieve better business outcomes in a complex case management application. For advanced use cases, Constellation allows professional front-end developers who are knowledgeable in ReactJS and web technologies to extend Cosmos React. In future releases, additional customizations will be available.
Note: For the fastest time to value and less code maintenance, it is a best practice for designers and developers to use existing OOTB Cosmos React templates and patterns to achieve business outcomes before creating customizations in Cosmos React.
Check your knowledge with the following interaction:
This Topic is available in the following Module:
If you are having problems with your training, please review the Pega Academy Support FAQs.
Want to help us improve this content?