For a recent project, my team received requirements for in-line editing for a React application supporting multi-site, regionalization, and localization. Now, off the cuff, that may not sound too ground-breaking. As I mentioned, many implementations leverage SPA frameworks. However, in the majority of implementations, this is developed as a singular AEM component in which every author-able field is configured. The result of this setup is a large and confusing authoring experience, without a decent way to preview changes.
In a traditional AEM setup, there are several pages. Each page would have many components with an associated HTML template that can be populated with authored properties. In this scenario, the author would be able to edit fields in context and immediately see their changes reflected on the screen.
An Innovative Solution: Using React Applications in AEM
Fortunately, in the case of React, we can also compile a standard HTML fragment. In order to support any standard HTML components, we can compile them the same way as React-based externalized templates. This translated into AEM Authoring by having pages for each “view” where authors would create pages exactly as if they were out of the box. Using the externalized templates, we could identify the portions of the page which mapped into components and ensure the authoring UX was properly aligned. Given this, an author would not be able to tell which aspects of the page were React and which were out-of-the-box AEM components.
The Final Result
Do you have any implementation tips within AEM? We would love to hear about them!