What's the Difference Between Granite UI and Coral UI in Adobe Experience Manager? Usecase/Examples to understand this better?

[aem101]

In the context of Adobe Experience Manager (AEM) user interface development, can you help me explain the key concepts and distinctions between Granite UI and Coral UI.  Coral 3 UI. Please cover the following aspects:

1. Granite UI vs. Coral UI:

   • Help me understand the Granite UI VS Coral UI, highlighting their respective roles in AEM's user interface development.

2. Coral UI:

   • Describe the Coral UI framework and its significance in AEM development.
   • Explain how Coral UI differs from Granite UI in terms of platform independence and customization capabilities.

3. Coral 2 vs. Coral 3 UI?

4. Use Cases and Recommendations:

   • use cases or scenarios where it is advantageous to use Granite UI over Coral UI, and vice versa?

[AsifChowdhury]

@aem101 

Granite UI vs. Coral UI:

Granite UI and Coral UI are two different user interface frameworks used in Adobe Experience Manager (AEM) development, with distinct roles:

1. Granite UI:
- Role: Granite UI is the older of the two frameworks and serves as the foundation for AEM's user interface components. It provides the core building blocks for creating AEM components, such as dialogs, form fields, and widgets.
- Significance: Granite UI is essential for creating AEM components that are functional and responsive. It offers a robust set of predefined components and allows developers to create custom components and dialogs by defining them in XML or using Java APIs.
- Customization: Granite UI is highly customizable, allowing developers to create tailored user experiences within the AEM environment.

2. Coral UI:
- Role: Coral UI, also known as the Adobe Coral Framework, was introduced to provide a more modern and consistent user interface for AEM. It builds upon Granite UI and is used for creating user-friendly, responsive, and visually appealing interfaces.
- Significance: Coral UI enhances the user experience in AEM by providing a cohesive set of UI components, styles, and patterns. It focuses on user-centric design and aims to create a more intuitive and visually appealing user interface.
- Customization: While Coral UI offers a standardized look and feel, it can still be customized to match specific brand or design requirements. However, it is generally more opinionated in terms of design and styling compared to Granite UI.

Coral UI:

Coral UI is a framework designed to enhance the user interface in AEM development:

- Significance: Coral UI focuses on improving the user experience within AEM by providing a consistent and aesthetically pleasing interface. It offers a set of modern and responsive UI components and design patterns that help create visually appealing and user-friendly interfaces.

- Differences from Granite UI:
- Platform Independence: Coral UI is more platform-independent than Granite UI. It is designed to work well across various devices and screen sizes, making it suitable for responsive web design.
- Customization: While Coral UI components can be customized, they are more opinionated in terms of design and styling compared to Granite UI. This can be an advantage for teams looking for a consistent and visually appealing interface.

Coral 2 vs. Coral 3 UI:

Coral 2 and Coral 3 are different versions of the Coral UI framework in AEM:

- Coral 2 UI: This was the earlier version of Coral UI, and it introduced many of the foundational design principles and components for AEM's modern user interface.

- Coral 3 UI: Coral 3 represents the evolution of the framework, introducing new components, improved design patterns, and enhanced user experience elements. It builds upon the concepts of Coral 2 while providing more features and improvements.

Use Cases and Recommendations:

Here are some use cases and recommendations for choosing between Granite UI and Coral UI in AEM development:

- Granite UI:
- Use Granite UI when you need a high degree of customization and control over the user interface components.
- It's suitable for scenarios where you need to create custom dialogs, form fields, and widgets tailored to specific requirements.
- If platform independence and responsive design are not top priorities, Granite UI can provide more flexibility in design and functionality.

- Coral UI:
- Choose Coral UI when you want to create a more modern, visually appealing, and user-friendly interface in AEM.
- It's ideal for projects that prioritize responsive design and a consistent user experience across devices.
- If you prefer a framework that provides a more opinionated and cohesive design approach, Coral UI is a good choice.

In practice, you may also find hybrid approaches where Granite UI and Coral UI are used together, leveraging the strengths of each framework based on specific project requirements and design goals.

[sherinregi · Accepted solution]

Hi @aem101 

Please refer the below community blog answer for the highlights on GraniteUI and Coral UI 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/difference-between-granite...

Coral UI 

Coral UI (CUI) is an implementation of Adobe's visual style for the touch-enabled UI, that has been designed to provide consistency in the user experience across multiple products. Coral UI provides everything you need to adopt the visual style used on the authoring environment

Coral UI is a UI library made available to AEM customers for building applications and web interfaces within the boundaries of their licensed use of the product.

Read more here on significance and usage limitations : https://github.com/AdobeDocs/experience-manager-64.en/blob/main/help/sites-developing/touch-ui-conce...

Coral 2 vs Coral 3 

https://myaemlearnings.blogspot.com/2018/03/difference-bw-granite-ui-components.html

https://developer.adobe.com/experience-manager/reference-materials/6-4/granite-ui/api/jcr_root/libs/...

Its preferred to use Coral 3 components