Single Page Applications (SPAs) are a wonderful tool for making engaging and unique experiences for website users. SPAs help to build a fluid, scalable experience. SPA can be used within AEM to give both developers and marketers the level of control they need while authoring content.
Some examples where SPA in use are Gmail, Google Maps, AirBNB, Netflix, etc.
The core principle of a SPA is that it is a single page where a lot of information remains the same and only a few pieces get updated at a time. This is different from a traditional HTML page load where the server re-renders a full page with every request.
SPAs provide great ease to developers because of the separation of back-end services and front-end display without disturbing critical back-end functionality. Developers have the option to work in the language they prefer.
· Common SPA frameworks are Angular, React, Ember and Vue are JavaScript
Advantages of SPA's
• Behaves like a native application
• Provides rich user experiences
• Good separation of concerns
• API-based
• Decouples content from presentation
• Can provide live preview & editing
• Supports a hybrid setup
• Personalization on the server-side
AEM & SPA
The latest versions of AEM support SPA and allows authoring through SPA Editor.
AEM SPA Editor Steps
Below given a sequence of activities involved in AEM SPA websites.
1. SPA Editor loads.
2. SPA is loaded in a separate 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.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.