Karsten Reuter

Combining Progressive Web Apps with Experience Composition

January 14, 2019 / Karsten Reuter / eCommerce

Imagine your task is this: implement a best-in-class eCommerce experience that is mobile-first, features stellar performance, and combines eCommerce functionality with inspirational content in a way that’s also easy to use – enabling your marketing team to manage dozens (if not hundreds) of campaigns and promotions internationally at the same time.

The Mobify and CoreMedia team recently completed an exercise to do just that, by combining Mobify’s Frontend as a Service (FaaS) – designed to help teams craft amazing shopping experiences using progressive web applications – and CoreMedia’s Content as a Service (CaaS).

The Exercise: Combining Mobify & CoreMedia

We used the out-of-the-box configuration for this exercise, which made it easy for the Mobify platform to access the navigation structure, page layouts, and embedded content items like articles or collections, along with all required data.

Under the hood, Mobify uses React.js, an open source library, to compose user interfaces out of components. Leveraging that, we created a <CoreMedia> React component with three responsibilities:

  1. Fetch data from CoreMedia’s CaaS
  2. Map the CaaS data to Mobify’s optimized React component library
  3. Render the React components to the page

The second responsibility is the most interesting. The <CoreMedia> React component iterates through the CaaS JSON response, mapping CaaS elements to other React components. Each element’s data is then mapped to the React component’s props.

This mapping allows marketing teams to effortlessly compose content in CoreMedia that will be rendered as part of Mobify’s progressive web app. And with Mobify’s optimized library of components that cover a wide variety of eCommerce use cases, it’s easy to get started.

Experience Composition

CoreMedia’s experience composition seamlessly integrates inspirational content created and managed within CoreMedia and product catalogues, and the eCommerce functionality provided by a platform like Salesforce Commerce Cloud.

The CoreMedia Studio makes it easy to mix and match content with products, assign them to a page, and select a suitable look and feel.

Once a page is ready, it can be submitted for approval, translated into multiple languages, and scheduled for publication. The page can be reviewed at any time with the integrated omnichannel preview, and a marketer can review the page at specific points in time or for different target groups via time-travel and personas.

The key advantages of CoreMedia CaaS are:

  • Content is provided in an easy-to-consume JSON format
  • It’s easy to define which data is exposed to reduce overhead
  • Data from multiple embedded content items can be aggregated to reduce the number of requests and increase performance
  • It provides a customizable business layer to adapt responses to business needs

A Powerful Pair

As CoreMedia Content Cloud is truly omnichannel, it’s easy to integrate the Mobify Platform as the frontend experience. With CaaS, CoreMedia provides the ideal component to supply Mobify’s FaaS with the content and layout configuration.

Karsten Reuter

Karsten Reuter

Senior Vice President Product Management

Karsten Reuter is leading the Product Management Team of CoreMedia. Karsten joined CoreMedia in 2001 and managed a variety of projects for customers such as Deutsche Telekom, Vodafone and ARD, among others. After establishing the U.S. Professional Services organization in San Francisco, he formed the e-Commerce Practice at CoreMedia and was responsible for implementing CoreMedia LiveContext for customers including JD Group, Mondou and Petedge. Prior to that, he worked for the Ponton European Media Art Lab on research projects related to Interactive TV, Virtual Reality and SmartHome. In 1996, Karsten Reuter earned a degree in Computer Science from the University of Karlsruhe.

More posts

Recommended Read #2: Small is the New Big

The increasing presence of "microservices" is having a major impact on online retail, including the ability to influence engagement, loyalty, and sales. But what exactly are microservices and why do they matter? We share two must-read posts that explain.

Read More

The Business of Hype: How to Master the “Drop”

The drop is the hottest trend in marketing. But what is it and why should you master it? We take a look at its history, explain what you need to know, and what you need to do.

Read More

Maximizing Your IBM Commerce Investment

You've invested heavily in your IBM Commerce platform but it's past time to update your customer experience. So how do you upgrade your system without breaking the bank or compromising your infrastructure? Bob Balfe walks through various scenarios and explains that there are lots of good options.

Read More

Post a comment


Add your name and email address to sign up for our CoreMedia Blog and Industry Newsletter and we will keep you posted about upcoming events, product enhancements and news about CoreMedia.

We promise to keep your data safe and you can opt out at any time.