{"id":1867,"date":"2017-09-11T00:00:00","date_gmt":"2017-09-10T22:00:00","guid":{"rendered":"https:\/\/wwwneu.strehle.de\/tim\/weblog\/archives\/2017\/09\/11\/1626-2\/"},"modified":"2025-07-31T21:45:09","modified_gmt":"2025-07-31T19:45:09","slug":"1626-2","status":"publish","type":"post","link":"https:\/\/www.strehle.de\/tim\/weblog\/archives\/2017\/09\/11\/1626-2\/","title":{"rendered":"Web frontend integration: Just drop me a link"},"content":{"rendered":"\n

For two reasons, I think about software interoperability<\/strong> a lot (see Improving DAM Interoperability in 2017<\/a>): First, software \u2013 especially \u201ccontent hub\u201d-style DAM systems \u2013 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<\/strong><\/a>, these parts need to interoperate with each other, too.<\/p>\n\n\n\n

A very interesting aspect of interoperability is frontend integration<\/strong>: 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\u2019s interrelated data on the same screen? I wrote about this in Web app interoperability \u2013 the missing link<\/a>. Now it\u2019s time for a few experiments.<\/p>\n\n\n\n

Web sites can talk to each other<\/h3>\n\n\n\n

You know the thing Facebook, Twitter or LinkedIn do when you paste a link into them \u2013 they magically add a title and an image:<\/p>\n\n\n\n

<\/figure>\n\n\n\n

That \u201cmagic\u201d is simply them fetching the Web page you\u2019re linking to, and reading structured metadata from its HTML source code using the Open Graph protocol<\/a> or Twitter cards markup<\/a>.<\/p>\n\n\n\n

Here\u2019s the Open Graph data LinkedIn reads from my homepage\u2019s HTML head meta tags in the screencast above:<\/p>\n\n\n\n

<meta property=\"og:title\" content=\"Tim Strehle\" \/>\n<meta property=\"og:description\" content=\"Digital Asset Management\u2026\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.strehle.de\/tim\/Tim_Strehle_2015.jpg\" \/>\n<\/code><\/pre>\n\n\n\n
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<\/strong>, I\u2019m filling in a registration form just by dropping my homepage URL onto it:<\/p>\n\n\n\n
<\/figure>\n\n\n\n
The data is standard-conformant schema.org markup<\/a> embedded in the HTML body of my homepage. An excerpt:<\/p>\n\n\n\n
<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>\" \n <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>\">\n<<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>> \nas \u201c<<span class=\"start-tag\">span<\/span> <span class=\"attribute-name\">property<\/span>=\"<a class=\"attribute-value\">schema:jobTitle<\/a>\">Project Manager \nDigital Asset Management Systems<\/<span class=\"end-tag\">span<\/span>>\u201d. <\/<span class=\"end-tag\">p<\/span>>\n<span id=\"line61\"><\/span>\n<\/code><\/pre>\n\n\n\n
In the next experiment<\/strong>, I\u2019m 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 \u2013 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:<\/p>\n\n\n\n
<\/figure>\n\n\n\n
We can add a lot more features to our UI \u2013 do client-side \u201clink replacement\u201d, open a \u201cpicker\u201d dialog to let people search instead of having to paste or drop a URL, or even add an iFrame or Web Component<\/a> to embed another application\u2019s information. If you\u2019re interested in these topics and you speak German, InnoQ\u2019s Falk Hoppe, Till Schulte-Coerne and Eberhard Wolff did a great podcast on Self-contained Systems und Frontend-Integration [in German]<\/a> (see also part 2<\/a>).<\/p>\n\n\n\n
Linked Data<\/h3>\n\n\n\n
The URLs used above for linking can become truly magical if you\u2019re doing them right:<\/p>\n\n\n\n
Let every piece of software you\u2019re running that holds important information make that information available<\/p>\n\n\n\n