What is Single Page Application and its uses?
Single Page Applications (SPAs) are a wonderful tool for making engaging and unique experiences for website users. SPAs helps 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 a content.
Some examples where SPA in use are Gmail, Google Maps, AirBNB, Netflix, etc.
The core principle of an SPA is that it is a single page where a lot of information remains the same and only a few pieces gets 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.
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 supports SPA and allows authoring through SPA Editor.
AEM SPA Editor Steps
Below given sequence of activities involved in AEM SPA websites.
1. SPA Editor loads.
2. SPA is loaded in a separated 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.
We are coming up with more blogs/ videos on working with SPAs now.
Read More:
SPA Vs PWA - Single Page Application Vs Progressive Web Apps
AEM Experience Fragments vs Content Fragments
Single Page Applications and AEM
What next?
Watch below video to understand basics of SPA.
Single Page Applications (SPAs) are a wonderful tool for making engaging and unique experiences for website users. SPAs helps 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 a content.
Some examples where SPA in use are Gmail, Google Maps, AirBNB, Netflix, etc.
The core principle of an SPA is that it is a single page where a lot of information remains the same and only a few pieces gets 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
 |
| Click on image to see it big |
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 supports SPA and allows authoring through SPA Editor.
AEM SPA Editor Steps
Below given sequence of activities involved in AEM SPA websites.
1. SPA Editor loads.
2. SPA is loaded in a separated 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.
We are coming up with more blogs/ videos on working with SPAs now.
Read More:
SPA Vs PWA - Single Page Application Vs Progressive Web Apps
AEM Experience Fragments vs Content Fragments
Single Page Applications and AEM
What next?
Watch below video to understand basics of SPA.
No comments:
Post a Comment