AEM With Progressive Web Apps - Demonstrating the ability of Content Fragments in AEM - Display AEM Content to Third Party Applications

AEM - Getting more headless

We all know that AEM is the leader in CMS-world ; day by day new features are getting added as part of new version upgrades. Recently Adobe released AEM 6.5 version with lot more features.

From previous few AEM versions support head-less capability, which means AEM Content can be delivered to multi channels or third party applications.

AEM Provides headless capability through Content Fragments and Experience Fragments. 

In this post we will show a use case of , how to use content fragments with external applications

Click on image to see it big

In this tutorial we will see,

• How to create & Deploy a Progressive Web Application - PWA(Including 'what is PWA', 'how do we run a PWA')?
• Create Content Fragments in AEM.
• Integrate PWA & AEM and retrieve the AEM content from PWA.

Let us first understand what is PWA?

In my previous post I have given an overview of PWA

Progressive Web Application - PWA:
This is an application which behaves 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.
• A PWA is mainly dependent on Service Worker and Manifest files.

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.

PWA can be developed using technologies : 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

Follow below sections to continue with this tutorial to learn integrating AEM With Progressive Web Apps

>Step 1: Set-up PWA running environment
>Step 2: How to create & Deploy a Progressive Web Application
>Step 3: Create & Author Content Fragments in AEM
>Step 4: Integrate PWA & AEM and retrieve the AEM content from PWA.

Demo Videos:


AEM Content Fragments Demo Part 1: PWA With AEM 


AEM Content Fragments Demo Part 2: PWA Running Environment setup

AEM Content Fragments Demo Part 3: Create & Deploy a Progressive Web Application

AEM Content Fragments Demo Part 4: Create & Author Content Fragments

AEM Content Fragments Demo Part 5 : Integrate AEM with PWA

Steps to Create custom Content Fragment Templates in AEM 6.4

Hope you have gone through the basics of Content Fragments in AEM.
Create Content Fragments : Step By Step Tutorial

AEM 6.4 Content Fragment

[This tutorial works for versions AEM 6.2, AEM 6.3, AEM 6.4]

Generally AEM provides default content fragments template called 'Simple Fragment' [at location: /libs/settings/dam/cfm/templates]. But we may need to customize or create new templates based on our needs.

Here I will explain how we can create custom content fragment templates.

Where to create custom content fragment templates?

There are multiple places we can create custom content fragment templates.

• Config: When we work with folder specific templates, use this location.
• Apps: Usually general purpose templates are created here.

Content Fragment Templates Path

Let us create a template under /apps for general purpose use.

Steps

• Traverse to /apps/settings/dam inside CRXDE lite.
• Create a node of type cq:Page and name it 'cfm'
• Under the newly created cfm node, create another node of type cq:Page and name it 'templates'.
• Under templates node create a node of type cq:PageContent and name it 'jcr:content'.
• Under jcr:content create a new boolean property called 'mergeList' with value 'true', this step ensures our new template is available in addition to /lib content fragment templates for authoring.
• Now do 'Save All'.

Our crx looks like this now

Custom Content Fragment creation

We have the structure ready now, we will add properties for the template now by referring the /lib/ 'Simple Fragment' template.

• Traverse to /libs/settings/dam/cfm/templates and copy 'simple' node.
• Paste it on our structure under /apps/settings/dam/cfm/templates.
• Now do a 'Save All'.

We now have below structure in crx.

We have a template similar to 'Simple Fragment' now. Let us customize the template for our need.

We will create title, description as elements and 2 variations for desktop and mobile.

Let us start by renaming 'simple' node to 'custom'

• Select “jcr:content” under 'custom', Update the value of 'jcr:description' to 'A custom project specific fragment'.
• Update value of 'jcr:title' to 'Custom Fragment'
• Now rename 'main' under elements to 'title', update its 'jcr:title' to 'Title' and name to 'title'
• Next create a new element – description by copying the  main and renaming. Update the 'jcr:title' to 'Description' and name to 'description'.
• Now select node 'jcr:content' under node 'custom' and create a new node of type 'nt:unstructured' and name it 'variations'.
• Create a new node for 'desktop' of type nt:unstructured under variations; add properties 'jcr:title' 'Desktop' and name 'desktop'.
• Create a new node for 'mobile' of type nt:unstructured under variations; add properties 'jcr:title' 'Mobile' and name 'mobile'.
• Now click on 'Save All'.

A new custom template is created now, which is ready for authoring.


Authoring Custom Content Fragment

Now go to AEM Assets >Files , click on 'Create' from top right hand corner and select 'Content Fragment'.
Here you can see the 'Custom Fragment'

Custom Fragment AEM 6.4

Select the 'Custom Fragment' and click 'next'.

Enter the values for title, description and click 'Create' then click on 'Open'.

Here you can see that a new Content Fragment is available with 'title', 'description'.
Similarly we can see that variations for 'desktop' and mobile also available for authoring.

In my upcoming blog, I will give a walkthrough on using Content Fragment with Progressive Web Applications.

Please dont forget to subscribe the blog.

Read More:

https://aem-cq-tutorials.blogspot.com/2018/06/create-content-service-end-point-in-aem.html

https://aem-cq-tutorials.blogspot.com/2018/05/aem-64-content-fragment-output-as-json.html

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.