januari 21, 2022

Upgraden naar Cosmos React, doen of niet?

Pega ontwikkelt zich continue. Als Pega-expert wil je bij blijven, en je voordeel doen met alle nieuwe functies. Cosmos React is zo’n nieuwe technologie, geïntroduceerd in 2020 als de weg voorwaarts. Inmiddels is Cosmos React beschikbaar als early adopter, naast Theme Cosmos en Theme UI-Kit. Om te verklaren waarom Cosmos React nu nog in de Early Adopterfase zit, leggen we uit wat Cosmos React is en wat je er wel en niet mee kan. Upgraden naar Cosmos React: doen of niet?

Zie het als een waterstofauto. De consensus is wel dat een waterstof auto op de lange termijn de duurzamere en betere oplossing is; maar in de praktijk staat de ontwikkeling ervan nog in de kinderschoenen. Moet je daar dan voor kiezen? Zeker als je weet dat er een goed alternatief, de elektrische auto (Cosmos section-based UI) nu volop in ontwikkeling is en zichzelf al wel bewezen heeft.

Wat is (Cosmos) React?

React is een door Facebook ontwikkelde open-source techniek om webpagina’s op te bouwen. Het bestaat uit een bibliotheek van UI-componenten en is een moderne manier om responsive websites en apps op te bouwen.

Het is al langer mogelijk om Pega te gebruiken in combinatie met React, door gebruik van de DX API: een set aan berichten waarmee je data vanuit Pega kan opvragen om die te tonen in je UI. Met Cosmos React beweegt Pega richting het standaard gebruiken van deze techniek.

source: Pegasystems

Cosmos React is de oplossing van Pega om de voor- en achterkant van je applicatie te scheiden. Traditioneel stuurt de Pega server HTML naar de gebruiker, en bepaalt Pega dus wat de gebruiker ziet, en hoe het wordt getoond. Cosmos React scheidt dit: Pega bepaalt nog steeds de inhoud, maar de UI, hoe het wordt getoond, wordt aangestuurd door React.

Het feit dat je met Cosmos React werkt met een set aan vaste componenten, verklaart meteen waarom de Cosmos ontwerpprincipes hameren op het gebruik van design templates. Alleen als je een design template gebruikt wat correspondeert met een React component, weet de React-code hoe het de data van Pega moet presenteren. Als je een custom scherm hebt gebouwd zonder design templates, zal je ook custom logica nodig hebben aan de React-kant.

Hoe compleet is Cosmos React UI nu in vergelijking met Cosmos Section-based UI?

Om gelijk maar met de deur in huis te vallen, Pega zegt daar het volgende over:

“Cosmos React uses the latest technology, but offers fewer functionalities compared to Theme Cosmos. Consequently, Cosmos React is best suited for early adopters who understand its narrower feature set and capabilities. As a best practice, use Theme Cosmos for complex applications and a mature, reliable architecture.”

Wat zijn dan die verschillen in geboden functionaliteit? Met welke ’tekortkomingen’ moet je rekening houden als je toch besluit Cosmos React UI te gebruiken? Om de verschillen te duiden heeft Pega een mooi overzicht gemaakt. Dit overzicht hebben wij hieronder samengevat in de belangrijkste punten om rekening mee te houden als je Cosmos React UI wilt gaan gebruiken.

Ontwikkeling Aanbevelingen voor 8.6
Cosmos React UI Cosmos Section-based UI
Landing pages
Out of the box widgets for worklist and Pulse
Case lifecycle with stages and steps
Open cases from Landing pages & other case references
Client-side expressions and when rule-based expressions
Column filtering, sorting and grouping
Localization
Web Mashup & Mobile
Rule delegation
Reports & report browser
Paragraph rule
Development Branching
Generate PDF automations
Attachment categories
Beveiliging
OAuth 2.0 authentication
Atribute Based Access Control (ABAC)

Om ondanks de beperkingen toch al gebruikt te maken van Cosmos React, kun je gebruik maken van de ‘Hybrid-mode’. Met Hybrid-mode kun je Cosmos React UI features samenvoegen met bestaande Cosmos Section-based UI. Het voordeel hiervan is dat je incrementeel kan updaten naar React UI, zonder daarbij bestaande functionaliteit te verliezen en wel te profiteren van de nieuwe voordelen van React UI (betere performance en gebruikerservaring).

Zo zorgt Cosmos React UI voor verbeterde performance tijdens het renderen, sorteren, filteren en groeperen van tabellen. Daarnaast zal de full case view in App studio sneller laden en reageren.

Lees hier meer technische informatie:

De bovenstaande tabel laat zien dat een aantal key features van Pega al wél ondersteund worden in Cosmos React UI. Voorbeelden hiervan zijn:

  • Landing Pages
  • Case lifecycle with stages and steps
  • Opening cases from Landing pages & other cases
  • OAuth 2.0 authentication

Bovenstaande features zijn belangrijk om Cosmos React UI te kunnen gebruiken in de Early Adopter fase. Zonder Case lifecycle management, het kunnen openen van cases of OAuth 2.0 authentication wordt het voor veel praktijksituaties überhaupt al onmogelijk om Cosmos React UI te gaan gebruiken.

Echter is ook te zien dat een aantal features nog niet ondersteund worden in Cosmos React UI. Deze punten beïnvloeden in grote mate de besluitvorming om wel óf niet voor Cosmos React UI te gaan kiezen.
Het ontbreken van Localization in React UI zal voor Engels georiënteerde applicaties niet direct een probleem zijn, de standaard is immers Engels. Echter, voor applicaties die in een andere taal dan Engels gebruikt dient te worden zal het ontbreken van deze functionaliteit wel problemen geven. Deze applicaties zijn haast altijd Nederlands georiënteerd. De workaround hiervoor zou zijn dat je sections nadrukkelijk in het Nederlands opbouwt.

Vanuit een functioneel perspectief zorgt het ontbreken van Rapporten en Bijlage categorieën voor problemen. Dit resulteert er namelijk in dat er (nog) geen rapporten gedraaid kunnen worden en documenten niet goed geordend toegevoegd kunnen worden door gebruikers. In onze ogen is dit een grote blokkade om al met Cosmos React UI te gaan werken, aangezien voor haast elke grote applicatie dergelijke functionaliteit gewenst is.

Het ontbreken van development branching behoeft wat extra uitleg. Het opbouwen van je datamodel, case structuur en design templates gaat nog steeds via branches in Pega. De daadwerkelijke invulling van de front-end komt buiten Pega te liggen, maar kan daar gewoon door een software lifecycle met branching gaan. Het punt waar Pega momenteel niet in ondersteund is de interactie tussen de front-end implementatie buiten Pega en de code die nog in ontwikkeling is binnen Pega. Vanuit een ontwikkelperspectief zorgt dit ervoor dat ontwikkelen gefaseerd plaats zal moeten vinden. Je zult de code in de Pega branch moeten mergen alvorens je de losstaande front-end code goed kunt testen. Wanneer je een grote applicatie hebt te onderhouden waarbij veel tegelijkertijd ontwikkeld wordt, dan is het door het ontbreken van een volwassen manier van branch ontwikkeling momenteel niet mogelijk om efficiënt te ontwikkelen met Cosmos React UI in de huidige versie.

De UI wordt gegenereerd door een React server: de Constellation service:

Hier zie je hoe de constellation engine werkwijze eruit ziet.

De Constellation engine serveert statische bouwblokken, die zich in je browser vullen met data vanuit Pega. Bijvoorbeeld, de Constellation engine stuurt het component wat de zaaksamenvatting bevat naar je browser. Pega levert vervolgens de zaakgegevens om dat component te vullen. Alle data vanuit Pega verloopt via API berichten. De Constellation engine gebruikt React om de webpagina’s op te bouwen.

Het maken van deze scheiding heeft als voordeel dat het afhankelijkheden wegneemt.  Een front-end team kan nieuwe visuele componenten maken, zonder dat ze aan de inhoud van Pega hoeven te komen.

Er is een aantal voorwaarden waaraan voldaan moet worden voordat Cosmos React UI of Hybrid-mode te gebruiken is. Zo is het nodig om een beveiligde HTTPS-verbinding te hebben, moet er een Constellation engine draaien en is er een verschil tussen on-premise en Cloudapplicaties. De onderstaande tabel biedt een beknopt overzicht van de voorwaarden waaraan voldaan moet worden.

  Applicatie type
On-Premise Cloud
Development
Constellation Engine Dient geïnstalleerd te worden. OOTB aanwezig
Docker/ Kubernetes Wanneer niet geïnstalleerd met Pega Infinity zie:

Secure HTTPS protocol Benodigd Benodigd
DSS en REST API configuratie Benodigd Gebeurt automatisch
App alias Benodigd Benodigd

Naast bepaalde technische voorwaarden zijn er ook nog voorwaarden in je applicatiestructuur waaraan voldaan moet worden. Cosmos React UI vereist namelijk wel het gebruik van design templates. Als je van Cosmos Section-based UI upgrade naar Cosmos React zullen haast alle secties al via design templates gemaakt zijn. Mocht je van de UI-Kit naar Cosmos React willen upgraden, houdt dan rekening met veel voorbereiding om je sections om te bouwen naar design templates.

Daarnaast is het voorkomen van custom CSS in sections een pré. Custom CSS in Pega kan namelijk resulteren in onverspelbaar UI gedrag als je tegelijkertijd via Cosmos React UI je schermen probeert te presenteren.

Wij raden het dus volgens Pega best practices aan om pas te upgraden naar React als je al design templates gebruikt en geen custom css logica toegepast hebt in je applicatie.

Onze aanbeveling

De vraag is, waarvoor kies je? Investeer je nu al in de duurzamere waterstofauto met kinderziektes (Cosmos React UI), ga je voor de elektrische auto die zichzelf al bewezen heeft en zich nog doorontwikkelt, óf ga je voor de hybride variant waarbij je de voordelen van beide werelden hebt?

1. Beoordeel je situatie

Houd in het achterhoofd dat Cosmos React nu nog early adopter is en dat een aantal functionaliteiten nog niet worden aangeboden die Theme-Cosmos wel biedt. Daarmee kan het dus zijn dat Cosmos React nog iets te vroeg komt voor jou casus. Momenteel zouden wij het afraden om volledig Cosmos React te gaan gebruiken voor grotere applicaties, gebruik dan Hybrid Mode. Als de beperkingen van Cosmos React geen belemmering vormen voor jouw scenario, ga er dan vooral mee experimenteren.

2. Stap af van UI-Kit en gebruik Cosmos

Ons advies zou zijn om in ieder geval zo snel mogelijk over te stappen naar die elektrische auto. Pega Cosmos is UI/UX gebied de nieuwe standaard en biedt vele voordelen ten opzichte van de verouderde UI-Kit. Hiermee maak je je klaar voor een toekomstige overstap naar Cosmos React.

3. Experimenteer met Hybrid mode

Als je al Cosmos gebruikt, experimenteer met Hybrid mode. Daarin draai je volledig op Cosmos, maar ben je voor bijvoorbeeld tabellen niet meer afhankelijk van UI-Kit. Je leunt op de werkende Cosmos section-based UI en kan de bepaalde voordelen van Cosmos React UI gebruiken.

Auteurs:

Bram Agterberg

Pega Consultant

Tom Dekker

Pega Consultant

Nieuwsgierig?

Ben jij benieuwd wat deze ontwikkeling voor jouw onderneming of Pega project kan betekenen? Neem contact met ons op of Bram en Tom. We denken graag met je mee.

Gerelateerd