Pega Platform application types

Both Theme Cosmos and Cosmos React applications can use the Cosmos design system.

A design system is a library of patterns and rules that determine how an interface responds to user interaction. Design systems contain the best practice guidelines, operational assets, and UI components that are required to deliver the interface. By choosing to use a design system, you can scale your designs to maintain a unified presence across a number of platforms, with less effort.

The Cosmos design system is a front-end library for building enterprise applications with Pega and gives you:

• Improved data visibility
• Enhanced case processing
• Customizable columns
• A focus on relevant data
• The ability to instantly modify values and perform quick actions on table rows

Cosmos builds on Pega's previous generation of the design system, Pega UI-Kit. Both Cosmos and UI-Kit focus on production applications and improve the application user experience. The Cosmos design system goes further than UI-Kit, providing developers with a complete collection of modern, interlocked components. 

This option provides a Cosmos-based design system for use in a ReactJS-based run-time architecture. From the process perspective, when you select Cosmos React in the New Application wizard, the updated framework allows most of your development work to occur in the low-code App Studio environment of Pega Platform by using OOTB tools and components.

The Cosmos experience simplifies your development work with streamlined interactions and a modern interface. For example, in a medical claim upgrade case, navigating on a single screen expedites the user's workflow. By minimizing screen-to-screen navigation, users avoid the disorienting jump to a new screen in the middle of a process. Additionally, the Cosmos experience allows you to preview items, such as cases, in the same screen.

The Cosmos React single-page web approach allow users to use standard web interactions such as the browser's back button and an unlimited number of browser tabs. Consistent list pages and object pages make the application more intuitive for developers and end users. Also, collaboration tools are built into every item, enabling contextual communication across your organization. 

Constellation service

Cosmos React relies on the Constellation engine, which uses ReactJS libraries to create a new run-time architecture. Constellation is a microservice that delivers React components, JavaScript code, and other static content to the browser. To obtain configurations, context, and data for Cosmos React applications, the Constellation client interacts with the server exclusively through DX APIs. By keeping the Constellation container separate from other services, you avoid dependencies, give developers the tools to create new UI components without interfering with other work, and improve overall application performance. In most use cases a Cosmos React application runs faster than a Theme Cosmos application because Cosmos React uses less Javascript and CSS, has a smaller payload from the server, and a more lightweight Document Object Model (DOM) rendering.

The redesigned UI, which is now available in early adopter mode, includes an updated component library and an intuitive authoring experience that promotes low-code development and improved maintainability. Cosmos React design is recommended for new applications to build a highly efficient and robust system.

This option builds your application on Cosmos rules, such as the application template Theme-Cosmos 3.01, a non-React version of Cosmos. For example, in the GoGoRoad application, the application definition uses the Theme-Cosmos 3.01 built-on application.

Cosmos rules introduce significant improvements to the user experience. The main enhancements include:

• A new case preview panel
• Flexible screen space management
• An improved search experience
• The ability to open and work with several independent sessions of your web application 
• Increased efficiency when working with multiple cases

When you select Theme Cosmos from the New Application wizard, you get significant developer productivity gains. In addition to built-in styling, most functionality is provided through design templates. With the Cosmos rules model, developers map data into template regions, toggle desired features on or off, and brand the application with App Studio.

You can launch your Cosmos application in any way you want. Whether you start at the home page, follow a link, or use bookmarks, new tabs or windows no longer refresh one another. As a result, you can reference and cross-check multiple work items at a time without sacrificing one context for another, or losing current work.

When building a new application with the Cosmos design system, which option you choose depends upon your business needs and the overall complexity of the project. For example, if you are building a new low-code application from the beginning and want to take advantage of the most updated UI and functionality, you might choose to build a Cosmos React application. 

As a UI framework, Cosmos React offers improved performance, interactivity and response time. As a new architecture, it offers a narrower feature set than the section-based Theme Cosmos UI. By familiarizing yourself with best practices for the use of Cosmos React, you can make the best UI choice for your business.

Guidelines for new applications

• Use Cosmos React for simple applications that you can enhance incrementally as the Cosmos React framework evolves.
• Before building with Cosmos React, be sure to review the list of features that are NOT yet available in Cosmos React to ensure that your application can function as expected.
  Note: To learn more about the features available in Cosmos React, see Feature limitations in Cosmos React.
• If you are building a new application on top of a either a Theme Cosmos or UI Kit application, keep the original architecture. For example, Pega Customer Service uses UI Kit. If you build a new application that is based on the Pega Customer Service application, it must also use UI Kit.

Guidelines for existing applications

• Keep UI Kit applications on their current architecture.
• Keep existing Theme Cosmos applications that use a section-based UI on their current architecture. Consider upgrading to the latest version of the Cosmos theme ruleset (Theme-Cosmos) in the application definition.
  Note: To learn more about using the Cosmos theme, see Updating the Cosmos theme in your application.
• To shorten future migrations, consider preparing for migration now by checking existing applications for compliance with the App Studio development methodology. Use the App Studio Compliance landing page to identify non-compliant UI elements in your application, and then plan development time to address identified issues.
  Note: To learn more about preparing for application migration, see Reviewing user interface components and App Studio development methodology.

Check your knowledge with the following interaction: