If you come from the Adobe Experience Manager (AEM) world, I do not think this post is for you; you already know what I am going to explain. However, if you are working with other Adobe solutions or are just starting to learn AEM, I hope to give you an initial overview of what Experience Fragments (XF) are.
To avoid confusion, I want to start with what XFs are not. If you have also heard the AEM concept of Content Fragments, you may be thinking that there is a connection between the two. After all, both have the word “fragments” in the name. While there are many differences between the two, to me, the main one is:
Content Fragments are presentation-agnostic pieces of content; you need to format them according to the media to be shown to the final user.
Experience Fragments are made of content and presentation to create an experience; you use them as they come.
If this still does not give you enough information to understand the difference, think of Content Fragments as “raw” content, with no styling, and Experience Fragments as “cooked” content, ready to be used. You also create and manage them in different places in AEM.
Finally, and equally important, you do not need one to use the other. They are completely independent.
What are they?
Let’s focus on XFs only for the rest of this post. I like to think of them as HTML snippets that are ready to be inserted into an HTML page. However, this may be a bit restrictive, as AEM can generate more than HTML pages. A more official definition can be found on this Experience League page:
An Experience Fragment is a grouped set of components that, when combined, creates an experience. For example, a Title, Image, Description, and Call To Action Button can be combined to form a teaser experience.