Pega Constellation Design Time Architecture

Pega DTA is a modern framework designed to streamline the development and management of user interfaces in Pega applications. It leverages various tools and services to provide a seamless development experience, enabling developers to create, manage, and deploy UI components efficiently.

Cloud

1. Pega CDN (Pega static assets): This content delivery network hosts static assets provided by Pega, ensuring fast and reliable delivery of these resources to the client browser.
2. Application static content service (Customer static assets): This service hosts static assets created and managed by the customer, allowing for customization and branding of the application.
3. Constellation messaging service: This service handles real-time communication between the client browser and the backend, facilitating seamless interactions and data exchange.
4. Infinity/LaunchPad: The core backend platform that provides essential services and APIs. It includes the Constellation DX Public REST API, enabling the integration and management of digital experience components.

Client Browser

1. Constellation design system (presentational components): A library of UI components designed for consistency and efficiency. These components are used to build the visual aspects of the application.
2. Constellation DX components (Pega and Customer): These are the dynamic components that drive the user experience. They are divided into: Pega DX components: Provided by Pega. Customer DX components: Created and managed by the customer.
3. React bridge: Acts as an intermediary, enabling the seamless integration of React components within the Pega Constellation framework.
4. ConstellationJS: A JavaScript library that provides public APIs for interacting with the Constellation framework, facilitating customizations and extensions.

Developer Tooling

1. React Dev Tools (Browser extension): A set of tools for debugging and inspecting React components within the application.
2. Redux Dev Tools (Browser extension): Tools for managing and debugging the state of the application, particularly useful for applications using Redux for state management.
3. xRay/DevMode: Tools for inspecting and debugging the application in development mode, providing insights into component behavior and performance.
4. Tracer: A tool for tracing and debugging the execution of processes within the Pega platform.
5. DX Component Builder: A tool for creating, listing, and deleting DX components, providing a streamlined development workflow.

Developer Docs/Tutorials

1. design.pega.com/develop: A resource site offering component API documentation and code snippets to aid developers in using and customizing the Constellation design system.
2. docs.pega.com: Comprehensive documentation for Constellation DX components and other related topics, including using Pega's core and public APIs.

Communication Channels

• HTTP and Web Socket: These protocols facilitate communication between the client browser and the cloud services, ensuring real-time interactions and data synchronization.

This architecture emphasizes modularity, real-time communication, and ease of use, providing developers with a robust framework to build and manage sophisticated user interfaces in Pega applications.

?

#PegaConstellationSeries

Next articles is about to see how to access APIs from the PConnect object with one example