For two reasons, I think about software interoperability a lot (see Improving DAM Interoperability in 2017): First, software – especially “content hub”-style DAM systems – must work well with other software to help people do their jobs. The second reason is that when we consider splitting a monolithic (DAM) system into multiple smaller Self-Contained Systems, these parts need to interoperate with each other, too.

A very interesting aspect of interoperability is frontend integration: When in application A, people need access to information living in application B. How do they navigate from A to B? Can they see both application’s interrelated data on the same screen? I wrote about this in Web app interoperability – the missing link. Now it’s time for a few experiments.

Web sites can talk to each other

You know the thing Facebook, Twitter or LinkedIn do when you paste a link into them – they magically add a title and an image:

That “magic” is simply them fetching the Web page you’re linking to, and reading structured metadata from its HTML source code using the Open Graph protocol or Twitter cards markup.

Here’s the Open Graph data LinkedIn reads from my homepage’s HTML head meta tags in the screencast above:

<meta property="og:title" content="Tim Strehle" />
<meta property="og:description" content="Digital Asset Management…" />
<meta property="og:image" content="https://www.strehle.de/tim/Tim_Strehle_2015.jpg" />

This is a simple but powerful integration pattern which we can use to transport arbitrary structured data between Web pages. In the experiment shown below, I’m filling in a registration form just by dropping my homepage URL onto it:

The data is standard-conformant schema.org markup embedded in the HTML body of my homepage. An excerpt:

<<span class="start-tag">p</span>>I work for the <<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value">http://www.spiegelgruppe.de/</a>" 
 <span class="attribute-name">property</span>="<a class="attribute-value">schema:worksFor</a>" <span class="attribute-name">typeof</span>="<a class="attribute-value">schema:Organization</a>">
<<span class="start-tag">span</span> <span class="attribute-name">property</span>="<a class="attribute-value">schema:name</a>">SPIEGEL Verlag</<span class="end-tag">span</span>></<span class="end-tag">a</span>> 
as “<<span class="start-tag">span</span> <span class="attribute-name">property</span>="<a class="attribute-value">schema:jobTitle</a>">Project Manager 
Digital Asset Management Systems</<span class="end-tag">span</span>>”. </<span class="end-tag">p</span>>
<span id="line61"></span>

In the next experiment, I’m showing a hypothetical application requiring email address input to be able to share something with other people. The first address is manually entered, lacking any additional information about that person. The second address is entered by pasting a URL – which, instead of my homepage again, could be a deep link into your CRM or any other Web app holding information about people. Once again, structured metadata is fetched from that URL, and suddenly we know a lot more about that person and even have a link to follow:

We can add a lot more features to our UI – do client-side “link replacement”, open a “picker” dialog to let people search instead of having to paste or drop a URL, or even add an iFrame or Web Component to embed another application’s information. If you’re interested in these topics and you speak German, InnoQ’s Falk Hoppe, Till Schulte-Coerne and Eberhard Wolff did a great podcast on Self-contained Systems und Frontend-Integration [in German] (see also part 2).

Linked Data

The URLs used above for linking can become truly magical if you’re doing them right:

Let every piece of software you’re running that holds important information make that information available

• under a stable, shareable URL
• which displays a nice, human-readable HTML representation
• with links to related information
• and structured metadata embedded as shown above
• plus all of the item data in machine-readable form, i.e. in the software’s Web Service API, either being linked to or accessible via content negotiation (“I can give you JSON or XML data if you ask for it”).

Now both people and software can identify, access and link to all of the company’s relevant information. Each system uses these URLs when referencing another system’s data. Semantic Web, here we come :)

What do you think? Are you doing this already? I’d love to hear your thoughts!