In software development, the term “what you see is what you get” (or WYSIWYG) is a common description of any user interface software that allows the content to be edited and displayed in the same way that it appears in the finished product.
In e-commerce, Adobe Experience Manager (AEM) is an example of a WYSIWYG application because it contains some pretty cool features within a developer–friendly environment where you can design what the user will see on your e-commerce web sites pages.
Adobe Experience Manager is often used as part of a “headless” content management system. As opposed to traditional platform-based models, a “headless” e-commerce system separates the presentation to the client from the back-end systems used for functions such as order management, inventory, etc. Because shoppers increasingly use other devices for shopping, one potential advantage of a “headless” e-commerce system is that newer devices (e.g. Google Home, Amazon Alexa) are easier to support and track the customer across multiple touchpoints beyond just the desktop or mobile browser.
Using AEM’s applications editor, the developer can create what is called a single page application (SPA) which is a modern way to develop web pages. A SPA is typically more responsive to the user’s input and provides a more fluid user interface because there are fewer page loads and much of the processing is done within the browser.
In an ever-changing and modern web market, the demand to use the latest and greatest or most popular methodologies and tools creates a demand for an application to be able to utilize frameworks for the browser-based processing such as Angular, React, and Vue. These are popular choices then used to implement the browser-based processing. React in particular, is attractive because it supports mobile device-specific capabilities such as notifications.
The Adobe Experience Manager (AEM) Tutorial
An AEM project consists of 5 areas:
- * Core
- * ui.apps
- * ui.content
- * Parent POM
- * app
Start by creating the project files using these commands:
- $ cd <scr-dir>/aem-project/<framework>-app
- $ npm install
- $ npm start
Helpfully, Adobe provides an AEM SPA project starter kit using the maven build tool. This kit comes ready to build and generate apps using the React and Angular frameworks. It does require Java 8 or higher and Maven 3.5 or higher.
Integration works by having the compiled SPA copied into the ui.apps modules as an AEM client-side library. This is done through aem–clientlib-generator node module, which can be installed with this command:
- $ npm install aem-clientlib-generator –save-dev
Creating a clientlib.config.js file allows the aem–clientlib-generator to create a client library in the ui.apps modules. This compiles all css and js files into the AEM client library. The clientlib directive can be added to be a part of the npm build script.
Next, configure the root Maven POM (Project Object Model) file to add the framework app so that the app can be triggered and build with the root POM.
<!– add Framework App –>
Other includes are frontend-maven-plugin, node and npm versions. In the app path add in its own POM file and configuration and run maven clean install:
$ mvn clean install
Finally integrate the application on the AEM page by going into ui.apps module and adding the custom headerlib and footer for the framework using the source provided in the AEM training.
This will load in the tutorial site and after it has been deployed using Maven, you can see your site in the browser at by executing which will execute the app listening on http://localhost:4502/.
The unique thing about working in React with AEM is that you can configure so changes can be made locally and then deploy on the AEM page. With AEM there are two instances:
- authoring instance where “all the development” happens
- publish instance where the live sites exist.
To add to it, React has its own route that can be mapped to AEM.
Going through the Adobe WKND Events SPA tutorial, you can see there are a lot of options to be able to pick and choose what framework in which to develop and deploy. That choice is completely up to the client. This is what makes AEM so powerful. You have the option to create something that can be tailored to the client’s needs and demands.