Single Page Applications and AEM

What is Single Page Applications - SPA?

Single Page applications are pages which dynamically update its content using AJAX calls to create a fluid & responsive experience.

In traditional applications, each request reloads/renders the HTML; but in SPA all interactions happens through AJAX calls. The return data is in JSON format. Previous versions of AEM had a miss on the SPA but with upcoming releases AEM SPA Editor provides a wonderful solution for supporting SPAs within AEM.

Single Page Applications - Features

• This avoids page reloading.
• Reusable Content.
• Majority of the work happens in client side.
• Good separation between content and UI
• Provides interactive experience
• RESTFul JSON

SPA(Single Page Applications) Basics

Below image gives an overview on the Single Page Applications in general.
As mentioned, only the first request is responded with a complete HTML. Further requests are made in AJAX way to the server and response in provided in JSON format.

SPA with AEM.
Latest AEM releases are enabling users to develop Single Page Applications using AEM. AEM SPA Editor allows user to author a page with Content Fragments in addition to other normal components like title, footer, images etc and AEM Sling models generate the Page equivalent JSON. This RESTFul JSON can be made available for other SPA frameworks like Angular React etc.

 In upcoming posts, I will explain, how to create SPA in AEM.


Video version of the post is available below.

 

AEM 6.4 related posts:
Create Content Fragments : Step By Step Tutorial
Content Fragment out put as JSON

Quality, Security, Performance Checks in Adobe Cloud Manager

Brief Overview:
As we all know, Adobe Cloud Manager(ACM) is part of the Adobe Managed Cloud Services. Using Adobe Cloud Manager(ACM) organizations can manage their AEM application in cloud themselves.
Read more: Why you should think of using Adobe Cloud Manager for AEM Projects?

There are 3 types of Quality checks provided by ACM CI/CD process.

• Code Quality
• Performance Testing
• Security Testing

Below given Security & Performance Testing criteria's
1. Security checks

Critical:

Critical security is based on 13 AEM Security health checks.

• AuthorizableNodeName Implementation does not expose authorizable ID in the node name.path
• Dispatcher filtering request validation
• The Adobe Granite HTML library manager is configured appropriately
• Default password must be changed
• Deserialization firewall Attach API readiness is in an acceptable state
• Deserialization firewall is Functional
• Deserialization firewall is Loaded
• Sling default GET servlet is protected from DOS attacks
• The Sling Java Script Handler is configured appropriately
• The Sling JSP Script Handler is configured appropriately
• The Sling referrer filter is configured in order to prevent CSRF Attacks
• Correct SSL configuration
• No Obviously insecure user profile polices found

Important - 6 check points

• CRXDE Support bundle is disabled
• Sling DavEx bundle and servlet are disabled
• Sample content is not installed
• Both the WCM Request Filter and the WCM Debug Filter are disabled
• The web server is configured to prevent clickjacking
• Sling WebDAV bundle and servlet are configured appropriately

Information

• Replication is not using the admin user

2. Performance Tests are based on

Critical

• Error rate is less than 2%
• Total CPU utilization is less than 80%
• Disk I/O wait time s less than 50%

Important

• 95 % response time er page is not longer than 3s
• Peak response time is not longer than 18s
• Page views per minute is greater than or equal to 200
• Disk bandwidth utilization is less than 90%
• Network bandwidth utilization is less than 90%

Information

• Overall requests per minute is less than 6000

3. Code Quality checks
The ACM build does code inspection based on SonarQuebe, which includes around 110 rules like standard Sonar Java rules,FindBugs rules, Cognifide AEM Rules, Adobe-created Rules.

Read More:
Why you should think of using Adobe Cloud Manager for AEM Projects? 

Why you should think of using Adobe Cloud Manager for AEM Projects?

Brief Overview:
As we all know, Adobe Cloud Manager(ACM) is part of the Adobe Managed Cloud Services. Using Adobe Cloud Manager(ACM) organizations can manage their AEM application in cloud themselves.

-It includes a continuous integration and continuous delivery.
-Code Inspection, performance testing and security validation.
-Automatic, scheduled or manual deployment.

ACM documentation can be found here.

Can we move existing projects in to ACM?
Yes. We can move any existing AEM projects into ACM with recommended option of upgrading AEM version to the latest.

How safe if Adobe cloud service?
Below given the security measures in Adobe Cloud Manager in detail.

Code push to Cloud Manager is encrypted in transit. Cloud Manager build binaries are also encrypted in transit and when stored.
Each customer gets their own Git Repository and code is secure and not shared with any other Organizations.
All the code push happens securely into the Git Repository over HTTPS protocol.
Any service with third party cloud providers are always secured.
ACM(Adobe Cloud Manager) provides Role Based Permissions, which ensure the user action on application is defined within limits, which means developer will not be able to delete the application from cloud, only the authorized product owner or person will have critical permissions.

Quality checks
There are 3 types of check provided by ACM CI/CD process.

• Code Quality
• Performance Testing
• Security Testing

All critical issues reported by system must be fixed.

Technical details of ACM build environment

• ACM uses below build environment for managing CI/CD process
• Linux based container
• Oracle Java version 8
• Maven version 3.3.9
• Adobe maven repository(repo.adobe.com) included default

Additional system packages include,
Imagemagick, Graphicsmagick, bzip2, unzip etc.

Types of build pipe line configuration

3 Ways we can configure the CI/CD pipeline process on stage.

1. Manual
2. On Git Changes
3. Recurring schedule

For the production deployment, system provides options as below

1. GoLive approval,
2. CSE oversight
3. Scheduled

Code quality in ACM pipeline

The ACM build does code inspection based on SonarQuebe, which includes around 110 rules like standard Sonar Java rules,FindBugs rules, Cognifide AEM Rules, Adobe-created Rules

Read More: 
Quality, Security, Performance Checks in Adobe Cloud Manager

AEM 6.4 Experience Fragment Basics

Experience Fragment Basics in AEM 6.4

AEM 6.4 provides headless(Content as a  service) CMS capabilities through  Content Fragments and Experience Fragments.

What is an experience fragment?

The headless capability to create experiences can be used to deliver content to third party system/touchpoint through various methods. AEM provides experience  fragments which has content and layout, and third party applications then deliver to the end user. Experience Fragments helps reuse of content.

An 'Experience Fragment' is a collection of components with its own content and layout.

• Each Experience Fragment is based on a template which gives a structure.
• Each experience fragment has one/many components with its own layout.
• Each experience itself makes sense.
• Created with intention of reuse, re ordered, resized.
• Experience Fragments works on Caas model, with each fragment can be created with multiple variations.

Scenarios when an AEM Experience Fragment to be used?

There are times when we need to replicate same type of page section in other pages. 'Experience Fragments' can help us saving time in this case. Also cases like AEM is used as headless CMS, where AEM to be just used as content storage, not for delivery. In this case AEM Experience Fragment will be available for a third party rendering system for consuming.

Cases when we need multiple version of content, Experience Fragments are a good option.

Additional notes:

Experience Fragments allow to manage sections of experiences that can easily be reused and distributed. They are template based and allow live copy relationship. At present AEM 6.3 supports Experience fragments to html5 web templates, Pinterest and Facebook templates. Custom templates can be created if required.

Related posts:
Create Content Fragments : Step By Step Tutorial
Content Fragment out put as JSON

Create Content Service End point in AEM 6.4

Content Services & its use

Content Services enable the creation of Page-based HTTP end-points. This end points helps to render the content to a normalized JSON format.

How to configure & access the content services in AEM 6.4?
We need to configure content service end points when ever we need to export a Content Fragment data to external applications(Like Single Page Application or mobile app etc). Let us see how it can be done. The end point pages are not to be accessed as HTML pages, they just export the content in JSON Format.

We have created multi variation Content Fragments following our previous blog Create Content Fragments : Step By Step Tutorial.

Say we have master, mobile , tab variations as shown below.
[Click om images to see it big]

[Mobile & Tab Content Fragment]

Go to Sites> We-retail, click on 'Create' > 'Page'
Enter details as below and click on create. A new page will be created. (/content/we-retail/content-service-for-sample-fragment.html)

Open the page and author the content fragment in this page(Steps are explained in my previous post).

As you see, I have authored master, variation1(Mobile), Variation 2 (Tab) in the same page.

Now go to the page url and append '.model.json' to invoke JSON exporter. (In my case: content-service-for-sample-fragment.model.json). You can see the JSON with all variations included.

[JSON portion of Content Fragment for Mobile]

[JSON format for tablet]

From this JSON, we can iterate over the content fragments section and by checking for the variation, we can render items across various channels.

Remember I have authored the Content Fragment utilizing an existing we-retail template. So the JSON will have all related items like header , footer etc. In real projects, create a stand alone template and then create a page from this.

Related posts:
Create Content Fragments : Step By Step Tutorial
Content Fragment out put as JSON 

 

Maintenance Releases Deployment Best Practices in AEM

Adobe releases maintenance fixes in duration of some months based on the issues raised by licensed vendors or internal clients etc. Previously it was known as hot fixes, but now it has changed to 'Cumulative Fix pack' & related 'Service Packs'.

Precautions & Best practices: Ensure you always follow below step;

1. Test in Lower environments first and then move to prod for any maintenance pack deployments.
2. Ensure you have done a proper back-up of content, DAM and code.
3. Validate the new package before install

 

Curl Commands Vs Package Manager?
CURL is a command line version of package manager. Package manager provides the UI to deploy packages.

We recommend using CURL commands if the package size is big(They execute faster through CURL)

Analyzing the Activity Log on package installation:

We can see a BOLD highlighted letters while installing a package through package manager. Below are the notations.

A : Added new content/code to specified path.
D : Deleted content/code.
U : Updated
- : No action taken (remains as it is )
E : Error on path.

Sometimes admin face issues with new packages like unsatisfied package imports or Overlay issues.

How to validate a new package for issues before install?
On package right side, click on More> Validate and select the check boxes and click on 'validate'. The validation and and any issues which exits can be verified through 'Activity Log'. Contact Adobe if any issues are observed.

Once above precautions are followed(Including a lower environment successful deployment), deploy the maintenance pack in prod, then restart  AEM. Clear any cache, test and validate the package version then verify the project related checkpoints at PROD. This steps helps an admin to install a cumulative pack smoothly.

Read Latest AEM 6.4 Topics
Create Content Fragments : Step By Step Tutorial 
Content Fragment Output as JSON in AEM 6.4
 

AEM 6.4 Content Fragment output as JSON

AEM Content Fragments can be accessed through JSON file URL's.

Create Content Fragments : Step By Step Tutorial

Why we need JSON Formats?
Content Fragments are not just for web pages. A Content Fragment is made available to external applications through JSON format delivery methods. These applications could be,

• Single Page Applications
• Native Mobile Applications
• other channels and touch-points external to AEM

[Click on image to see it big]

AEM 6.4 core components having the capability to export its data to JSON format. This structured content can then be used to deliver to cross channels other than AEM pages. 

Difference between Content Fragment & Experience Fragment
Major difference between Content Fragment & Experience Fragment is that Content Fragment is pure content, without design and layout, but Experience Fragments are fully laid out content - a fragment/portion of a web page.

There are 2 types of content fragments

Simple fragments : Which does not have any predefined structure(only text, and images). Simple Fragment template is the supporting element for this.

Fragments that contain structured content: This is based on a content fragment model. This model will give defined structure.

How do we generate JSON format of a Content Fragment?

AEM 6.4 version also supports JSON Exporter with Content Fragment Core Components. Using this AEM JSON exporter, we can deliver the contents of an AEM page in JSON data model format. This can then be consumed by any third party applications other than AEM.

JSON Exporter is supported by suffixing a url with '.model.json'

Access JSON Format of a Content Fragment

Say we have created 'My Simple Fragment(my-simple-fragment)' Content Fragment,

We can see the complete content using url,
http://localhost:4502/content/dam/my-simple-fragment/_jcr_content/model.json


As you see the output

    {
        "jcr:primaryType": "nt:unstructured",
        "jcr:title": "Simple Fragment",
        "version": 2,
        "jcr:description": "A simple fragment, containing one single element and no predefined variations",
        "precreateElements": true
    }
   
Accessing the JSON output of a Content Fragment authored on a page.

Step1: Access the page JSON

Now I have authored my previously created 'My Simple Fragment(my-simple-fragment)' in We-retail site.(/content/we-retail/language-masters/en/men.html)

Its JSON output can be access through url,
http://localhost:4502/content/we-retail/language-masters/en/men.model.json

Step2: Access the Content Fragment JSON
We can see the content fragment in this page as shown.

To get the authored 'Content Fragment JSON', access the '.model.json' url of the content fragment as below,

http://localhost:4502/content/we-retail/language-masters/en/men/jcr:content/root/responsivegrid/contentfragment_1655772226.model.json

As you see the JSON will have all elements including variations created/authored.

Create Content Fragments : Step By Step Tutorial