Simultaneous editing on AEM as a Cloud Service
This years Rockstars Event featured three amazing new community driven innovations to Adobe Experience Manager. In this post we will take a closer look to the winning solution by Matthias Wermund.
Multiple editors working on the same page
Matthias and his team made it possible that multiple editors can work on the same page at the same time without the need of checking out individual pages, makeing edits and then checking it back in. This enables editors to work freely without worrying about others if they are currently working on the same page or destroying someone else's work.
What features does it bring?
By enabling editors to simultaneously work on the same page they can be sure that the will always work on the current page content and all content is always up to date. Even style changes will be displayed correctly and accordingly making it a breeze to quickly call a co worker to help out or teach how to edit a specific component.
How does it work?
To better understand how the extension works lets highlight what the extension actually touches to make this work.
The extension does not require any code changes for integration and runs on AEM as a Cloud Service as well as on AEM 6.5. No out of the box code is overlayed and everthing is handled by Javascript Events and APIs.
The extension makes heavy use of client-side events when it comes to triggering user interactions or server-side events for updating the individual editor UIs.
For this to work different connection patterns are used. There is an ajax call that sends user interactions directly to the server. These events are then pushed from the server directly to the browser. For this the Streaming Server-Sent Events are used. Server-Sent Events allow a unidirectional connection that is kept open (thus streaming) from the server to the client via an http-get-request. This API is supported by all modern browser (Chrome, Firefox, Edge, Safari)
A component lease flow in detail:
- Editor 1 edits a component
- The AEM-Author Environment will distribute that an lease event has happend to all author environments in the cluster
- All AEM Author environments will then send a push-event to the connected clients via the Server-Sent-API to indicate that the component is currently edited by Editor 1
- A script running in the Browser of Editor 2 and 3 will then lock the component and indicate that Editor 1 is currently working on it
When Editor 1 now release the component an JCR Event 'Update' is triggered on the author environments that will send out an event to the Editors 2 and 3 that the component has been modified. This will trigger a fetch against the Author-Environments and replace the DOM Nodes with the newly fetched ones. All without a page refresh.
Try it on your own project
If you are interested in having this in your own project it is really easy to implement.
The whole project is open sourced and available on Matthias' Github:
https://github.com/mwmd/aem-author-collab
For me adding the package as a maven dependency did not work as the Nexus provided does not feature https resulting in Maven Version >3.6 to not allow a connection. There is a way to circumvent this by setting the blocked-value to false but for me it was easier to simply clone the repo and install it locally via
mvn clean install -PautoInstallPackage -Padobe-public
You can hower build this version and include the .all-package in your repository to deploy it to AEM as a Cloud Service.
Please have a look a Matthias whole presentation from the Adobe Experience Manager Rockstars Event
Photo by Mitchell Luo on Unsplash