Experience Fragment Use cases in AEM 6.4

An Experience Fragment is a set of content that grouped together forms an experience that should make sense on its own.

 

Experience Fragment :
- is a part of an experience.
- makes sense of its own.
- has one or multiple components.
- can be combined with other Experience Fragments.
- can be reused, reordered and resized across pages.
- can have different variations.
- is based on a template with its own structure.

Click on image to see it big

Below given a video series which gives a walk through of AEM 6.4 Experience Fragments

What is an Experience Fragment and its use cases
https://youtu.be/n19KjL_qm7Q

Create Experience Fragment in AEM 6.4 And authoring them
https://youtu.be/21hz7n-PWF8

Create Variations of Experience Fragment for web, Facebook, Pinterest and author them
https://youtu.be/KzF9ykHR0So

Deliver Experience Fragments on Webpage, or other cross channel applications like Facebook & Pinterest
https://youtu.be/Z22540FoADU

AEM 6.5? Heard about it?

Adobe Experience Manager has releaed AEM 6.5 as part of Adobe Summit 2019( April 2019). Hope you are aware of the news now. AEM 6.5 will be available for general public from April 8 2019.

Yes the fact is that AEM 6.5 was available for Solution partners for the product review till then.

How can I get AEM 6.5 for download?
You need to contact Adobe by registering their website.

When will I get it?
As of now Adobe has invited partners who are interested in testing out new features of AEM 6.5 So we need to wait for further communication.

What are all the new features of AEM 6.5?

Below given the further details about new features.

AEM 6.5 Site related new features

AEM 6.5 Specific new features in Assets section

New Features in AEM 6.5 Forms

Foundation updates in AEM 6.5 which a developer should be aware of

Cloud Manager for AEM 6.5 New features

AEM 6.5 New Features

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.

Modern AEM Component Implementation Patterns

AEM Core Components follow modern implementation patterns. There are two types of component patterns in AEM, General Component Pattern & Reusable Component Pattern

 1. General Component Patterns
 This set of patterns are recommended for any type of components(regardless whether the component is specific to a single project, or reused across multiple sites or projects).

 a. Configurable Components
 There are cases where we have a requirement of components which are having variation of similar elements. In such cases, it is recommended to have configurable components having dialogs with various options instead of creating multiple components.

 b. Separation of Concerns
 This patterns recommends the usage of separation of logic from markup.

 - HTL can be used for markup which is more secure.
 - SlingModels are the recommended option for Logic implementation 

2. Reusable Component Patterns
 These patterns are used for any kind of component, which are most suitable for components that are intended to be reused across multiple sites or projects(For eg. Core Components)

 a. Pre-Configurable Capabilities
 It is recommended to define the components/templates flexible as much as possible. Some examples could be using edit dialog (For Page authors), Design Dialog (For Template authors) and all these options are availabe under 'Policies' as part of editable templates.

 b. Proxy Component Pattern
 Here component inheritance is used as a proxy. Create second level components by referring the resourceSuperType property from core components.
Which offers more flexibility and avoid content refactoring if one site needs a different behavior for a component.

 c. Component Versioning
 Always introduce component versioning by adding a number in their resource type path, and in the fully qualified Java class names of their implementations, which will help keeping the components compatible over time. Useful when upgrade happens.

 d. Model Interfaces
 This pattern recommends the usage of  HTL's data-sly-use instruction to point to a Java interface, while the Sling Model implementation is also registering itself to the resource type of the component.

When there is a requirement to redefine the implementation of a Sling Model or  HTL markup of a component, this avoids complexity. Because they are loosely coupled.

Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4


Below video gives an overview of AEM Component Patterns

Proxy Components in AEM 6.4

What are proxy components?

Proxy Components are site-specific components which are inherited from core components, which define the desired component name and group to display for page authoring.

• Proxy Components refer to a Core Component as their super-type.
• Proxy Components follow the path  : /apps/my-site/components (Where core components path : core/wcm/components)

These site-specific components are called proxy components, for the reason they don't need to contain anything; they just serve mostly to define the version of a component to use for the site. Infact, when customizing the Core Components, these proxy components play an essential role for markup and logic customization.

[Click on image to see it big]

Advantages of creating Proxy Components

• Proxy components helps categorization of components in a reusable way.
• Better seggregation: It is a good practice to have 'sling:resourceType' property pointing to site-specific components, instead of pointing to components that are shared by multiple sites.
• This provide more flexibility and avoid content refactoring if one site needs a different behavior for a component.
• Customization can then be achieved on the site-specific component and won't affect the other sites.
• Proxy components can be entirely empty if they fully inherit the functionality, or they can redefine some aspects of the component.

 Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4

See below video to understand more about Proxy Components.