SPA in AEM 6.5

SPA in AEM 6.5

SPA is single page application.

Rendering is done using JavaScript and AJAX.

AEM SPA editor allows front end developers to create SPAs that can be integrated with AEM allowing authors to edit the contents as easily as other aem contents.

In a traditional, sequential webpage, only the data needed for the immediate page is loaded. This means that when the visitor moves to another page, the server is called for the additional resources. Additinoal calls might be necessary as the visitor interacts with elements on the page. These multiple calls can give a sense of lag or delay as the page has to catch up with the visitor's requests.

By rendering on the client side, page element react faster, and interactions with the page by the visitor are immediate. Any additional data that might be needed is called asynchronously to maximize the speed of the page.

React script is primarily responsible for retrieving the components and showing the pages.

AEM SPA editor leverages AEM Content services to deliver the entire content of the page as json model.

The front end developer creates the components and owns the page structures but relies on AEM for content structure of the site.

SPA Developing principles :

• Portability
• AEM drives the site structure
• Dynamic rendering
• Dynamic routing

Steps :

1. Make your js component modular
2. Use AEM page and paragraph system to put the components on screen
3. Create AEM component for each js component as AEM component defines dialog and json.
4. Component mapping module should be included in NPM. This helps in mapping front end components with AEM resource type
5. Following dependencies required in package.json
1. @adobe/cq-react-editable-components
2. @adobe/cq-spa-component-mapping
3. @adobe/cq-spa-page-model-manager
6. Application entry point page component to be defined
7. Create mappedComponents.js and add it in index.js. mappedComponents.js will have details of the all js components those map with AEM components.
8. In all SPA component, import MapTo from @adobe/dq-react-editable-components and add MapTo in the end of the component.
9. this.props.propertyname will give you the value of property configured in dialog.
10. Create appropriate AEM components with SlingModel (with json exporter). 

Tutorials :

You can find tutorials here.