January 21, 2022
Upgrading to Cosmos React, do it or not?
Pega is constantly evolving. As a Pega expert, you want to keep up, and take advantage of all the new features. Cosmos React is one such new technology, introduced in 2020 as the way forward. Meanwhile, Cosmos React is available as an early adopter, alongside Theme Cosmos and Theme UI-Kit. To explain why Cosmos React is currently still in the Early Adopter phase, we explain what Cosmos React is and what you can and cannot do with it. Upgrading to Cosmos React: to do or not to do?
Think of it as a hydrogen car. While the consensus is that a hydrogen car is the more sustainable and better solution in the long run; in practice, however, its development is still in its infancy. So should you go for it? Especially when you know that a good alternative, the electric car (Cosmos section-based UI) is now in full development and has already proven itself.
What is (Cosmos) React?
React is an open-source technique developed by Facebook to build web pages. It consists of a library of UI components and is a modern way to build responsive websites and apps.
It has long been possible to use Pega in combination with React, using the DX API: a set of messages that allow you to query data from Pega to display it in your UI. With Cosmos React, Pega is moving towards using this technique by default.
A new look and feel and new design guidelines, for example a new summary panel with the most important data of a case.
In terms of technology, this works the same way as UI-Kit, but following the design principles of Cosmos will ensure you are ready for future upgrades.
The traditional way of building sections. Most pre-2020 applications use this option.
This has the same design principles as Theme Cosmos, with a new technique in which you separate the content of your application from the presentation.
Cosmos React is Pega’s solution for separating the front and back end of your application. Traditionally, the Pega server sends HTML to the user, and so Pega determines what the user sees, and how it is displayed. Cosmos React separates this: Pega still determines the content, but the UI, how it is displayed, is driven by React.
The fact that with Cosmos React you work with a set of fixed components immediately explains why the Cosmos design principles insist on using design templates. Only if you use a design template that corresponds to a React component will the React code know how to present the data from Pega. If you have built a custom screen without design templates, you will also need custom logic on the React side.
How complete is Cosmos React UI now compared to Cosmos Section-based UI?
To get right to the point, Pega says the following about it:
“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.”
So what are these differences in functionality offered? What ‘shortcomings’ should you take into account if you do decide to use Cosmos React UI? To point out the differences, Pega has created a nice overview. We have summarised this overview below in the main points to consider if you want to start using Cosmos React UI.
|Development||Recommendations for 8.6|
|Cosmos React UI||Cosmos Section-based UI|
To already use Cosmos React despite its limitations, you can use ‘Hybrid-mode’. Hybrid-mode allows you to merge Cosmos React UI features with existing Cosmos Section-based UI. The advantage of this is that you can update to React UI incrementally, without losing existing functionality, while enjoying the new benefits of React UI (better performance and user experience).
For instance, Cosmos React UI provides improved performance during rendering, sorting, filtering and grouping of tables. In addition, the full case view in App studio will load and respond faster.
Read more technical information here:
The question is, what do you choose? Do you invest now in the more sustainable hydrogen car with teething problems (Cosmos React UI), do you go for the electric car that has already proven itself and is still developing, or do you go for the hybrid variant where you have the advantages of both worlds?
1. Assess your situation
Keep in mind that Cosmos React is still an early adopter at the moment and some features are not yet offered that Theme-Cosmos does. With that, Cosmos React may therefore still be a little too early for your case study. Currently, we would advise against going full Cosmos React for larger applications, use Hybrid Mode instead. If the limitations of Cosmos React are not an obstacle for your scenario, then by all means go ahead and experiment with it.
2. Move away from UI-Kit and use Cosmos
In any case, our advice would be to switch to that electric car as soon as possible. Pega Cosmos is UI/UX area the new standard and offers many advantages over the outdated UI-Kit. This will get you ready for a future move to Cosmos React.
3. Experiment with Hybrid mode
If you are already using Cosmos, experiment with Hybrid mode. In it, you run entirely on Cosmos, but no longer depend on UI-Kit for tables, for instance. You lean on the working Cosmos section-based UI and can use the certain benefits of Cosmos React UI.
Are you curious what this development could mean for your company or Pega project? Contact us or Bram and Tom. We would be happy to think along with you.