Many websites today require data from more than just the CMS. But it can lead to poor performance if you have to query multiple systems for every page view. Following the pattern of asynchronous processing, you can move the queries out of the way when the user fetches the page, and instead prepare the content in an asynchronous process.
The focus on federated content and composable architecture in general, also increases the number of systems you need in your system landscape in order to support your business requirements, instead of one big platform to serve all functionality.
But how do you ensure that your frontend application's performance and complexity are not increased when you need to call multiple systems with different API's and performance numbers? One way to ensure this, could be using an orchestration tool for asynchronous processing, so that you have one common API for all your data and guaranteed performance.
How to implement with Enterspeed
Using Enterspeed, you can combine data from multiple sources into one single pre-generated view that you can fetch from a unified delivery API with great performance.
First, you need to send your data to Enterspeed for the different source systems you have, using one of our pre-built integrations or our Ingest API. The following code snippet is a JavaScript example using our Ingest REST API, but you can also use our .NET Enterspeed Source SDK.
1// Ingest example in JavaScript using the Enterspeed Ingest REST API
2
3const ingestToEnterspeed = async (sourceEntity) => {
4 const url = `https://api.enterspeed.com/ingest/v2/${sourceEntity.id}`;
5 const response = await fetch(new Request(url), {
6 method: "post",
7 headers: {
8 "Content-Type": "application/json; charset=UTF-8",
9 "X-Api-Key": "[EnterspeedApiKey]",
10 },
11 body: JSON.stringify(sourceEntity)
12 });
13 return response.json();
14};
15
16const mySourceEntity = {
17 id: 12,
18 url: 'https://mysite.com',
19 type: 'contentPage',
20 properties: { title: 'My headline' }
21};
22
23ingestToEnterspeed(mySourceEntity)
24 .then((data) => {
25 console.log(data);
26 });Then you use Enterspeed's schemas to combine the data from different sources. In the two schemas below, we have a schema for a landing page coming from a CMS, referencing a product schema with products coming from a commerce system.
The part that clues the CMS page and the commerce products together, is the context.reference() part in the properties function in the landing page schema.
1// landingPage schema
2
3/** @type {Enterspeed.FullSchema} */
4export default {
5 triggers: function(context) {
6 context.triggers('cms', ["landingPage"])
7 },
8 routes: function(sourceEntity, context) {
9 context.url(sourceEntity.url)
10 },
11 properties: function({properties: p}, context) {
12 return {
13 headline: p.headline,
14 text: p.text,
15 products: context
16 .reference('productDemo')
17 .byOriginIds(p.productIds)
18 .sourceGroup('commerce')
19 }
20 }
21}1// product schema
2
3/** @type {Enterspeed.FullSchema} */
4export default {
5 triggers: function(context) {
6 context.triggers('commerce', ["product"])
7 },
8 properties: function(sourceEntity, context) {
9 return {
10 name: sourceEntity.properties.name,
11 description: sourceEntity.properties.description,
12 price: sourceEntity.properties.price
13 }
14 }
15}The last part is to fetch the data in the frontend application, and you can do that using the Enterspeed Delivery API. Here's a JavaScript example of how to call it.
1// JavaScript example of calling the Enterspeed Delivery REST API to fetch views by url
2
3const call = async (query) => {
4 const url = `https://delivery.enterspeed.com/v2?${query}`;
5 const response = await fetch(new Request(url), {
6 headers: {
7 "Content-Type": "application/json",
8 "X-Api-Key": process.env.ENTERSPEED_PRODUCTION_ENVIRONMENT_API_KEY,
9 },
10 });
11 return response.json();
12};
13
14export const getByUrl = async (url) => {
15 const response = await call(`url=${url}`);
16
17 return {
18 ...response.route,
19 ...response.meta,
20 };
21};And if we look at the data response, we get the headline and text from the CMS and the products from the commerce system in one fast and efficient API call.
1/* View data returned by the Delivery API */
2
3{
4 "headline": "Checkout our cool summer products",
5 "text": "One this page you can find a list of our cool summer products...",
6 "products": [
7 {
8 "name": "Premium Quality cap",
9 "description": "Premium Quality cap with adjustable size.",
10 "price": 49.99
11 },
12 {
13 "name": "Sneakers 49",
14 "description": "Durable and nice looking sneakers.",
15 "price": 99.49
16 }
17 ]
18}