How 7 bridges solve the headless content challenge

For most of my career, I have had to deal with two types of content: ‘structured’ and ‘unstructured’. Structured content being that of data delivered by a system like PIMs, and unstructured the amorphous marketing and editorial content. It has been the job of Web CMS so far to manage unstructured content by creating, delivering and managing content as HTML pages defined by templates and components, with the content stored in a database as HTML blobs. 

The arrival of headless content management systems has made the unstructured structured. Content is delivered as structured data (JSON) rather than unstructured HTML. By delivering content as data it is now easily readable by machines and can be used to represent all forms of content for apps, IoT, voice or websites.  One of the great capabilities of headless CMS is the ability to break content down into smaller pieces (defined as content types). These content types can be designed to represent any content (using a schema) and can be large and sophisticated structures with many nested properties, or small, simple and more granular.  

The real power of the Amplience way of modeling, however, is not just in how you can define the content using properties, but the ability to model all your content through linking smaller reusable pieces of content together to represent a larger content structure. This is what we have been describing as a content graph. But what is a graph and why is it important?

Tree Structures

After lists, tree structures are one of the most common and simplest ways to organize information. By spanning out from a single root node, the tree structure allows us to organize information into any number of branches and hierarchies. Each branch node can further expand recursively until it reaches a final leaf node.

From a very early age, we are taught to organize information in trees. The family tree helps us structure our parents, our grandparents and their parents into an information hierarchy that we build out by adding siblings, aunts, and uncles. Extensive family trees or genealogies go as far back as 3000BC when Egyptians recorded their ruling dynasties for hundreds of years.

Tree hierarchies have been used in the military for centuries to organize armies into squads, companies, regiments, and brigades, as well as officer command structures defining the chain of command from General to Lieutenant.

Scientists use the power of hierarchies to organize life by classifying animals and plants using a tree structure called a taxonomy. The taxonomy approach which has been adopted for organizing all kinds of information from science and libraries to businesses.  

Trees play a major role in our world of eCommerce, from organizing products into category trees in Product Information Systems(PIMs) to catalog management. Not only is this fundamental in the organization of Product Lifecycle Management (PLM), merchandising and buying, category trees have become how we naturally search and browse for products online. 

From the beginning, websites have been created as pages and organized like books online. Menu trees were developed to allow us to navigate through vast amounts of information to find what we were looking for. Web CMS was built to alleviate the effort of managing pages and maintain the integrity of these menu trees (done previously by HTML developers). As web CMS evolved it has created further hierarchies for breaking down pages into smaller pieces using templates, components and blocks of content.

Graphs and the seven bridges challenge

To explain what graphs are and how useful they are in modeling real-life problems, I’m going to tell a true story about a town called K?nigsberg and a mathematician called Leonardo Euler. In the 18th century, the town of K?nigsberg was a thriving center of trade situated on the banks of the River Pregel in Prussia (now Russia). The bustling economy in the city gave rise to the construction of seven bridges that joined the mainland to two islands, four of which joined it to the island of Kneiphof (meaning pub yard), two joining the other island to the mainland, and one joining the two islands. The story goes that the good people of the K?nigsberg liked to walk through their beautiful city on Sundays crossing the seven bridges. 

This pastime soon evolved into a local challenge to create a circuit they could walk crossing each bridge only once. Despite their best efforts, the citizens of K?nigsberg could not solve this problem and contacted the famed mathematician Leonardo Euler to help. Despite initially seeing the problem as trivial, in 1735 Euler presented his solution explaining that it was impossible to achieve a circuit crossing each bridge only once.

It wasn’t the result that was important, however, but how Euler abstracted the problem into nodes (vertices) and path connections (edges) what we now know today as a graph

Using this abstraction, he was able to model that it is impossible to traverse the edges only once unless there are 0 or 2 nodes of odd degree (a node that has an odd number of edges). As the seven-bridge problem has all 4 nodes with an odd number of edges, it is impossible to cross the bridges only once on a nice walk on a Sunday afternoon.

A world of Graphs

Graphs are a network of interconnected nodes. Trees are in fact a restricted form of a graph – a graph which follows a specific set of rules:

• A tree has a root node
• A tree is a graph that contains no loops/cycles/circuits - it is acyclic
• Two nodes (vertices) in a tree are connected by exactly one path

The thing I love about graphs are how powerful they are at abstracting almost anything in our lives from

The London underground tube map

GPS navigation to calculate roots between cities using roads

Social networking relationships

Mobile and computer networks

Even mapping the character relationships in Game of Thrones. 

So why are Graphs useful for us now?

If you think back to the website discussion earlier, you can see how websites have evolved into giant tree structures, or often a collection of trees (a forest). Various methods in the UX have been used to traverse and connect our web trees using links, but ultimately the fabric of a website is a tree structure including the HTML from which it was built. 

With headless systems, we are moving away from building the websites of yesteryear and are building apps with rich engaging user experiences that require more sophisticated ways of modeling content and experiences than just tree structures provide. This is the reason we decided on a new method to model content (content as graphs) to enable developers to build sophisticated apps, not just websites:

• Apps are not page-based or structured to be navigated like large online books and catalogs. Instead, the app UX provides many entry points (including different menus) across sets of interrelated information and data
• Modern experiences are also multi-channel, often using different apps (or heads) providing more potential experiences. App experiences need the ability to diverge along many different paths without the burden of duplicating content. They need a single source of content.
• Unlike websites, user journeys in apps are not linear and allow users to discover through iteration and taking many different paths through the app and content.
• Apps are built in a modular way using frameworks such as React or Vue which encourage the use of lots of small components. Although app components can be formed as hierarchies, most apps interconnect and reuse components forming component graphs.

Website v Application User Navigation

• Apps make it possible to use components in multiple contexts, not just the page they were designed for. Content must be granular and interconnected as it is pulled into these components based on the current context: where the user is in and what they are doing. 
• For example, you could inject content into the middle of a customer support live chat to show product options.
• This means that any piece of content can be an entry point into the graph
• As contextual experiences need vast amounts of content it is important to reuse content. This is only possible with a graph allowing content items to have multiple parents.
• As content and data are delivered through independent APIs it is important to be able to connect them together for the app to deliver the right experiences.

In my next article, I will show how graphs can be applied to modeling content and support the construction off apps in particular apps built-in frameworks such as React and Vue.