Adaptive Linked Data-driven Web Components:Building Flexible and Reusable Semantic Web Interfaces

Ali KhaliliDept. of Computer ScienceVU University Amsterdam

The Netherlandsa.khalili@vu.nl

Antonis LoizouDept. of Computer ScienceVU University Amsterdam

The Netherlandsa.loizou@vu.nl

Frank van HarmelenDept. of Computer ScienceVU University Amsterdam

The Netherlandsfrank.van.harmelen@vu.nl

ABSTRACTDue to the increasing amount of Linked Data openly pub-lished on the Web, user-facing Linked Data Applications(LDAs) are gaining momentum. One of the major entrancebarriers for Web developers to contribute to this wave ofLDAs is the required knowledge of Semantic Web technolo-gies such as the RDF data model and SPARQL query lan-guage. This paper presents an adaptive component-basedapproach together with its open source implementation forcreating flexible and reusable Semantic Web interfaces drivenby Linked Data. Linked Data-driven (LD-R) Web compo-nents abstract the complexity of the underlying SemanticWeb technologies in order to allow reuse of existing Webcomponents in LDAs, enabling Web developers who are notexperts in Semantic Web to develop interfaces that view,edit and browse Linked Data. In addition to the modular-ity provided by the LD-R components, the proposed RDF-based configuration method allows application assemblers toreshape their user interface for different use cases, by eitherreusing existing shared configurations or by creating theirproprietary configurations.

Categories and Subject DescriptorsH.5.2 [Information Interfaces and Presentation]: UserInterfaces; D.2.11 [Software Engineering]: Reusable Soft-ware: reusable libraries , reuse models

General TermsDesign, Human Factors, Performance, Standardization

1. INTRODUCTIONWith the growing number of structured data published, theWeb is moving towards becoming a rich ecosystem of machine-understandable Linked Data1. Semantically structured datafacilitates a number of important aspects of information

1lodlaundromat.org recently (15.10.2015) reported approx.38.6 billion triples published on the Web.

management such as information retrieval, search, visual-ization, customization, personalization and integration [11].Despite all these benefits, Linked Data Applications (LDAs)are not yet adopted by the large community of Web develop-ers outside the Semantic Web domain and, causally, by theend-users on the Web. The usage of semantic data is stillquite limited and most of the currently published LinkedData is generated by a relatively small number of publish-ers [6] which points to entrance barriers for the wide-spreadutilization of Linked Data [2].

The current communication gap between Semantic Web de-velopers and User Experience (UX) designers, caused by theneed to bear Semantic Web knowledge, prevents the stream-lined flow of best practices from the UX community intoLinked Data user interface (UI) development. The resultinglack of adoption and standardization often makes currentLDAs inconsistent with user expectations and impels moredevelopment time and costs on LDA developers. In this situ-ation, more time is spent in re-designing existing UIs ratherthan focusing on innovation and creation of sophisticatedLDAs.

This paper presents adaptive Linked Data-driven Web com-ponents as an approach to build flexible and reusable Se-mantic Web UIs. Web Components are a set of W3C stan-dards [5] that enable the creation of custom, reusable userinterface widgets or components in Web documents and Webapplications. The Resource Description Framework (RDF),on the other hand, provides a common data model that al-lows data-driven components to be created, shared and in-tegrated in a structured way across different applications.Linked Data-driven (LD-R) Web components as defined inthis paper are a species of Web components that employ theRDF data model for representing their content and specifi-cation (i.e. metadata about the component). LD-R compo-nents are supported by a set of predefined core Web com-ponents, each representing a compartment of the RDF datamodel on the Web UI. Thus, the Semantic Web nature ofan LDA can be encapsulated in LD-R components therebyallowing UX designers and Web developers outside the Se-mantic Web community to contribute to LDAs. The compo-nents also provide current Semantic Web developers with amechanism to reuse existing Web components in their LDAs.Furthermore, LD-R components exploit the power and flex-ibility of the RDF data model in describing and sharing re-sources to provide a mechanism to adapt the Web interfacesbased on the meaning of data and user-defined rules.

The LD-R approach offers many benefits that we will de-scribe in the remainder of the paper. Among them are:

Bootstrapping LDA UIs. LD-R components exploit bestpractices from modern Web application development to bringan exhaustive architecture to perform separation of con-cerns and thereby bootstrapping an LDA by only selectinga minimal relevant configuration. For example, a developeronly needs to set the URL of his in-use SPARQL endpointand start developing the viewer components without deal-ing with the underlying connection adapters and data flowmediators in the system.

Standardization and Reusability of LDA UIs. Instead ofcreating an LDA UI from scratch, in the component-baseddevelopment of LDA UIs, application assemblers choose froma set of standard UIs which will reduce the time and costsassociated with the creation of LDAs. For example, to ren-der DBpedia resources of type ‘Location’, a standard mapcan be reused.

Customization and Personalization of LDA UIs. TheRDF-based nature of LD-R components allow applicationassemblers to reshape their user interface based on the mean-ing of data or user context. For example, for all the resourcesof type foaf:Person, the content can be rendered with a‘ContactCard’ component.

Adoption of LDA UIs by non-Semantic Web developersand end-users. Most of the current Linked Data interfacesfall into the Pathetic Fallacy of RDF [10] where they displayRDF data to the users as a graph because the underlyingdata model is a graph. Abstracting the complexity of RDFand graph-based data representation provides more Affor-dances [17] for non-Semantic Web users to contribute toLinked Data UIs. Engaging more UX designers and Webdevelopers into LDA UIs will also result in more affordanceson the end-user’s side to better understand the possible ac-tions and advantages of the LDAs.

2. CONTRIBUTIONS AND OUTLINEThe contributions of this work are the concept of AdaptiveLD-R Web components and an open source implementationavailable at http://ld-r.org. Our primary claim is thatadopting a component-based approach that encapsulates themain concerns of a Semantic Web application, paves the wayto reusing existing best practices from the UX communitywithin the LDAs hence building more usable and pervasiveLDAs. We also present that combining the LD-R compo-nents with LD-R scopes and configurations allows applica-tion assemblers to provide a high level of flexibility in theirLDA UIs.

We explore these claims in stages. First, we collect somedata about the current status of Semantic Web UI devel-opment. Next, we demonstrate how adaptive LD-R Webcomponents can address the current issues in LDA UI de-velopment. Finally, we discuss the implementation of ouridea and its use in real-world scenarios.

3. THE CURRENT STATUS OF LINKED DATAUSER INTERFACE DEVELOPMENT

In order to understand the current pitfalls of LDA UI de-sign, we conducted a survey targeting active Semantic Webdevelopers2. The participants where selected from the com-munity of Semantic Web developers on Github who have hadat least one active Semantic Web-related repository. Githubis currently the most popular repository for open source codeand its transparent environment implies a suitable basis forevaluating reuse and collaboration among developers [14,22]. We used Github APIs3 to search4 for Semantic Webrepositories and to collect contact information for the corre-sponding contributors when available. The search, after re-moving organizations and invalid email addresses, resultedin 650 potential Semantic Web developers. We then con-tacted the candidates to ask them about the current pitfallsin developing LDA UIs. In our enquiry, we clearly men-tioned to skip the questionnaire if they have not developedany Semantic Web application so far. We used a minimal setof 7 questions to attract more responses and also used inlineforms for GMail users to allow filling out the questionnairein the same time as reading the enquiry email. We collected79 responses to our questionnaire, which is a considerablenumber of participants (almost 12% of the potential candi-dates). Figure 1 shows the main results of our survey.

Participants. Based on their LDA development experience,we divided the participants into three groups: basic (lessthan 2 applications), intermediate (3-5 applications) andadvanced (more than 5 applications) developers. The re-sult showed that the majority (62%) of participants wereintermediate and advanced developers. In addition to theirdevelopment experience, developers were asked about theirknowledge of Semantic Web to compare their practical andconceptual experience. As results revealed, the majorityof participants (63%) had proficient (4-5 years) and expert(more than 5 years) knowledge of Semantic Web and LinkedData which makes a good sample for our evaluation.

Questions addressed the following topics:

• Amount of time spent on bootstrapping LDA UIs. Be-fore designing the UIs in an LDA, developers need tospend some time on creating the skeleton of their ap-plication where querying data and the business logicof the application is handled. The results confirm thatdevelopers spend a lot of time (on average more than2 days) on bootstrapping their LDAs before they canstart working on the UI.

• Reuse of code by Semantic Web developers. Devel-opers usually reuse sections of code, templates, func-tions, and objects to save time and resources whendeveloping LDAs. We asked participants about twotypes of reuse: reuse by copy/pasting code from exist-ing LDAs and reuse by employing current Web compo-nents. Reuse by copy/pasting code can be seen as anindicator of the state of standardization, modularity

2results are available at https://goo.gl/cltqhv3https://developer.github.com/v3/4keywords: ”Semantic Web” OR ”Linked Data” OR ”RDF”OR ”SPARQL”

13   15  

2  

8  

17  

6  

5  

6  

7  

0  

5  

10  

15  

20  

25  

30  

35  

40  

Not  at  all   Not  Web  components  but  I  do  use  plugins  from  libraries  

like  jQuery  

Yes,  I  use  components  like  ReactJS  or  Polymer  

Code  Reuse  (Web  Components)  

basic   intermediate   advanced  

21  

7  2  

8  

19  

4  

6  7  

5  

0  

5  

10  

15  

20  

25  

30  

35  

40  

No,  I  usually  write  the  code  from  the  scratch  

Yes  but  not  much   Yes,  I  do  it  much  and  frequently  

Code  Reuse  (Copy/Paste)  

5  3  

10  7  

5  

4  5  

9  

4   9  

6  5  

2  

3  

2  

0  

5  

10  

15  

20  

25  

less  than  a  day   almost  one  day   2-­‐3  days   4-­‐7  days   more  than  a  week  

Num

ber  o

f  parOcipants  

Time  spent  on  bootstrapping  the  UI  

7  10  

6   7  

2  

4   12  13  

1  

4  

5  

8  

0  

5  

10  

15  

20  

25  

30  

less  than  a  year   2-­‐3  years   4-­‐5  years   more  than  5  years  

Num

ber  o

f  parOcipants  

Knowledge  of  SemanAc  Web  

9   12   9  

1  

11   19  

3  

2  

13  

0  

5  

10  

15  

20  

25  

30  

35  

40  

45  

Not  at  all   I  do  it  but  not  frequently   I  do  it  frequently  

UI  AdaptaAon  

16   13  

1  

11   17  

3  

4  

11  

3  

0  

5  

10  

15  

20  

25  

30  

35  

40  

45  

Not  at  all   Yes,  I  had  to  spend  some  Ome  explaining  the  SemanOc  Web  

concepts  

Yes  but  I  had  other  issues  than  dealing  with  SemanOc  

Web  knowledge  

AdopAon  issues  with  non-­‐SW  users  

Figure 1: Results of our user study on the current status of LDA UI development.

and reusability of current LDAs. The results indicatethat a considerable amount of users (46%), prefer towrite the code from scratch instead of reusing codefrom existing Semantic Web projects. This situationis more pronounced for basic developers who still pre-fer to write the code from scratch although they haveless experience in programming LDAs. Furthermore,the results on reuse of Web components give an in-sight on the adoption of current Web Components bySemantic Web developers. The results indicate thatdespite the prevalence of Web Components solutions,only 19% of the participants (mainly advanced users)were employing them in their applications. Interest-ingly, the majority of participants (49%) were alreadyreusing other component-like libraries which shows anattitude and capacity towards adopting the Web com-ponents.

• Adaptation of LDA UIs. Most of the modern Web ap-plications provide a mechanism to customize and per-sonalize their user interfaces based on the type of dataand the information needs of their end-users. Proac-tive user interface adaptation allows the applicationto act more like a human and consequently, more in-telligently [9]. As our study shows, within the currentLDA developers, 52% had experience adapting the userinterface of their applications frequently. There werealso 32% that were doing the UI adaptation but notfrequently.

• Adoption issues with non-Semantic Web developers.In order to examine if there is a communication gapbetween UI designers and Semantic Web developers,we asked the participants about their experience whencollaborating with a non-SW developer. Among theparticipants, 51% had communication issues with non-Semantic Web developers to familiarize them with Se-

mantic Web concepts before they can start contribut-ing to the application. The distribution of this issueamong more experienced developers (57% of the inter-mediate and advanced users) further emphasizes theimportance of this communication gap.

4. ADAPTIVE LINKED DATA-DRIVEN WEBCOMPONENTS

In order to streamline the process of UI development inLDAs, we propose an architecture of adaptive LD-R Webcomponents – Web components enriched by the RDF datamodel. As shown in Figure 2, the proposed architecture ad-dresses LDA UI reusability and flexibility by incorporatingRDF-based Web components and scopes. In the followingsections, the main elements of the architecture are described:

4.1 LD-R Web ComponentsAs depicted in Figure 3, there are four core component lev-els in an LD-R Web application. Each core component ab-stracts the actions required for retrieving and updating thegraph-based data and provides a basis for user-defined com-ponents to interact with Linked Data in three modes: view,edit and browse.

The data-flow in the system starts from the Dataset compo-nent which handles all the events related to a set of resourcesunder a named graph identified by a URI. The next level isthe Resource component which is identified by a URI andindicates what is described in the application. A resourceis described by a set of properties which are handled by theProperty component. Properties can be either individual oraggregate when combining multiple features of a resource(e.g. a component that combines longitude and latitudeproperties; start date and end date properties for a daterange, etc.). Each property is instantiated by an individ-

LD-RWeb Components

ScopesConfigurations

Interaction Mode

Core (RDF) Components

User-defined Components

View Edit Browse

Core Configurations

Component-specific Configurations

SemanticMarkup

Figure 2: Main elements of the adaptive LD-R Webcomponents architecture.

Dataset

Resource

Property

Value

Browser

Data Flow1

2

3

4

Viewer Editor

Figure 3: Core LD-R Web components.

ual value or multiple values in case of an aggregate object.The value(s) of properties are controlled by the Value com-ponent. In turn, Value components invoke different compo-nents to view, edit and browse the property values. Viewer,Editor and Browser components are terminals in the LD-Rsingle directional data flow where customized user-generatedcomponents can be plugged into the system. User interac-tions with the LD-R components are controlled by a set ofconfigurations defined on one or more selected componentlevels known as scopes.

4.2 Scopes and ConfigurationsLD-R Web components provide a versatile approach for con-text adaptation. A context can be a specific domain of inter-est, a specific user requirement or both. In order to enablecustomization and personalization, the LD-R approach ex-ploits the concepts of Scope and Configuration. A scope isdefined as a hierarchical permutation of Dataset, Resource,Property and Value components (cf. Figure 4). Each scopeconveys a certain level of specificity on a given context rang-ing from 1 (most specific) to 15 (least specific). Scopes aredefined by using either the URIs of named graphs, resourcesand properties, or by identifying the resource types and datatypes. A configuration is defined as a setting which affectsthe way the LDA and Web components are interpreted and

V

DRPD

P

D

R

P

V

V

D

R

D

V

V

P

1 2 3 4 5 6 7 8

9 10 11 12 13 14 15

R

P

V

D

P

V

P

V V

R

D

R P

R D

R

Value

DatasetResourceProperty

Figure 4: LD-R scopes based on the permutation ofdataset, resource, property and value identifiers.

R2

C8

C10

C7 C11

R4

D2

R3

P5P4P3P2P1

R1

D1

C3

C4

C2

AppC1

C5

C6

C9

Figure 5: A sample LD-R configuration hypergraph.

rendered (e.g. render a specific component for a specificRDF property or enforce a component to display Wikipediapage URIs for DBpedia resources). UI adaptation is han-dled by traversing the configurations for scopes, populatingthe configurations and overwriting them when a more spe-cific applicable scope is found. As shown in Code 1 below,in the worst case when the DRPV scopes are used and the UIis supposed to render the Value components, all 15 scopesneed to be traversed for the adaptation:

1 InitialConfig = {initial applicationconfiguration}

2 Context = [array of scopes with thecorresponding configuration objects]

3 Config = InitialConfig4 for (i = 15; i < 1; i--) {5 Config.compareWith(Context[i]) {6 Config.addMissingAttributes ()7 Config.overwriteExistingAttributes ()8 }9 }

Code 1: Algorithm for the LD-R UI adaptation.

Figure 5 demonstrates an example of the LD-R configura-tion hypergraph containing scopes with the maximum depth

of DRP. The graph defines a generic configuration for the ap-plication as C1. There are configurations defined for thedataset scope D1 as C2, for the resource scope R2 as C3 andfor the property scope P2 as C4. There are also configu-rations for the RP scope R2P2 as C5 and for the DRP scopeD1R2P2 as C6. Let’s suppose we have a setting with thefollowing values for the scopes and configurations:

• D1= <http://ld-r.org/users>

• R2= type foaf:Person

• P2= rdfs:label

• C1={{viewer:‘basic’},{attr1:1},{attr2:3}}• C2={{attr1:0},{attr3:2}}• C3={{attr3:1},{attr4:4},{attr5:1}}• C4={{attr5:2},{attr6:1}}• C5={{viewer:‘contact’},{attr3:5},{attr7:6}}• C6={{attr3:8},{attr7:1},{attr8:3}}

With the above settings, when a property component forrdfs:label is rendered without the dataset and resourcecontext, the configuration will be:

{{viewer:‘basic’},{attr1:1},{attr2:3},{attr5:2},{attr6:1}}

When the property component gets rendered within the re-source context of type foaf:Person, the settings for viewerand attr5 are overwritten and new settings for attr3, attr4and attr7 are added:

{{viewer:‘contact’},{attr1:1},{attr2:3},{attr3:5},{attr4:4},{attr5:1},{attr6:1},{attr7:6}}

When the additional context of dataset as <http://ld-

r.org/users> is given, attr3 and attr7 get overwritten anda new setting for attr8 is added:

{{viewer:‘contact’},{attr1:0},{attr2:3},{attr3:8},{attr4:4},{attr5:1},{attr6:1},{attr7:1},{attr8:3}}

Scopes can also be defined on a per user basis, facilitat-ing the versioning and reuse of user-specific configurations.User-Specific configurations provide different views on com-ponents and thereby data, based on the different personasdealing with them.

In addition to the fine-grained component customization,LD-R Web applications provide a fine-grained access controlover the data through the component scopes. For exam-ple, an application developer can restrict access to a specificproperty of a specific resource in a certain dataset and on aspecific interaction mode.

4.3 Semantic Markup for Web ComponentsThe innate support of RDF in LD-R Web components enablethe automatic creation of semantic markup on the UI level.Lower semantic techniques such as RDFa, Mircodata andJSON-LD can be incorporated in the core LD-R componentsto expose structured data to current search engines whichare capable of parsing semantic markup. For example, anLD-R component created based on the Good Relations5 orSchema.org ontologies, can automatically expose the prod-

5http://www.heppnetz.de/projects/goodrelations/

Component Developer

Application Assembler End UserLinked Data

ProviderScopes &

ConfigurationsCore (RDF) components

Linked Data Web Components Application User Interface

Figure 6: LD-R components life cycle.

uct data as Google Rich Snippets for products6 which willprovide better visibility of the data on Web search results(i.e. SEO).

In addition to automatic annotation of data provided by theLD-R Web components, the approach offers semi-automaticmarkup of Web components by creating component meta-data. Component metadata consists of two categories ofmarkup:

• Automatic markup generated by parsing componentpackage specification – metadata about the componentand its dependencies. It includes general metadatasuch as name, description, version, homepage, authoras well as technical metadata on component sourcerepository and dependencies.

• Manual markup created by component authors whichexposes metadata such as component level (dataset,resource, property, value), granularity (individual, ag-gregate), mode (view, edit, browse) and configurationparameters specification.

Similar to content markup, Component markup can utilizecommonly-known ontologies such as Schema.org in orderto improve the visibility of LD-R components and enableapplication assemblers to better understand the intendedusage and capabilities of a given component.

4.4 Stackeholders and Life CycleAs shown in Figure 6, the LD-R components lifecycle en-compasses four primary types of stakeholders:

• Linked Data Provider. Since the LD-R approach fo-cuses mainly on Linked Data applications, the provi-sion of RDF-compliant data is an essential phase indeveloping the LD-R components. There are differ-ent stages [1] in Linked Data provision, including dataextraction, storage, interlinking, enrichment, qualityanalysis and repair which should be taken into accountby data scientists and Linked Data experts. Once thedata and schemata are provided to the LD-R compo-nent system, the system can bring a reciprocal valueto Linked Data providers to better understand and cu-rate the data when needed. For example, in the caseof geo-coordinates, a map component can enable data

6https://developers.google.com/structured-data/

Actions

StoresLD-RComponents

RESTful Services

Endpoint

communicate

CRUD

Data

update

render

action

Dispatcherdispatch

Flux unidirectional data flow

Figure 7: Data flow in the LD-Reactor framework.

providers to easily curate the outlier data (e.g. am-biguous entities) within a certain geo boundary in avisual manner.

• Component Developer. Component developers are UXdesigners and Web programmers who are involved incomponent fabrication. There are two types of Webcomponents developed in this step: a) Core compo-nents (cf. Figure 3) which abstract the underlyingRDF data model. These components are built-in tothe system, however can still be overwritten by de-velopers who have proficiency in Semantic Web andLinked Data. b) Community-driven components whichexploit the core components. These components areeither created from scratch or by remixing and repur-posing existing Web components found on the Web.

• Application Assembler. The main task of applicationassemblers is to identify the right components and con-figurations for the application; and to combine them ina way which fits the application requirements. Withinthe LD-R component system, the metadata providedby each Web component facilitates the discovery ofrelevant components. Having shared vocabularies onLinked Open Data allows assemblers to not only reusecomponents but also reuse the existing configurationsand scopes published on the Web. For example, ifthere is already a suitable configuration for RP scopewhich uses foaf:Person as resource type and dc-

terms:description as property URI, the assemblercan reuse that configuration within his application.

• End-User. End-users experience working with the com-ponents to pursue goals in a certain application do-main. As such, they may request the developmentof new components or configurations in order to fulfiltheir requirements and are expected to provide feed-back on existing components.

5. IMPLEMENTATIONIn order to realize the idea of adaptive Linked Data-drivenWeb components, we implemented an open-source softwareframework called Linked Data Reactor (LD-Reactor) whichis available online at http://ld-r.org. LD-Reactor utilizes

Facebook’s ReactJS7 components, the Flux8 architecture,Yahoo!’s Fluxible9 framework for isomorphic Web applica-tions (i.e. running the components code both on the serverand the client) and the Semantic-UI10 framework for flexibleUI themes. The main reasons we chose React componentsover other Web Components solutions (e.g. Polymer11, An-gularJS12, EmberJS13, etc.) were the maturity and main-tainability of the technology, the native multi-platform sup-port, the number of developer tools/components/applica-tions, and the efficiency of its underlying virtual DOM ap-proach14.

As shown in Figure 7, LD-Reactor follows the Flux architec-ture which eschews MVC (Model-View-Controller) in favourof a unidirectional data flow. When a user interacts witha React component, the component propagates an actionthrough a central dispatcher, to the various stores that holdthe application’s data and business logic, and updates all af-fected components. The component interaction with SPARQLendpoints to retrieve and update Linked Data occurs throughthe invocation of RESTful services in actions.

In order to allow the bootstrapping of LDA UIs, LD-Reactorprovides a comprehensive framework that combines the fol-lowing main elements:

• A set of RESTful Web services that allow basic CRUDoperations on Linked Data using SPARQL queries15.

• A set of core components called Reactors which im-plement core Linked Data components (see Figure 3)together with their corresponding actions and stores.

• A set of default components which allow basic viewing,editing and browsing of Linked Data.

• A set of minimal viable configurations based on thetype of data and properties from commonly-used vo-cabularies on the Semantic Web (e.g. foaf, dctermsand SKOS).

• A basic access control plugin which allows restrictingread/write access to data.

LD-Reactor implementation is compliant with MicroservicesArchitecture [13] where the existing ReactJS componentscan be extended by complementary Linked Data services.In contrast to the centralized monolithic architecture, the

7https://facebook.github.io/react/8https://facebook.github.io/flux9http://fluxible.io/

10http://semantic-ui.com/11http://www.polymer-project.org/12https://angularjs.org/13http://emberjs.com/14Elaborating on all these factors is beyond the scope of thispaper.

15the framework is compliant with the SPARQL 1.1 stan-dard. However, we have identified certain inconsistenciesbetween OpenRDF Sesame and OpenLink Virtuoso RDFstores, which did not allow the execution of syntacticallyidentical queries across both systems. Thereby, specificadaptors have been implemented for each of these two RDFstores.

microservices architecture allows placing the main function-alities of the LDA into separate decoupled services and scaleby distributing these services across servers, replicating asneeded. This architectural style also helps to minimize theredeploying of the entire application when changes in com-ponents were requested.

Figure 8: A screenshot of LD-Reactor view and editmode for individual (top) and aggregate (bottom)values.

There are three modes of interactions within LD-R com-ponents namely view, browse and edit. These modes workwith two types of value granularity: individual and aggre-gate. As shown in Figure 8, components can target indi-vidual values or interact with aggregate values when userswant to show/update multiple values at once. Figure 9 de-picts the browse mode where individual (e.g. item lists withcheck boxes) and aggregate data browser (e.g. data slidersor maps) components can be employed.

Semantic markup of data (as discussed in Section 4.3) is sup-ported natively within the framework by embedding Micro-data annotations within the LD-R Web components. Ad-ditionally, in order to facilitate the creation of componentmetadata, we developed a tool16 which automatically gen-erates the general metadata about the components in JSON-

16https://github.com/ali1k/ld-r-metadata-generator

Figure 9: A screenshot of LD-Reactor browse mode.

LD, using Schema.org’s SoftwareApplication schema17.

6. USE CASESThe LD-Reactor framework is already in use within the RI-SIS18 and Open PHACTS19 projects.

6.1 RISISThe RISIS project aims to provide an infrastructure for re-search and innovation, targeting researchers from variousscience and technology domains. The LD-Reactor frame-work was utilized in RISIS to help data providers with noLinked Data experience to provide RDF metadata abouttheir datasets20. This metadata is then used to allow re-searchers to search, identify, and request access to the datathey are interested in21. In the following, we present themain requirements for configurations and components, to-gether with their representation in the LD-Reactor configu-ration file22.

Configurations:

• The UI should be able to to render metadata propertiesin different categories (Code 2 line 3, 4).

• The labels for properties should be changeable in theUI especially for technical properties (e.g. RDF dump)that are unknown to researchers outside the SemanticWeb domain (Code 2 line 18, 26, 40).

• There should be a hint for properties to help meta-data editors to understand the meaning of the property(Code 2 line 20, 28, 41).

• Instead of showing the full URIs, the output UI shouldrender either a shortened URI or a meaningful stringlinked to the original URI (Code 2 line 6).

17https://schema.org/SoftwareApplication18http://risis.eu19http://www.openphacts.org20http://sms.risis.eu21http://datasets.risis.eu22see the complete configuration file at http://github.com/risis-eu/sms-platform

Figure 10: A screenshot of RISIS metadata editor and datasets portal powered by the LD-Reactor framework.

• Whenever a DBpedia URI is provided, display the cor-responding Wikipedia URI enabling users to retrievehuman readable information (Code 2 line 33, 45).

• When a dropdown menu is provided, there should bethe ability to accommodate user-defined values whichare not listed in the menu (Code 2 line 57).

Components:

• A component for dcterms:spatial values to allow search-ing and inserting resources from DBpedia based on theentity type (e.g. Place, Person, Organization, etc).

• A component for dcterms:subject values to allow in-serting and viewing DBpedia URIs as subject.

• A component for dcterms:language values to allowinserting and viewing languages formatted in ISO 639-1 using standard URIs (e.g.http://id.loc.gov/vocabulary/iso639-1/en).

• A component for dcat:byteSize values to allow in-serting and viewing file size specified by a unit.

• A component for dcterms:format values to allow in-serting and viewing mime types.

In accordance to the LD-Reactor microservices architecture(cf. Section 5), we built a DBpediaGMap viewer componentwhere we reused the current react-google-maps23 togetherwith DBpedia lookup and query services to retrieve the co-ordinates for the recognized DBpedia resource values.Figure 10 shows a screenshot of the generated UIs for meta-data and search.

23http://github.com/tomchentw/react-google-maps

1 resource: {2 ‘generic ’: {3 usePropertyCategories: 1,4 propertyCategories: [‘overview ’, ‘

legalAspects ’, ‘technicalAspects ’],5 resourceReactor: [‘Resource ’],6 shortenURI: 17 }8 },9 property: {

10 ‘generic ’: {11 propertyReactor: [‘IndividualProperty ’],12 objectReactor: [‘IndividualObject ’],13 objectIViewer: [‘BasicIndividualView ’],14 objectIEditor: [‘BasicIndividualInput ’]15 },16 ‘http://purl.org/dc/terms/language ’: {17 allowNewValue: 1,18 label: [‘Dataset Language ’],19 category: [‘overview ’],20 hint: [‘The language of the dataset.

Resources defined by the Library ofCongress (http://id.loc.gov/vocabulary/iso639-1.html, http://id.loc.gov/vocabulary/iso639-2.html) SHOULD beused.’],

21 objectIViewer: [‘LanguageView ’],22 objectIEditor: [‘LanguageInput ’],23 defaultValue: [‘http://id.loc.gov/vocabulary

/iso639-1/en’]24 },25 ‘http://purl.org/dc/terms/spatial ’: {26 label: [‘Geographical coverage ’],27 category: [‘overview ’],28 hint: [‘The geographical area covered by

the dataset.’],29 allowNewValue: 1,30 objectReactor: [‘AggregateObject ’],31 objectAViewer: [‘DBpediaGoogleMapView ’],32 objectIViewer: [‘BasicDBpediaView ’],33 asWikipedia: 1,34 objectAEditor: [‘BasicAggregateInput ’],35 objectIEditor: [‘DBpediaInput ’],36 lookupClass: [‘Place ’]37 },38 ‘http://purl.org/dc/terms/subject ’: {39 category: [‘overview ’],40 label: [‘Keywords ’],41 hint: [‘Tags a dataset with a topic.’],42 allowNewValue: 1,43 objectIEditor: [‘DBpediaInput ’],44 objectIViewer: [‘BasicDBpediaView ’],

45 asWikipedia: 146 },47 ‘http://purl.org/dc/terms/license ’: {48 category: [‘legalAspects ’],49 label: [‘License ’],50 allowNewValue: 1,51 objectIViewer: [‘BasicOptionView ’],52 objectIEditor: [‘BasicOptionInput ’],53 options: [54 {label: ‘Open Data Commons Attribution

License ’, value: ‘http://www.opendatacommons.org/licenses/by/’},

55 {label: ‘Creative Commons Attribution -ShareAlike ’, value: ‘http://creativecommons.org/licenses/by-sa/3.0/’}

56 ],57 allowUserDefinedValue: 158 }59 }

Code 2: An excerpt of the LD-Reactor configurationfor the RISIS metadata editor.

6.2 Open PHACTSThe Open PHACTS Discovery Platform has been developedto reduce barriers to drug discovery, by collecting and inte-grating a large number of prominent RDF datasets in thepharmacology domain. The platform provides a uniformRESTful API for application developers to access the in-tegrated data. In collaboration with the data providers,the Open PHACTS consortium has created a comprehensivedataset description specification24 based on the Vocabularyof Interlinked Datasets (VoID)25. The metadata provided inthis context enables (among others) exposing the detailedprovenance for each result produced by the platform, the lo-cation of source files for each dataset, and example resources.

The provision of VoID dataset descriptors that adhere to thespecification proved to be a non-trivial challenge, even fordata providers that are well versed in providing RDF dis-tributions of their core data. A series of UIs were thereforecreated to facilitate the creation of the VoID descriptors.However, as the specification evolved over the first 2 yearsof the project, any changes or additions made had to be re-flected in the UI source code as well; a cumbersome process.Due to the inevitable delay between specification changesand UI development, users often found themselves havingto edit large RDF files using text editors, which resulted infrequent syntax errors being made.

A new version of the VoID editor implemented using the LD-Reactor framework is now available online26. Though theimport/export capabilities of the editor are still not imple-mented at the time of writing, we have received very positivefeedback from the community for a number of reasons:

• UI updates: As the UI is generated based on the un-derlying data, the process of staying up to date withthe current specification becomes trivial. The RDFexample provided by the specification can be simply

24http://www.openphacts.org/specs/2013/WD-datadesc-20130912/

25http://www.w3.org/TR/void/26http://void.ops.labs.vu.nl/ Source: http://github.com/openphacts/ld-r

Figure 11: A screenshot of the BasicCalendarIn-put LD-R component created to allow the editingof datetimes in Open PHACTS VoID descriptions.

loaded into the RDF store and the changes are im-mediately visible in the UI through the default corecomponents. Users are then able to adapt the exam-ple VoID description to their dataset. The resultingVoID file can be downloaded by exporting all triplesin the named graph corresponding to the dataset.• Dataset releases: A large number of property values

remain the same across releases. Similarly with usingthe example from the Dataset Description Specifica-tion, users are able to upload their old VoID descrip-tion and only edit the outdated values.• Access control: Using the built–in user authentication

mechanism of LD-Reactor we were able to ensure thatonly the owner(s) of a particular dataset are able toedit its metadata.• Non-standard properties: Some data providers elect to

include additional properties that are not prescribedby the specification. The visualisation of such prop-erties is supported easily using the core LD-R compo-nents.• Intuitive navigation: Typically, each dataset consists

of a number of subsets, which are also of type void:Dataset,and may have further subsets themselves. Displayingall the information together can easily become confus-ing for the user; instead the LD-Reactor frameworkwas used to provide navigation through the subsetlinks, displaying only a single dataset (or subset) ata time.• Datetime component: Manually typing datetimes in

the required format (e.g. ‘2015-02-12T16:48:00Z’) canbe an error prone process. Instead, we have beenable to reuse the react-bootstrap-datetimepicker27

component, to create a new LD-R value editor for date-times (BasicCalendarInput 28 ) with a graphical inter-face as shown in Figure 11.

27https://github.com/quri/react-bootstrap-datetimepicker28https://github.com/openphacts/ld-r/blob/master/components/object/editor/individual/BasicCalendarInput.js

In addition to the significant improvements over previousversions of the VoID editor outlined above, we were able todevelop the LD-Reactor version in a fraction of the time thatwas required for earlier versions.

7. RELATED WORKComponent-based software engineering (CBSE) has been anactive research area since 1987 with numerous results pub-lished in the research literature [23]. Within the Seman-tic Web community, the main focus has been on enrichingcurrent service-oriented architectures (SOAs) with semanticformalisms and thereby providing Semantic Web services asreusable and scalable software components [24]. There havealso been a few attempts to create Semantic Web Compo-nents by integrating existing Web-based components withSemantic Web technology [3, 7].

When it comes to component-based development of LDAs,the works typically fall into software application frameworksthat address building scalable LDAs in a modular way. Thesurvey conducted by [8] identified the main issues in cur-rent Semantic Web applications and suggested the provisionof component-based software frameworks as a potential so-lution to the issues identified. The Semantic Web Frame-work [4] was one of the first attempts in that direction todecompose the LDA development requirements into an ar-chitecture of reusable software components. In most of thecurrent full-stack LDA frameworks such as Callimachus29

and LDIF30 the focus is mainly on the backend side of LDAsand less attention is paid on how Linked Data is consumedby the end-user. There are also more flexible applicationframeworks such as OntoWiki [6] which provide UI widgetsand extensions to expose Linked Data to non-Semantic Webend-users.

Besides these generic LDA frameworks, there are also ap-proaches that focus on the development of user interfaces forLDAs. WYSIWYM (What You See Is What You Mean) [12]is a generic semantics-based UI model to allow integrated vi-sualization, exploration and authoring of structured and un-structured data. Our proposed approach utilizes the WYSI-WYM model for binding RDF-based data to viewer, edi-tor and browser UIs. Uduvudu [15] is another approach tomaking an adaptive RDF-based UI engine to render LinkedData. Instead of adopting Web components, Uduvudu em-ploys a set of flexible UI templates that can be combinedto create complex UIs. Even though the static templatesdo not provide enough interactions for editing and browsingdata (in contrast to Web components), we believe that al-gorithms for automatic selection of templates employed inUduvudu can be reused in the LD-Reactor framework forautomatic generation of configurations. Another similar ap-proach is SemwidgJS [21] which brings a semantic Widgetlibrary for the rapid development of LDA UIs. SemwidgJSoffers a simplified query language to allow the navigationof graph-based data by ordinary Web developers. The maindifference between LD-R and SemwidgJS is that LD-Reactorsuggests a more interactive model which is not only for dis-playing Linked Data but also for providing user adaptationsbased on the meaning of data. LD-Viewer [16] is another re-

29http://callimachusproject.org/30http://ldif.wbsg.de/

lated Linked Data presentation framework particularly tai-lored for the presentation of DBpedia resources. In con-trast to LD-Reactor, LD-Viewer builds on top of the tra-ditional MVC architecture and its extensions rely heavilyon the knowledge of RDF which is a burden for developersunfamiliar with Semantic Web technologies.

In addition to the LDA UI frameworks, there are severalad-hoc tools for Linked Data visualization and explorationsuch as Balloon Synopsis [19] and Sgvizler [20] which can beutilized as Web components within the LD-Reactor frame-work. [18] provides an extensive list of these tools aiming tomake Linked Data accessible for common end-users who arenot familiar with Semantic Web.

Overall, what distinguishes LD-Reactor from the existingframeworks and tools is its modern isomorphic component-based architecture that addresses reactive and reusable UIsas its first class citizen.

8. CONCLUSION AND FUTURE WORKThis paper presented adaptive Linked Data-driven Web com-ponents as a solution to increase the usability of currentLinked Data applications. The proposed component-basedsolution emphasizes the reusability and separation of con-cerns in respect to developing Linked Data applications. TheRDF-based UI adaptation mechanism aims to provide bet-ter customization and personalization based on the meaningof data. Furthermore, employing standard Web componentsaspires to bring a better communication between UX design-ers and Semantic Web developers in order to reuse best UIpractices within Linked Data applications.

We argue that bridging the gap between Semantic Web Tech-nologies and Web Components worlds brings mutual bene-fits for both sides. On one hand, Semantic Web technologiesprovide support for richer component discovery, interoper-ability, integration, and adaptation on the Web. On theother, Web Components bring the advantages of UI stan-dardization, reusability, replaceability and encapsulation tocurrent Semantic Web applications.

As our future plan, we envisage creating a cloud infrastruc-ture for sharing and reusing LD-R scopes and configurationsas well as LD-R Web components without the need to in-stall the framework. We also plan to make a user interfaceto facilitate creation of the LD-R scopes and configurations.Another direction for future research is developing mecha-nisms for the automatic configuration and composition ofWeb components based on the semantic markup provided.

9. AKNOWLEDGEMENTWe would like to thank professor Peter van den Besselaarfrom the faculty of Social Sciences and our colleagues fromthe Knowledge Representation & Reasoning research groupat VU University Amsterdam for their helpful commentsduring the development of the LD-Reactor framework. Thiswork was supported by a grant from the European Union’s7th Framework Programme provided for the project RISIS(GA no. 313082).

10. REFERENCES[1] S. Auer, J. Lehmann, A.-C. Ngonga Ngomo, and

A. Zaveri. Introduction to linked data and its lifecycleon the web. In Proceedings of the 9th InternationalConference on Reasoning Web: Semantic Technologiesfor Intelligent Data Access, RW’13, pages 1–90, Berlin,Heidelberg, 2013. Springer-Verlag.

[2] E. Benson and D. R. Karger. End-users publishingstructured information on the web: An observationalstudy of what, why, and how. In Proceedings of the32Nd Annual ACM Conference on Human Factors inComputing Systems, CHI ’14, pages 1265–1274, NewYork, NY, USA, 2014. ACM.

[3] M. Casey and C. Pahl. Web components and thesemantic web. Electr. Notes Theor. Comput. Sci.,82(5):156–163, 2003.

[4] R. G. Castro, A. G. Perez, and M. n.-G. Oscar. TheSemantic Web Framework: A Component-BasedFramework for the Development of Semantic WebApplications. In DEXA ’08: Proceedings of the 200819th International Conference on Database and ExpertSystems Application, pages 185–189, Washington, DC,USA, 2008. IEEE Computer Society.

[5] D. Cooney. Introduction to web components, 2014.http://www.w3.org/TR/components-intro/.

[6] P. Frischmuth, M. Martin, S. Tramp, T. Riechert, andS. Auer. OntoWiki—An Authoring, Publication andVisualization Interface for the Data Web. SemanticWeb Journal, 2014.

[7] O. Hartig, M. Kost, and J. C. Freytag. Designingcomponent-based semantic web applications withDESWAP. In C. Bizer and A. Joshi, editors,Proceedings of the Poster and Demonstration Sessionat the 7th International Semantic Web Conference(ISWC2008), Karlsruhe, Germany, October 28, 2008,volume 401 of CEUR Workshop Proceedings.CEUR-WS.org, 2008.

[8] B. Heitmann, S. Kinsella, C. Hayes, and S. Decker.Implementing semantic web applications: referencearchitecture and challenges. In 5th InternationalWorkshop on Semantic Web-Enabled SoftwareEngineering, 2009.

[9] R. Hervas and J. Bravo. Towards the ubiquitousvisualization: Adaptive user-interfaces based on thesemantic web. Interacting with Computers,23(1):40–56, 2011.

[10] D. Karger and M. Schraefel. The pathetic fallacy ofrdf. Position Paper for SWUI06, 2006.

[11] A. Khalili and S. Auer. User interfaces for semanticauthoring of textual content: A systematic literaturereview. Web Semantics: Science, Services and Agentson the World Wide Web, 22(0):1 – 18, 2013.

[12] A. Khalili and S. Auer. Wysiwym – integratedvisualization, exploration and authoring ofsemantically enriched un-structured content. SemanticWeb Journal, 2014.

[13] J. Lewis and M. Fowler. Microservices, 2014. http://martinfowler.com/articles/microservices.html.

[14] A. Lima, L. Rossi, and M. Musolesi. Coding Togetherat Scale: GitHub as a Collaborative Social Network.In Proceedings of the 8th AAAI InternationalConference on Weblogs and Social Media

(ICWSM’14), Ann Arbor, Michigan, USA, June 2014.

[15] M. Luggen, A. Gschwend, A. Bernhard, andP. Cudre-Mauroux. Uduvudu: a graph-aware andadaptive ui engine for linked data. In C. Bizer,S. Auer, T. Berners-Lee, and T. Heath, editors,Proceedings of the Workshop on Linked Data on theWeb (LDOW), number 1409 in CEUR WorkshopProceedings, Aachen, 2015.

[16] D. Lukovnikov, C. Stadler, and J. Lehmann. Ldviewer - linked data presentation framework. InProceedings of the 10th International Conference onSemantic Systems, SEM ’14, pages 124–131, NewYork, NY, USA, 2014. ACM.

[17] D. A. Norman. The Design of Everyday Things:Revised and Expanded Edition. Basic Books, Inc., NewYork, NY, USA, 2013.

[18] S. Ojha, M. Jovanovic, and F. Giunchiglia.Entity-centric visualization of open data. InJ. Abascal, S. Barbosa, M. Fetter, T. Gross,P. Palanque, and M. Winckler, editors,Human-Computer Interaction INTERACT 2015,volume 9298 of Lecture Notes in Computer Science,pages 149–166. Springer International Publishing,2015.

[19] K. Schlegel, T. Weißgerber, F. Stegmaier,M. Granitzer, and H. Kosch. Balloon synopsis: Ajquery plugin to easily integrate the semantic web in awebsite. In R. Verborgh and E. Mannens, editors,Proceedings of the ISWC Developers Workshop 2014,co-located with the 13th International Semantic WebConference (ISWC 2014), Riva del Garda, Italy,October 19, 2014., volume 1268 of CEUR WorkshopProceedings, pages 19–24. CEUR-WS.org, 2014.

[20] M. G. SkjA ↪eveland. Sgvizler: A javascript wrapper foreasy visualization of sparql result sets. In 9th ExtendedSemantic Web Conference (ESWC2012), May 2012.

[21] T. Stegemann and J. Ziegler. Semwidgjs: A semanticwidget library for the rapid development of userinterfaces for linked open data. In 44. Jahrestagungder Gesellschaft fur Informatik, Informatik 2014, BigData - Komplexitat meistern, 22.-26. September 2014in Stuttgart, Deutschland, pages 479–490, 2014.

[22] J. Tsay, L. Dabbish, and J. Herbsleb. Let’s talk aboutit: Evaluating contributions through discussion ingithub. In Proceedings of the 22Nd ACM SIGSOFTInternational Symposium on Foundations of SoftwareEngineering, FSE 2014, pages 144–154, New York,NY, USA, 2014. ACM.

[23] T. Vale, I. Crnkovic, E. S. de Almeida, P. A. da MotaSilveira Neto, Y. a Cerqueira Cavalcanti, and S. R.de Lemos Meira. Twenty-eight years ofcomponent-based software engineering. Journal ofSystems and Software, 2015.

[24] H. H. Wang, N. Gibbins, T. Payne, A. Patelli, andY. Wang. A survey of semantic web servicesformalisms. Concurrency and Computation: Practiceand Experience, 27(15):4053–4072, 2015.10.1002cpe.3481.