Constellationアーキテクチャの概要
Pega Infinity™アーキテクチャの継続的な進化には、Constellationと呼ばれる新しいUIテクノロジーが含まれています。 Constellationアーキテクチャには、App Studioの新しいパラダイム変革をもたらすオーサリング体験が含まれており、価値実現までの時間を短縮し、シチズンデベロッパーとPegaデベロッパーの両方に合わせて調整できます。
真のシングルページアプリケーション（SPA）アーキテクチャであるConstellationは、優れたパフォーマンスを提供します。これには以下が含まれます。
- 3倍速いインタラクション
- 7倍小さいネットワークペイロード
- 10倍速い初期サーバー応答時間
- 最初のロードでリクエストが30％減少
補足： これらの指標は、Pega Platform™バージョン8.6と従来のUIアーキテクチャでテストされています。
Constellationは、カスタマイズに依存していたイベント駆動型のUIから、アプリケーションのワークフローにビジネスロジックを組み込む既定のデザインのパラダイムに移行し、Pega初の真にCenter-out™ アーキテクチャを実現しました。
補足： PegaのユニークなCenter-outデジタル変革アプローチの詳細については、「Center-out Explained」をご覧ください。
Constellationアーキテクチャは、オープンソースのフロントエンドフレームワークでReactJSを使用して構築されたConstellationデザインシステムを実現しています。 Constellationアーキテクチャには、Pega Platformアプリケーションのロジックとデータを任意のフロントエンド設計システムとオーケストレーションする新しいクライアント側エンジンが含まれています。
Constellationには、複雑なケースマネジメントアプリケーションのビューとワークフローを最適化するために特別に設計されたUX/UIテンプレート、パターン、コンポーネントの完全な標準機能（OOTB）のフロントエンドUXライブラリが用意されています。 Constellationでは、スクリーンリーダーとの互換性、ローカリゼーションなど、標準機能（OOTB）のアクセシビリティコンプライアンスの改善も行っています。
補足： Pega Platformバージョン8.8には、次の2つの異なるデザインシステムがあります。ConstellationデザインシステムとCosmosデザインシステム。Constellationデザインシステムは、Constellationアーキテクチャをサポートしています。Cosmosデザインシステムは、Pega Platformバージョン8.7以前に存在したすべてのTheme CosmosアプリケーションとCosmos Reactアプリケーションをサポートしています。
次の画像で「 +」アイコンをクリックすると、Constellationアーキテクチャの詳細が表示されます。
Client-Side Innovation with Constellation
Constellation is Pega’s front-end architecture built on the Constellation design system using ReactJS. It features a client-side engine that coordinates application logic and data with any front-end design system via APIs. This enables integration with proprietary components while supporting out-of-the-box (OOTB), low-maintenance solutions.
補足： For more information, see React on the React website.
Constellation includes a full OOTB UX library of templates, patterns, and components tailored for Case Management. It also offers improved accessibility compliance, including support for screen readers, localization, and more.
By rendering Views directly in the browser, Constellation reduces payload size, leading to faster, smoother interactions. Developers save time by focusing on business logic instead of building UIs from scratch, and upgrades become easier due to the system’s prescriptive, consistent experience.
In simple terms, Constellation makes apps faster and easier to maintain—like a well-organized kitchen where every tool and ingredient is within your reach, eliminating the need to search through cabinets and drawers. The result: better performance, quicker feature delivery, and a more efficient development process.
カスタマイズから設定への開発パラダイムシフト
新しいConstellationアーキテクチャでは、コアフロントエンドエクスペリエンス（ナビゲーション、ワークフロー、情報アーキテクチャ）をそのまま配置して生産性を最適化するという、新しい開発パラダイムが導入されています。Constellationの処方的エクスペリエンスを活用することで、お客様は重要なビジネスロジック、ワークフロー、価値の高い成果に集中できます。
UI-Kitを使用した従来のセクションベースのアーキテクチャでは、デベロッパーはコアエクスペリエンスのあらゆる面をカスタマイズできます。しかし、この方法では新しい機能を利用するために Save As機能でルールを更新するために開発者が調整する必要があるため、ルールのメンテナンスやアプリケーションポートフォリオ全体のエクスペリエンスに一貫性がなく、アップグレードが困難になります。
Constellationを使用した新しい開発パラダイムでは、シチズンデベロッパーがApp Studioでアプリを設定します。レイアウトとフロントエンドのコアエクスペリエンスが定められているため、アップデートはシームレスで、アプリケーションの一貫性が高まり、顧客は価値構築ステージを短期間で達成できます。
次の図では、開発者がリストビューを持つ新しいタブを追加してFull caseビューを更新し、2つの新しいフィールドを追加してフィールドを並べ替えることによってSummary data ビューを更新しています。変更はPreviewセクションに表示されます。
Constellationの拡張
アプリ固有性の高い高度なユースケースでは、Constellationアーキテクチャにより、ReactJSとWebテクノロジーに精通したプロフェッショナルなフロントエンド開発者が、コアのConstellationのプレゼンテーションコンポーネントをプログラムで組み立て、Constellation DX APIを使用して新しいものを構築することで、Constellationを拡張できます。
たとえば、アプリケーションバックグラウンドチェックのワークフローで、接続デバイスからフィンガープリント画像をキャプチャしてケースに保存する必要がある場合を考えます。この高度なアプリ固有のユースケースでは、フロントエンドのプロフェッショナル開発者がカスタムDXコンポーネントを使用して新しいフィールドを構築し、Constellationを拡張します。デベロッパーは、Constellationボタンと他のConstellationのプレゼンテーションコンポーネントを組み立てます。開発者は、ボタンのオンクリックイベントを処理し、フィンガープリントリーダーのJavaScript APIを使用してデバイスと接続し、コールバックを取得して、ケースに画像を保存します。
今後のリリースでは、追加のカスタマイズが利用できるようになります。
補足： 価値実現までの時間を短縮し、コードのメンテナンスを削減するために、設計者や開発者は、カスタマイズを作成する前に、既存の標準機能（OOTB）Constellationテンプレートやパターンを使用してビジネス成果を達成するのがベストプラクティスです。カスタマイズに関する詳細は、「Creating Constellation DX components」を参照してください。Constellationデザインシステムのカスタマイズに関する詳細は、「design.pega.com」をご覧ください。
以下のインタラクションで理解度をチェックしてください。
このトピックは、下記のモジュールにも含まれています。
トレーニングを実施中に問題が発生した場合は、Pega Academy Support FAQsをご確認ください。