Adobe Experience Manager Sites & More

mlaraadobe · 8/14/23

Navigating UI Framework Choices for Custom Admin Interfaces in AEM

by Marco Lara

When crafting custom admin interfaces in Adobe Experience Manager (AEM), architects and developers have several choices to consider. The choice of UI framework can significantly influence the efficiency, maintainability, and scalability of the custom AEM implementation. In this post, I will explore UI framework choices, using CoralUI as our base reference point and discussing other alternatives.

Scenario

Let's consider a fictitious organization, LaraSoft, that provides software solutions globally to set the stage. LaraSoft is considering customizing its AEM Author (6.5) admin interface to meet its unique business requirements.

The default choice, of course, is CoralUI, the primary framework Adobe uses for designing admin interfaces in AEM. CoralUI is tightly integrated with AEM, providing various out-of-the-box advantages. However, the developers at LaraSoft wonder if they could leverage other UI frameworks that might offer certain benefits not present in CoralUI.

Advantages of Diversification

Before delving into alternative frameworks, it's essential to understand why LaraSoft (or any organization) would consider deviating from CoralUI. Depending on the specific requirements of each utility, alternative frameworks may provide more flexibility, customization options, and particular functionalities that CoralUI might not offer. They may also align better with the skills and expertise of the organization's development team.

Key Considerations

While exploring alternatives, AEM architects and developers should consider these key factors:

The singularity of the utility: Each utility's dependency on other utilities or components could influence the choice of UI framework.
Persistence of configuration: Will the utilities need to maintain configuration across sessions or support multiple configuration instances?
User-creation of utility configurations: If users need to create their own configurations for each utility, this could impact the choice of UI framework.
Types of user inputs: Some frameworks might support specific types of user inputs more readily than others.
Utilities as first-class content in AEM: If the utilities or utility configurations need to be treated as first-class content in AEM, this will favor a framework with tighter AEM integration.

What do others do?

Interestingly, many organizations have found ways to diversify their UI framework usage based on the specific requirements of each utility. Looking at ACS Commons, for example, some utilities use custom components with CoralUI dialogs, others are Single Page Applications (SPAs) embedded on an "empty" cq:Page, and some are custom scripts that solely rely on Sling. Customers will run into the same challenges ACS Commons faced in terms of maintainability and scalability. Consider the high probability of putting in place plan for extensive regression testing with each major AEM release. You can check out ACS Commons on GitHub for further context and examples: ACS Commons GitHub

Reaching a Decision

Ultimately, the choice of UI framework is an architectural decision that depends on the organization's unique business needs, the team's capacity, and their willingness to maintain custom admin interfaces. As AEM architects and developers, our role is to guide and support our teams in making informed decisions that align with our operational preferences and long-term strategy.

It's worth noting that Adobe Consulting Services (ACS) offers support to help organizations understand their requirements and suggest the most suitable approach based on these needs.

Conclusion

As AEM evolves, so too do the options and methodologies for customization. While CoralUI remains a robust and integrated solution for developing admin interfaces, other UI frameworks may offer unique benefits depending on the use case. By carefully considering the factors outlined in this post, you can make a decision that best suits your organization's needs, just like LaraSoft.

Do you have experiences to share about choosing a UI framework for AEM customizations? I'd love to hear from you in the comments below!