Adaptive Forms Core Components

Since AEM version 6.5.16, an alternative component collection for Adaptive Forms in AEM Forms has been available with the Adaptive Forms Core Components. This collection has been expanded piece by piece in the past service packs for AEM Forms, so it is worth taking a closer look at these Adaptive Forms Core Components. With this article we would like to provide a more detailed insight into the core components.

Anyone who is currently looking through the Adaptive Forms documentation at Adobe will often come across the following note:

If you look at the individual components you can see some differences. The following overview shows a comparison of all components. The comparison was created based on AEM Forms 6.5.20. This overview also largely applies to the corresponding version in AEM as a Cloud Service (2024.1.0). However, this can differ in detail.

Here we want to take a closer look at Adobe's promises:

"Headless" capable:

If you build your forms on the Forms Core Components, they can also be natively integrated into third-party applications via the so-called Headless Forms API. This is difficult to do with the existing Foundation Components as there is no dedicated API. A more detailed look at AEM Forms Headless will be available in a future blog post. 

Availability on GitHub and comprehensive documentation:

Like the normal Sites Core Components, there is now also a project/repository on GitHub for the Forms Core Components. Not only is the code now publicly available, but the technical documentation contained there is also much more extensive than with the Foundation Components. This makes the development and expansion of the core components easier and faster. Known problems are now documented via GitHub and you can more easily report problems and possibly even correct them yourself. Without a doubt, Adobe is heading in the right direction here.

BEM model as a basis for style sheets (CSS):

The Block Element Modifier (BEM model) is a proven standard and frequently used method for organizing CSS. This makes styling the core components much easier. Compared to the Foundation Components, the CSS is easier to customize and easier to understand. This significantly speeds up and simplifies the creation of your own themes for the forms.

No dependency on third-party libraries:

With the Core Components, Adobe forgoes the integration of JQuery, JQuery-UI and Underscore. This not only makes it easier to integrate the forms into existing applications but also significantly reduces the Javascript load. The Page Speed Index is also happy about this. However, the so-called Forms Core Components Runtime library is not entirely narrow. At just under 100 kB, however, you are a long way from the almost 300 kB Javascript for the Foundation Components. Here too you can attest to Adobe's progress.

Focus on performance and accessibility:

Adobe promises high Lighthouse Scores for the Forms Core Components, compliance with the Core Web Vitals and compliance with accessibility standards and guidelines. These are all things that you can currently expect or should expect from a modern set of components. However, the extent to which there is a significant improvement compared to the foundation components would have to be determined in a more detailed analysis. The Foundation Components also have accessibility features. When it comes to performance, however, it's worth taking a look at the core components. These are significantly lighter and therefore have good conditions for dealing with larger data models or forms.

Versioning:

Similar to the Core Components in AEM Sites, the Core Components in Forms are now also versioned. This means that with “breaking changes” the components are always provided with a new version. This ensures that your own styles and extensions continue to work without having to update your own components. This makes AEM upgrades in particular much easier to carry out because you can assume that your own extensions to the core components will also work with a newer AEM version.

In addition to the improvements mentioned above, Adobe has also made changes to the authoring interface with the introduction of the Forms Core Components. Authoring forms with Core Components is now identical to authoring components in Sites. This essentially results in the following differences.