Introduction to the Constellation architecture
The ongoing evolution of the Pega Infinity™ architecture includes a new UI technology called Constellation. The Constellation architecture includes a new paradigm-changing authoring experience in App Studio, enabling faster time to value and tailored for citizen developers and Pega developers alike.
A true Single Page Application (SPA) architecture, Constellation 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 Pega Platform™ version 8.6, compared to the traditional UI architecture.
Constellation moves away from the event-driven UI that was reliant on customization, toward a paradigm of prescribed design that pulls business logic into the application workflow, resulting in Pega's first truly Center-out™ architecture.
Note: For more information on Pega's unique approach to Center-out digital transformation, see Center-out Explained.
The Constellation architecture is a realization of the Constellation design system built with ReactJS, an open-source, front-end framework. The Constellation architecture includes a new client-side engine that orchestrates Pega Platform application logic and data with any front-end design system.
Constellation 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. Constellation also offers improvements in OOTB accessibility compliance, including compatibility with screen readers, localization, and more.
Note: As of Pega Platform version 8.8, there are two distinct design systems: The Constellation design system and the Cosmos design system. The Constellation design system supports the Constellation architecture. The Cosmos design system supports all Theme Cosmos applications and Cosmos React applications that existed in Pega Platform version 8.7 and earlier.
In the following image, click the + icons to learn more about the Constellation architecture:
Development paradigm shift from customizing to configuring
With the new Constellation architecture comes a new paradigm of development, one in which the core front-end experience (the navigation, workflows, and information architecture) is in place out of the box and optimized for productivity. By taking advantage of Constellation’s prescriptive experience, customers can focus on critical business logic, workflow, and high-value outcomes.
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, because 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, 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 following figure, a developer updates the Full case View by adding a new tab with a list View, and updates the Summary data View by adding two new fields and reordering the fields. The changes are displayed in the Preview section:
Extending Constellation
For advanced use cases that are highly app-specific, the Constellation architecture allows professional front-end developers who are knowledgeable in ReactJS and web technologies to extend Constellation by programmatically assembling the core Constellation presentational components, and using the Constellation DX API to build something new.
For example, suppose that a workflow for an application background check must capture a fingerprint image from an attached device and save it to the case. In this advanced, app-specific use case, a professional front-end developer would extend Constellation by building a new Field with custom DX Components. The developer would assemble a Constellation button and other Constellation presentational components. The developer would handle the on-click event of the button and use the finger print reader’s JavaScript API to interface with the device, capture the callback, and store the image in the case.
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 Constellation templates and patterns to achieve business outcomes before creating customizations. For more information on customization with DX Components, see Creating Constellation DX components. For more information on customization in the Constellation design system, see design.pega.com.
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?