6.1 Traditional UI vs Constellation Architecture

Traditional UI vs Constellation Architecture

The User Interface (UI) and User Experience (UX) architecture of the Pega Platform has undergone a transformative evolution. Early enterprise Pega applications relied on server-generated HTML and proprietary markup. Today, Pega Infinity delivers two parallel UI paradigms: Traditional UI (built on Section rules and Theme Cosmos) and the Constellation UI Architecture (a modern, microservices-driven Single Page Application framework powered by React.js and the Digital Experience API).

Understanding the fundamental architectural divide between Traditional UI and Constellation is essential for Certified System Architects (CSAs). This architectural choice dictates how applications are authored in App Studio, how client browsers communicate with the Pega engine, how state is maintained, and how enterprise applications scale across desktop and mobile channels.

---

1. The Architectural Evolution of Pega UI

To appreciate the design philosophy of Constellation, architects must trace the lineage of Pega's user interface frameworks:

1. Theme UI-Kit (Legacy Section-Based Architecture):

   • Historically the standard theme for Pega 7 and early Pega 8 systems.
   • Built entirely on Section rules (Rule-HTML-Section) and Harness rules (Rule-HTML-Harness) housed in application rulesets.
   • Every layout, button, and dynamic behavior generated server-side HTML, CSS, and custom JavaScript that was transmitted across the network to the browser.
   • Customizations frequently involved overriding low-level styling sheets, authoring custom HTML fragments, and introducing bespoke JavaScript libraries. This approach accumulated heavy technical debt and created significant regression risks during platform upgrades.

2. Theme Cosmos (Traditional Hybrid Architecture):

   • Introduced in Pega 8.x to standardize enterprise UX patterns, eliminate redundant custom styling, and establish a cohesive design system.
   • Built on traditional Section and Harness technology, but structured around a prescriptive, responsive three-pane layout (Navigation pane, Main work area, Utilities/Summary panel).
   • Theme Cosmos significantly reduced the need for custom CSS by offering standardized design tokens, preconfigured dynamic layouts, and out-of-the-box modal dialogues.
   • While Theme Cosmos improved usability and developer productivity, it remained fundamentally bound to the server-side rendering model: form submissions, dynamic layout reloads, and field updates still required server round-trips to reconstruct DOM fragments.

3. Constellation UI Architecture (Modern Single-Page Application Framework):

   • Introduced as the next-generation UX engine for Pega Infinity, Constellation represents a clean break from server-rendered HTML streams.
   • Constellation decouples the user experience from the core PRPC rules engine. The frontend runs as a pure Single-Page Application (SPA) built on React.js and modern Web Standards.
   • The presentation layer runs entirely in the client browser, retrieving static assets and design tokens from an independent Constellation static content service or Content Delivery Network (CDN).
   • Data and metadata flow between the browser and the Pega engine exclusively via the high-performance Digital Experience API (DX API v2).
   • Constellation enforces strict low-code governance: business logic, field definitions, and layouts are configured visually in App Studio. Custom inline JavaScript, bespoke HTML snippets, and manual stylesheet hacks are completely prohibited within standard App Studio authoring.

---

2. Deep Dive: Traditional UI Architecture

Traditional UI operates on a server-centric rendering model. Every visual component presented to an end user is backed by a discrete rule metadata record evaluated by the PegaRULES engine on the server.

Core Building Blocks of Traditional UI

• Harness (Rule-HTML-Harness): The top-level container for an entire portal or screen. A harness organizes the overarching page structure using a Screen Layout (such as Header-LeftNav, Header-Footer, or Three-Pane). Harnesses define the major working zones of a portal and host one or more sections.
• Section (Rule-HTML-Section): The foundational unit of UI composition in traditional applications. Sections contain dynamic layouts, embedded sections, controls (text inputs, dropdowns, buttons), and repeating dynamic layouts.
• Flow Action (Rule-Obj-FlowAction): Connects the case processing flow to the user interface. A flow action references a Section rule that captures user input for a specific assignment step. When an operator clicks Submit, the flow action evaluates post-processing logic (such as validate rules and post-action data transforms) before advancing the case.

Server-Side Stream Processing & Rendering

When a user requests a screen in a Traditional UI application:

1. The client browser issues an HTTP request to the Pega application server.
2. The platform's Stream Processing Engine executes the relevant Harness, Section, and Control rules.
3. The engine dynamically interpolates case properties from the requestor's in-memory Clipboard (pyWorkPage) into HTML, CSS, and inline JavaScript markup.
4. A complete HTML stream document (or an HTML partial fragment) is returned across the network and injected into the browser's Document Object Model (DOM).

Client-Server Interactions: Post-Value and Refresh Section

Because presentation logic lives on the server, dynamic form interactions in Traditional UI require active server participation:

• Post-Value (pyPostValue): Transmits an updated field value from the browser to the server Clipboard without refreshing the entire screen. This ensures the server state reflects the user's latest entry, but it incurs an asynchronous HTTP round-trip.
• Refresh Section: When a change in one field conditionally determines the visibility, editability, or options of another field (for example, selecting a Country dropdown that dynamically updates a State/Province list), the browser must trigger a Refresh Section event. The server re-evaluates the section rules, runs conditional When rules, and sends back an updated HTML chunk to replace the existing DOM subtree.
• Performance Trade-Off: In complex enterprise forms containing hundreds of fields and nested dynamic layouts, frequent Refresh Section calls cause browser UI flickering, DOM thrashing, and high server CPU utilization as the engine continually regenerates HTML.

---

3. Deep Dive: Constellation UI Architecture

Constellation fundamentally re-architects how enterprise software interacts with users by implementing a client-centric, headless presentation model.

+-------------------------------------------------------------------------+
|                  CONSTELLATION CLIENT-CENTRIC ARCHITECTURE              |
+-------------------------------------------------------------------------+
| [ BROWSER CLIENT ]                                                      |
|   - Single-Page Application (SPA) executed via React.js                 |
|   - Client-side state machine and instant UI rendering                  |
|   - Local validation, instantaneous tab switching, zero DOM flickering  |
+-------------------------------------------------------------------------+
       |                                           |                      
       | Static Assets, Tokens, JS Components      | RESTful JSON Data    
       v                                           v                      
+-----------------------------+       +-----------------------------------+
| CONSTELLATION STATIC ENGINE |       | PEGA PLATFORM ENGINE (PRPC)       |
| (Microservice or Global CDN)|       | - Case Lifecycles & Workflow      |
| - Pre-compiled React engine |       | - Business Logic & Rules Engine   |
| - Standard Cosmos tokens    |       | - Digital Experience API (DX API) |
| - Reusable UX design assets |       | - Relational Database (PegaDATA)  |
+-----------------------------+       +-----------------------------------+

Microservices-Based React Frontend

In Constellation, the browser runs a pre-compiled, highly optimized React application. The user interface does not depend on the Pega server to construct HTML tags. Instead, the browser downloads the core Constellation orchestration library once—typically cached aggressively from a Content Delivery Network (CDN) or a dedicated Node.js microservice.

Digital Experience API (DX API v2) Communication

Communication between the Constellation client and the Pega engine is strictly limited to lightweight, RESTful JSON payloads managed by the Digital Experience API (DX API v2):

• UI Metadata: When a case assignment opens, DX API sends a JSON payload describing the UI layout: which fields belong on the form, their data types, their labels, and their layout slots.
• Transactional Data: Only raw property values (.CustomerName = "Jane Doe", .AccountBalance = 4500.00) are transferred. No presentation markup, styling tags, or inline scripts cross the wire.
• Optimized Payloads: Because JSON payloads are vastly smaller than full HTML streams (often 70% to 90% smaller), network bandwidth consumption drops dramatically, making Constellation exceptionally fast even on constrained mobile connections.

Views, Design Templates & Configuration Panels in App Studio

Constellation transforms the authoring experience by mandating an App Studio First methodology:

• Rather than constructing freeform sections in Dev Studio, developers configure Views within App Studio.
• Views are assembled by choosing standardized Design Templates (such as 1-column, 2-column with a 70/30 split, or tabbed containers) that feature predefined slots. Developers simply drop fields and data objects into these slots.
• Form attributes—such as required status, read-only permissions, and conditional visibility—are configured via contextual side panels.
• Zero Custom JavaScript/HTML: App Studio strictly prohibits entering raw JavaScript, jQuery, or custom HTML markup into Constellation views. This design guardrail ensures that applications remain permanently maintainable and can be upgraded seamlessly across future Pega releases without breaking customizations.
• Cosmos Design Tokens: Visual attributes—such as margins, font families, primary colors, and border radiuses—are governed by centralized Cosmos design tokens. Changing a brand token at the theme level instantly and consistently restyles the entire application.

Extensibility via Custom Constellation Components

When specialized visual controls are required that are not part of the standard Cosmos library (such as an interactive geospatial map or a custom financial charting widget), developers do not write inline section hacks. Instead, professional front-end engineers author encapsulated Constellation DX Components using React, TypeScript, and the Pega Constellation SDK. These components are packaged, versioned, and deployed as reusable assets that citizen developers can drag and drop within App Studio.

---

4. Comprehensive Architectural Comparison Matrix

---

5. Architectural Selection Guidelines & Exam Strategy

When evaluating examination scenarios regarding UI architecture selection:

• Select Constellation UI for all greenfield (new) enterprise applications, high-volume transactional portals, multi-channel initiatives, and organizations prioritizing rapid low-code delivery with zero technical debt.
• Maintain Traditional Theme Cosmos only when modernizing existing legacy applications that have heavy, unavoidable dependencies on legacy Section rules, composite custom HTML grids, or unsupported custom third-party JavaScript libraries that have not yet been ported to the Constellation SDK.