AEM Experience Fragments vs Content Fragments

AEM Supports both Experience Fragments & Content Fragments.

What is a fragment w.r.t CMS?

A Fragment is an editable item from a common location, which can be reused on multiple pages, whenever required.

AEM Experience Fragments vs Content Fragments

Both Content Fragments & Experience Fragments gives the headless capability to AEM.

“Headless capability is one of the trending feature in any CMS”

Click on image to see it big

Content Fragment: They provide content in JSON format. Need to work on Content Fragments to make it a complete web experience.

Experience Fragment : Experience Fragments gets served directly to a website/ channel.

Read the difference between CF & EF

Click on image to see it big & clear

Read More:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM

Video showcases difference between Content Fragment & Experience Fragment in detail:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

While working with AEM, we should know about all relevant technologies in the market. SPA and PWA are such ones. AEM already supports SPA OOTB. Let us understand about them more.

SPA:

SPA are the applications having single page and the content gets updated within the page dynamically based on user interaction. Commonly used technologies to develop SPAs are AngularJS, Ember.js, Knockout.js, Meteor.js, ExtJS, Vue.js and React .

Eg: Gmail

SPA Features:
1. Responsive
2. Fast and efficient.
3. Not served through app store.
4. No extra queries to the server to download pages
5. User friendly.


PWA:
This is an application behave like a native application and developed using modern web technologies. This application supports offline features(using service worker & Web App Manifest) when no internet connection and are extremely fast & engaging.

PWA is an idea proposed by Google developers.

What is a Service Worker?
They are scripts that stand between your web application and your network

What is a Web App Manifest?

Web App Manifest is a JSON file with meta-information about the site.

Angular, React , Vue


PWA Features:

1. Responsive

2. Push Notification.

3. Offline Support.

4. Fast and efficient.

5. Not served through app store.

6. relatively cheaper than developing native apps

7. Does not require installation


Conclusion

• An SPA can be a PWA, but a PWA does not have to be a SPA.

Progressive Web Apps are the next level of browser based applications, offer a rich user experience that parallels what users know and expect from native apps and combine that with the benefits that browser based applications provide.

• Progressive Web Apps are not Single Page Apps

- PWA's Register a Service Worker with a Fetch Event Handler and Minimal Offline Support
- PWA's Have a Valid Web Manifest File with a Minimal Set of Icons
- PWA's Served using HTTPS (Secure)

Read More:

SPA Vs PWA - Single Page Application Vs Progressive Web Apps

AEM Experience Fragments vs Content Fragments

Single Page Applications and AEM

Watch below video to understand more on SPA Vs PWA

Single Page Applications and AEM

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.

• 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.