It is important to consider the implications regarding the workflow content authors will use when publishing content to a website via
- Headless
- Remote SPA
Headless
API driven solution.
- Author does not require a WYSIWYG experience when editing and updating a particular component
- Re-usable, presentation-agnostic content, composed of structured data elements (text, dates, references, etc.
- Implemented as a DAM asset
- Used via the GraphQL Assets APIs for 3rd party consumption e.g. Trader
Content fragments drive the data model. Usually managed via AEM assets.
Remote SPA
A totally seperate website based on Angular/React/NextJS. Your site does not have to be a “true” remote spa, as long as it is leveraging the modern javascript based frameworks.
IFRAME in AEM author instance enables the wysiwyg expereince.
Usually managed via AEM Sites
Developer activates areas of a website for content authors to use AEM components
This is the high level architecture to allow AEM to integrate with an existing angular site.
Remote SPA Iframe Model
2. SPA is loaded in a separated frame.
3. SPA requests JSON content and renders components client-side.
4. SPA Editor detects rendered components and generates overlays.
5. Author clicks overlay, displaying the component’s edit toolbar.
6. SPA Editor persists edits with a POST request to the server.
7. SPA Editor requests updated JSON to the SPA Editor, which is sent to the SPA with a DOM Event.
8. SPA re-renders the concerned component, updating its DOM.
Advantages
The content author will not experience any difference when editing or creating content.
Enables in context editing of content & configuring components.
Enables in context layout management of components.
Provides the content authors with same user experience both in author and publish mode.
It supports React and Angular framework which are widely used to create SPAs.
Much improved seamless user experience.
Improved application performance, as all content is retrieved once in a single page load with additional resources loaded asynchronously as needed based on user interaction with in the page.
Clear separation of front end and back end development which reduces the integration dependency on each other.
Gives the front-end developers the flexibility to use their choice of JavaScript frameworks and build tools to create highly interactive applications.
By being faster, fluid, and more like a native application, a SPA becomes a very attractive experience not only for the visitor of the webpage, but also for marketers and developers due to the nature of how SPAs work.
Romiko Derbynew 