AEM: What you see is what you get (and you get a lot!)

Publish date:

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 […]

In software development, the term “what you see is what you get” (or WYSIWYG) is 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 developerfriendly 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 VueThese are popular choices then used to implement the browser-based processingReact in particular, is attractive because it supports mobile device-specific capabilities such as notifications.   

The WYSIWYG nature of the AEM platform allows the developer to create a user interface using one of these Javascript frameworks but with a user interface that will mimic identically to a desktop or mobile application and other channels and devices.  

 

The Adobe Experience Manager (AEM) Tutorial 

One of the available Adobe training courses called ‘WKND Events for React and AEM SPA Editor’ provides a tutorial on how to develop a single-page application using the React and Angular Javascript frameworks. This provides a good example of how a single page application works and demonstrates how HTML pages are loaded only once but are still responsive to user actions that change the current state in the app. A change of state usually involves loading new data from the server-side instead of loading a new web page. This is how a single-page application provides a more fluid, uninterrupted experience. 

An AEM project consists of 5 areas:  

  1. * Core  
  2. ui.apps 
  3. ui.content 
  4. * Parent POM 
  5. 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 toolThis 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 aemclientlib-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 aemclientlib-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.  

<modules> 

    <module>core</module> 

    <!– add Framework App –> 

    <module>framework-app</module> 

     <module>ui.apps</module> 

    <module>ui.content</module> 

</modules> 

 

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:

  1.  authoring instance where “all the development” happens 
  2. 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 lot of options to be able to pick and choose what framework in which to develop and deployThat 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 clients needs and demands.  

Related Posts

CX

Tech-savvy policyholders require a blend of digital and emotional capabilities from insurers

Kiran Boosam
Date icon September 1, 2020

Insurance customers surveyed as part of the World Insurance Report 2020 said they felt...

COVID19

Capgemini partners with Gap Inc. and Salesforce to help employees be fashionably safe at work

Richard Lyons
Date icon July 7, 2020

“Capgemini is excited to partner with Gap Inc. and Salesforce on this innovative and...

CX

It’s time to expand your Ecommerce capabilities FAST

Martijn van Deel
Date icon May 27, 2020

More than ever, the time to start your Ecommerce platform is now. When physical stores are...