Semantic UI Development with VIE

Before John Resig released the first version of jQuery in 2006, the development of web-applications was a complicated process. Developers cooked their own recipe to face cross-browser support for Javascript implementations and interoperability was hardly manageable. After that, people started to not only use jQuery but also contributed to the open-sourced code to build a common solution for different day-to-day programming patterns (e.g., DOM manipulations, AJAX calls or event handling) which eventually did speed-up the development of web-applications immensely.

In IKS – especially on the user-interface layer of the stack – we faced a similar situation. The development of web-applications for the semantic web that make the benefits of the various semantic data (meta-data, annotations, links) visible to the user, is a hard process that usually involves several experts* to work together. However, when looking at such applications, we can easily identify different classes of interaction patterns that are re-used in one way or another throughout the applications (e.g., querying a database, accessing a semantic service, …). We analyzed these patterns and worked together with our industrial partners on a Javascript library to support web-applications that rely on such patterns: We called it VIE.

VIE – Semantic Maintenance in Javascript

VIE targets semantic web developer and offers a DSL to ease recurring tasks:

  • VIE.analyze()
    • Analyzes the given DOM element depending on the registered engines (e.g., RDFa-parsing , Apache Stanbol Enhancer) and returns an array of found entities.
  • VIE.load()
    • Loads all properties for the given entity from external services (e.g., Apache Stanbol Entityhub, DBPedia) into VIE.
    • Saves knowledge about an entity to a service. This service can be the entityhub of Apache Stanbol but also simply the local storage of the browser, using the JSON-LD representation of the model.
  • VIE.find()
    • Queries semantic services for, e.g., „all Persons whose names start with ‚Bar‘“.

The most frequent answer that developers return when asked for their first association with the term „semantic web“ is „triples“. However, at the same time, this object-centric representation on entities is accepted rather poorly and often confuses developers. To face this issue, VIE contains a subject-centric representation on entities using Backbone.js models. Here is an example:

Triples (object-centric):

<#Barack_Obama> rdf:type dbpedia:Person .
<#Barack_Obama> dbpedia:label “Barack Hussein Obama“ .
<#Barack_Obama> dbpedia:birthDate “1961-08-04“^^xsd:date .

VIE-Model (subject-centric):

var BarackObama = new VIE.Entity({
“@subject“ : “<#Barack_Obama>“,
“@type“ : “dbpedia:Person“,
“dbpedia:label“ : “Barack Hussein Obama“,
“dbpedia:birthDate“ : “1961-08-04“^^xsd:date

In this example, the variable BarackObama is now a proper VIE (hence Backbone.js) model which provides getter and setter for the properties as well as ontological queries:

var name = BarackObama.get(“dbpedia:label“); // „Barack Hussein Obama“
BarackObama.setOrAdd({“dbpedia:label“ : “Barack O.“});
var names = BarackObama.get(“dbpedia:label“); // [“Barack Hussein Obama“, “Barack O.“]

BarackObama.isof(“dbpedia:Person“); // returns true
BarackObama.isof(“dbpedia:Thing“); // returns true (inheritance)
BarackObama.isof(“dbpedia:Place“); // returns false

VIE itself is ontology-agnostic but supports the generation of classes and properties to enable type-checking and property-querying. By default, we support the vocabulary from with an RDFa syntax for serialization and parsing. However, we are currently working on a module to support microdata syntax in the near future.

VIE widgets – The view on your VIE models

Like jQuery does for the normal web developer, VIE aims to reduce the lines of code for the day-to-day recurring tasks of a semantic web developer. However, there are higher-level user interactions that go beyond the scope of VIE. These „semantic interaction patterns“ also need support to allow an easier adoption and development. We started to implemented small VIE widgets that implement these interaction patterns on a broad scale but with a flexible and extendible user interface for application-specific usage. Here are some use-cases where we currently either provide a VIE widget or are under heavy development of such a widget:

  • Image Search
    • Displaying a number of depictions of the entity-in-focus. The challenge here is to transform the knowledge about the entity-type into entity-specific queries: Photos of persons should usually contain a face, whereas images of a place will rather show a landscape.
  • Auto-tagger
    • This widget displays a list of found entities in a tag-cloud to be processed further.
  • Auto-complete
    • The auto-complete widget, like the image search widget, can leverage the entity-types to narrow the options for the autocomplete query, e.g., if we want to add a person’s first name, it makes sense to search through the first names of already existing persons and not names of places.
  • Annotations
    • With the annotate.js widget, we provide a lightweight UI that enables an end-user to annotate text inline with RDFa annotations using VIE.
  • Linking
    • We are currently working on a linking widget that can be used together with the annotation widget to provide „intelligent“ linking suggestions between entities, based on their types and properties.

Want to know more?

If you kept on reading and reached this section, I assume you are now eager to download the library, read through tutorials and use or customize widgets on your own page. All the development of the VIE software happens on Github where major releases of the software is submitted to the IKS account and each developer has forks in their own account. Each project provides more detailed information and also includes links to blog posts and other resources. Demos of the current VIE widgets, alongside with tutorials and code explanations can be found here.

Please do not hesitate to contact one of the main developers behind VIE if you have questions about the software, new use-cases or if you want to get involved in the development:

  • Sebastian Germesin (
  • Henri Bergius (
  • Szaby Grünwald (

* Developing semantic web applications usually needs a subset of the following experts: a business process analyst, a UI designer, a web developer, a knowledge engineer and a database expert.

Sebastian Germesin

Author: Sebastian Germesin

Sebastian Germesin finished his studies in 2008 with a Master's degree and started his PhD thesis at the DFKI - the German Research Center for Artificial Intelligence - at Saarbrücken. Starting with the AMIDA project, he was responsible for the development of technology for the automatic classification of dialogue acts and furthermore the detection, classification and correction of speech production errors (so called disfluencies). With the end of AMIDA in 2009, he joined the IKS project. His main research topic is the definition and development of semantic Interaction Patterns to model the interaction of a user with semantically enriched content. He is one of the main contributors to the VIE library which targets an intuitive API to ease the development of semantic web applications in Javascript.

Comments are closed.