differences between granite.ui.coral.foundation vs granite.ui.foundation (specifically in how they actually work)

[jayv25585659]

Not really concern on the presentation but on the how they actually work.

As an example:

• granite/ui/components/coral/foundation/form/textfield vs granite/ui/components/foundation/form/textfield seems to work the same
• "granite/ui/components/coral/foundation/form/multifield" vs "granite/ui/components/foundation/form/multifield": the implementation is different so how you handle/parse the values in the Sling model is different as well

I'm trying to the differences in the most commonly used ones.

Thanks

[HrishikeshKagne]

Hi @jayv25585659 ,

The main differences between granite.ui.coral.foundation and granite.ui.foundation components in Adobe Experience Manager (AEM) lie in their underlying technologies and how they handle various tasks. While they often provide similar functionalities, they differ in implementation, usage, and sometimes in how data is parsed and managed. Here’s a breakdown of these differences with a focus on their functional aspects:

1. Underlying Technology and Framework:

• Granite UI Foundation (granite.ui.foundation):
  • These components are part of the older Granite UI framework.
  • They are built using classic Coral UI 2 and the older ExtJS framework.
• Coral UI Foundation (granite.ui.coral.foundation):
  • These components are part of the newer Granite UI framework.
  • They are built using Coral UI 3, which relies on modern web standards like HTML5, CSS3, and JavaScript without a heavy reliance on a specific JavaScript framework like ExtJS.

2. Component Implementation and Structure:

• Form Textfield:

  • granite/ui/components/foundation/form/textfield:
    • Uses the older Coral UI 2 components.
    • Configurations and handling might be based on ExtJS conventions.
  • granite/ui/components/coral/foundation/form/textfield:
    • Utilizes Coral UI 3 components.
    • More modern HTML5 and JavaScript, resulting in different rendering and behavior.

• Form Multifield:

  • granite/ui/components/foundation/form/multifield:
    • Implementation relies on Coral UI 2.
    • Data handling might involve different data attributes and structures.
  • granite/ui/components/coral/foundation/form/multifield:
    • Built with Coral UI 3.
    • Different approach to data storage and parsing, often simpler and more aligned with modern web practices.

3. Handling and Parsing Values in Sling Models:

• Data Storage and JSON Structure:
  • Foundation Components:
    • May store data in structures that are compatible with Coral UI 2 and ExtJS.
    • The format of JSON data might be different, requiring specific parsing logic in Sling models.
  • Coral Foundation Components:
    • Stores data in formats that align with Coral UI 3’s modern approach.
    • JSON structures are typically more straightforward, and Sling models might need updated parsing logic.

4. Configuration and Dialogs:

• Dialog Configuration:
  • Foundation Components:
    • Dialogs configured using classic AEM dialog syntax.
    • Might involve specific node structures and properties that are compatible with Coral UI 2.
  • Coral Foundation Components:
    • Dialogs use the newer Coral UI 3 syntax and configuration.
    • Simpler and more consistent with modern practices, reducing complexity.

5. Extensibility and Customization:

• Extensibility:
  • Foundation Components:
    • Customization might require deeper knowledge of ExtJS and older Coral UI 2 specifics.
  • Coral Foundation Components:
    • Easier to extend and customize due to the reliance on modern web standards.

Example Comparison:

Textfield Component:

Old Foundation (granite/ui/components/foundation/form/textfield):

<textfield
    jcr:primaryType="nt:unstructured"
    fieldLabel="Title"
    name="./title"
    value="Sample Title"
    required="{Boolean}true"/>

New Coral Foundation (granite/ui/components/coral/foundation/form/textfield):

<coral-Textfield
    jcr:primaryType="nt:unstructured"
    fieldLabel="Title"
    name="./title"
    value="Sample Title"
    required="{Boolean}true"/>

Multifield Component:

Old Foundation (granite/ui/components/foundation/form/multifield):

<multifield
    jcr:primaryType="nt:unstructured"
    name="./items"
    fieldLabel="Items">
    <field jcr:primaryType="nt:unstructured"
           name="./item"
           fieldLabel="Item"/>
</multifield>

New Coral Foundation (granite/ui/components/coral/foundation/form/multifield):

<coral-Multifield
    jcr:primaryType="nt:unstructured"
    name="./items"
    fieldLabel="Items">
    <field jcr:primaryType="nt:unstructured"
           name="./item"
           fieldLabel="Item"/>
</coral-Multifield>

• Granite UI Foundation components are based on older technologies and frameworks, requiring specific handling and customization based on ExtJS and Coral UI 2 conventions.
• Coral UI Foundation components utilize modern web standards, are easier to use, and align with contemporary development practices, often simplifying the configuration and data handling in Sling models.

Understanding these differences is crucial for developers to correctly implement and extend AEM components, ensuring they leverage the right framework for their needs and maintain compatibility with AEM’s evolving ecosystem.

[SupportMember]

Thanks ChatGPT, I've been following you, and this is considered spamming, I am reporting you.

[arunpatidar · Accepted solution]

Hi @jayv25585659 
Please check this https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/difference-between-granite...