ClientContext to ContextHub migration guide

[sandeepk7656774]

Hi All,

ClientContext is being deprecated for ContexHub. If you have experience of using both, please see if you can help with following information

1. Comparison between the two - We don't see anything in official documentation.
2. Migration/Upgrade information from ClientContext to ContextHub - Current application is using clientcontext for personalization (Campaigns, Teasers, Segments).  Is there a migration guide which can help application use ContextHub (Similar to the way upgrade for AEM versions has).

Any additional information, experiences around clientcontext, contexthub would also be helpful.

Thank you

Sandeep

[kautuk_sahni]

Replying to First part of the question:

1. Caparison between 2:- AEM 6.1 : ClientContext Vs Context hub

Context hub is a replacement for client context it is better and more lightweight or ClientContext is basically the old version, ContextHub its replacement.

Client context had performance problems, it forces integration to wait on stores.init.js, ajax call, which slows stuff down a lot (esp site catalyst page-view calls). Context hub is a lot faster and fixes that.

Engineering team is avoiding changes to client context. Future is context hub.

In 6.1, the feature set of ClientContext was still higher than ContextHub, which itself relied on some ClientContext core functionalities to work.

With 6.2, we should have closed the gap, and we're currently working with Product Management to get the ClientContext deprecated in favor of the ContextHub.

I guess it would be a good idea to highlight some of the major architectural changes to clarify why ContextHub soon replaces ClientContextt:

ContextHub decouples the Kernel from the UI leading to a much lower footprint on publish

ContextHub Stores can deal with complex hierarchical objects while ClientContext was limited to key-value pairs

The eventing model of ContextHub is a lot more sophisticated including the fact that eventing happens as soon as stores are available and not just after „all“ stores have been loaded

Loading behavior can be controlled on a fine grained level (sequence of loading & synchronous as well as asynchronous store loading)

All in all ContextHub is capable of every aspect ClientContext could deal with and is optimized in the most significant areas of clientcontext that turned out not to work perfect due to the architecture.

~kautuk

[kautuk_sahni]

tc82 jainatish bsloki Opkar Gill any help here?

~kautuk

[tc82]

I have created the document , will upload it here for the migration guide.

Also let me know you need the package.

[sandeepk7656774]

Thank you kautuksahni and tc82. The package and document would be helpful.

[sandeepk7656774]

tc82  - Gentle reminder, if you could share the document, package you were talking about.

[tc82]

ContextHub Implementation

· Table of contents

• Introduction to ContextHub
• Files to be changes to replace CleintContext with ContextHub

---

Introduction to ContextHub:

• Name  the folder as: contexthub

• Create a folder undern contexthub called modules

• Create a folder undern modules called commerce

• Create a folder undern commerce called clientlib

• Create a file under clientlib named as .content.xml

• Code for the .content.xml

  style="padding-left:45px"

• Add the following line inside the css.txt
  renderer.commerce.css

• Create a file under clientlib named as js.txt

• Add the following line inside the js.txt
  renderer.commerce.js

• Create a file under clientlib named as  renderer.commerce.css

• Add the following line inside the renderer.commerce.css

  style="padding-left:45px"

• Create a folder under above path named: stores

• Create a folder under stores named: commerce

• Create a folder under commerce named: clientlib

• Create a file under clientlib called .content.xml

• Add the following code in the .content.xml

  style="padding-left:45px"

• Add the following code:
  store.commerce.js 

• Create a new file under clientlib called store.commerce.js
• Add the followig code:

  style="padding-left:45px"

• Create a folder named customclientcontextlibs

• Create a file .content.xml under customclientcontextlibs folder.
  Add the following code:

  style="padding-left:45px"

function callingSatellitePageBottom(){
if (window.ContextHub) {
ContextHub.eventing.on(ContextHub.Constants.EVENT_INITIALIZED + ":XXXX", function(event, data) {
_satellite.pageBottom();
});
}
}

1. Including the CSS and ContextHUb:

<cq:includeClientLib css="cardinalhealth.oe.customclientcontextlibs" />

<cq:include path="contexthub" resourceType="granite/contexthub/components/contexthub"></cq:include>

1. Get the COntextHUb Data:

//ContextHub tree details command:
var data = ContextHub.getStore('XXXX').getTree();

I have attached the zip of files modified from my local.

Note: XXXX is the store name

am not able to attache the package.

[smacdonald2008]

See these new Context Hub articles:

1. Scott's Digital Community: Using the Adobe Experience Manager ContextHub to work with Personal Exper... (Personalization)

2. Scott's Digital Community: Using the ContextHub with the Experience Manager Toy Store site (Geo-data)