Keywords

These keywords were added by machine and not by the authors. This process is experimental and the keywords may be updated as the learning algorithm improves.

1 Introduction

With the growing number of structured data published, the Web is moving towards becoming a rich ecosystem of machine-understandable Linked DataFootnote 1. Semantically structured data facilitates a number of important aspects of information management such as information retrieval, search, visualization, customization, personalization and integration [11]. Despite all these benefits, Linked Data Applications (LDAs) are not yet adopted by the large community of Web developers outside the Semantic Web domain and, causally, by the end-users on the Web. The usage of semantic data is still quite limited and most of the currently published Linked Data is generated by a relatively small number of publishers [6] which points to entrance barriers for the wide-spread utilization of Linked Data [2].

The current communication gap between Semantic Web developers and User Experience (UX) designers, caused by the need to bear Semantic Web knowledge, prevents the streamlined flow of best practices from the UX community into Linked Data user interface (UI) development. The resulting lack of adoption and standardization often makes current LDAs inconsistent with user expectations and impels more development time and costs on LDA developers. In this situation, more time is spent in re-designing existing UIs rather than focusing on innovation and creation of sophisticated LDAs.

This paper presents the concept of Adaptive Linked Data-driven Web components together with its open source implementation available at http://ld-r.org to build flexible and reusable Semantic Web UIs. Web Components are a set of W3C standards [5] that enable the creation of custom, reusable user interface widgets or components in Web documents and Web applications. The Resource Description Framework (RDF), on the other hand, provides a common data model that allows data-driven components to be created, shared and integrated in a structured way across different applications. Linked Data-driven (LD-R) Web components as defined in this paper are a species of Web components that employ the RDF data model for representing their content and specification (i.e. metadata about the component). LD-R components are supported by a set of predefined core Web components, each representing a compartment of the RDF data model on the Web UI. Thus, the Semantic Web nature of an LDA can be encapsulated in LD-R components thereby allowing UX designers and Web developers outside the Semantic Web community to contribute to LDAs. The components also provide current Semantic Web developers with a mechanism to reuse existing Web components in their LDAs. Furthermore, LD-R components exploit the power and flexibility of the RDF data model in describing and sharing resources to provide a mechanism to adapt the Web interfaces based on the meaning of data and user-defined rules.

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

  • Bootstrapping LDA UIs. LD-R components exploit best practices from modern Web application development to bring an exhaustive architecture to perform separation of concerns and thereby bootstrapping an LDA by only selecting a minimal relevant configuration. For example, a developer only needs to set the URL of his in-use SPARQL endpoint and start developing the viewer components without dealing with the underlying connection adapters and data flow mediators in the system.

  • Standardization and Reusability of LDA UIs. Instead of creating an LDA UI from scratch, in the component-based development of LDA UIs, application assemblers choose from a set of standard UIs which will reduce the time and costs associated with the creation of LDAs. For example, to render DBpedia resources of type ‘Location’, a standard map can be reused.

  • Customization and Personalization of LDA UIs. The RDF-based nature of LD-R components allow application assemblers to reshape their user interface based on the meaning of data or user context. For example, for all the resources of type foaf:Person, the content can be rendered with a ‘ContactCard’ component.

  • Adoption of LDA UIs by non-Semantic Web developers and end-users. Most of the current Linked Data interfaces fall into the Pathetic Fallacy of RDF [10] where they display RDF data to the users as a graph because the underlying data model is a graph. Abstracting the complexity of RDF and graph-based data representation provides more Affordances [16] for non-Semantic Web users to contribute to Linked Data UIs. Engaging more UX designers and Web developers into LDA UIs will also result in more affordances on the end-user’s side to better understand the possible actions and advantages of the LDAs.

2 The Current Status of Linked Data UI Development

In order to understand the current pitfalls of LDA UI design, we conducted a survey targeting active Semantic Web developersFootnote 2. The participants where selected from the community of Semantic Web (SW) developers on Github who have had at least one active SW-related repository. Github is currently the most popular repository for open source code and its transparent environment implies a suitable basis for evaluating reuse and collaboration among developers [21]. We used Github APIs to searchFootnote 3 for SW repositories and to collect contact information for the corresponding contributors when available. The search, after removing organizations and invalid email addresses, resulted in 650 potential SW developers. We then contacted the candidates to ask them about the current pitfalls in developing LDA UIs. In our enquiry, we clearly mentioned to skip the questionnaire if they have not developed any SW application so far. We used a minimal set of 7 questions to attract more responses and also used inline forms for GMail users to allow filling out the questionnaire in the same time as reading the enquiry email. We collected 79 responses to our questionnaire, which is a considerable number of participants (almost 12 % of the potential candidates). Figure 1 shows the main results of our survey. Participants. Based on their LDA development experience, we divided the participants into three groups: basic (less than 2 applications), intermediate (3–5 applications) and advanced (more than 5 applications) developers. The result showed that the majority (62 %) of participants were intermediate and advanced developers. In addition to their development experience, developers were asked about their knowledge of Semantic Web to compare their practical and conceptual experience. As results revealed, the majority of participants (63 %) had proficient (4–5 years) and expert (more than 5 years) knowledge of Semantic Web and Linked Data which makes a good sample for our evaluation.

Fig. 1.
figure 1

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

Questions addressed the following topics:

  • Amount of time spent on bootstrapping LDA UIs. Before designing the UIs in an LDA, developers need to spend some time on creating the skeleton of their application where querying data and the business logic of the application is handled. The results confirm that developers spend a lot of time (on average more than 2 days) on bootstrapping their LDAs before they can start working on the UI.

  • Reuse of code by Semantic Web developers. Developers usually reuse sections of code, templates, functions, and objects to save time and resources when developing LDAs. We asked participants about two types of reuse: reuse by copy/pasting code from existing LDAs and reuse by employing current Web components. Reuse by copy/pasting code can be seen as an indicator of the state of standardization, modularity and reusability of current LDAs. The results indicate that a considerable amount of users (46 %), prefer to write the code from scratch instead of reusing code from existing Semantic Web projects. This situation is more pronounced for basic developers who still prefer to write the code from scratch although they have less experience in programming LDAs. Furthermore, the results on reuse of Web components give an insight on the adoption of current Web Components by Semantic Web developers. The results indicate that despite the prevalence of Web Components solutions, only 19 % of the participants (mainly advanced users) were employing them in their applications. Interestingly, the majority of participants (49 %) were already reusing other component-like libraries which shows an attitude and capacity towards adopting the Web components.

  • Adaptation of LDA UIs. Most of the modern Web applications provide a mechanism to customize and personalize their user interfaces based on the type of data and the information needs of their end-users. Proactive user interface adaptation allows the application to act more like a human and consequently, more intelligently [9]. As our study shows, within the current LDA developers, 52 % had experience adapting the user interface of their applications frequently. There were also 32 % that were doing the UI adaptation but not frequently.

  • Adoption issues with non-Semantic Web developers. In order to examine if there is a communication gap between UI designers and Semantic Web developers, we asked the participants about their experience when collaborating with a non-SW developer. Among the participants, 51 % had communication issues with non-Semantic Web developers to familiarize them with Semantic Web concepts before they can start contributing to the application. The distribution of this issue among more experienced developers (57 % of the intermediate and advanced users) further emphasizes the importance of this communication gap.

3 Adaptive Linked Data-Driven Web Components

In order to streamline the process of UI development in LDAs, we propose an architecture of adaptive LD-R Web components – Web components enriched by the RDF data model. The proposed architecture addresses LDA UI reusability and flexibility by incorporating RDF-based Web components and scopes. In the following sections, the main elements of the architecture are described:

3.1 LD-R Web Components

As depicted in Fig. 2, there are four core component levels in an LD-R Web application. Each core component abstracts the actions required for retrieving and updating the graph-based data and provides a basis for user-defined components to interact with Linked Data in three modes: view, edit and browse.

Fig. 2.
figure 2

(Left) core LD-R Web components. (Right) LD-R scopes based on the permutation of dataset, resource, property and value identifiers.

The data-flow in the system starts from the Dataset component which handles all the events related to a set of resources under a named graph identified by a URI. The next level is the Resource component which is identified by a URI and indicates what is described in the application. A resource is described by a set of properties which are handled by the Property component. Properties can be either individual or aggregate when combining multiple features of a resource (e.g. a component that combines longitude and latitude properties; start date and end date properties for a date range, etc.). Each property is instantiated by an individual value or multiple values in case of an aggregate object. The value(s) of properties are controlled by the Value component. In turn, Value components invoke different components to view, edit and browse the property values. Viewer, Editor and Browser components are terminals in the LD-R single directional data flow where customized user-generated components can be plugged into the system.

User interactions with the LD-R components are controlled by a set of configurations defined on one or more selected component levels known as scopes.

3.2 Scopes and Configurations

LD-R Web components provide a versatile approach for context adaptation. A context can be a specific domain of interest, a specific user requirement or both. In order to enable customization and personalization, the LD-R approach exploits the concepts of Scope and Configuration. A scope is defined as a hierarchical permutation of Dataset, Resource, Property and Value components (cf. Fig. 2). Each scope conveys a certain level of specificity on a given context ranging from 1 (most specific) to 15 (least specific). Scopes are defined by using either the URIs of named graphs, resources and properties, or by identifying the resource types and data types. A configuration is defined as a setting which affects the way the LDA and Web components are interpreted and rendered (e.g. render a specific component for a specific RDF property or enforce a component to display Wikipedia page URIs for DBpedia resources). UI adaptation is handled by traversing the configurations for scopes, populating the configurations and overwriting them when a more specific applicable scope is found.

Scopes can also be defined on a per user basis, facilitating the versioning and reuse of user-specific configurations. User-Specific configurations provide different views on components and thereby data, based on the different personas dealing with them. In addition to the fine-grained component customization, LD-R Web applications provide a fine-grained access control over the data through the component scopes. For example, an application developer can restrict access to a specific property of a specific resource in a certain dataset and on a specific interaction mode.

3.3 Semantic Markup for Web Components

The innate support of RDF in LD-R Web components enable the automatic creation of semantic markup on the UI level. Lower semantic techniques such as RDFa, Mircodata and JSON-LD can be incorporated in the core LD-R components to expose structured data to current search engines which are capable of parsing semantic markup. For example, an LD-R component created based on the Good Relations or schema.org ontologies, can automatically expose the product data as Google Rich Snippets for products which will provide better visibility of the data on Web search results (i.e. SEO). In addition to automatic annotation of data provided by the LD-R Web components, the approach offers semi-automatic markup of Web components by creating component metadata. Component metadata consists of two categories of markup:

  • Automatic markup generated by parsing component package specification – metadata about the component and its dependencies. It includes general metadata such as name, description, version, homepage, author as well as technical metadata on component source repository and dependencies.

  • Manual markup created by component authors which exposes metadata such as component level (dataset, resource, property, value), granularity (individual, aggregate), mode (view, edit, browse) and configuration parameters specification.

Similar to content markup, Component markup can utilize commonly-known ontologies such as schema.org in order to improve the visibility of LD-R components and enable application assemblers to better understand the intended usage and capabilities of a given component.

Fig. 3.
figure 3

LD-R components life cycle.

3.4 Stackeholders and Life Cycle

As shown in Fig. 3, the LD-R components lifecycle encompasses four primary types of stakeholders:

  • Linked Data Provider. Since the LD-R approach focuses mainly on Linked Data applications, the provision of RDF-compliant data is an essential phase in developing the LD-R components. There are different stages [1] in Linked Data provision, including data extraction, storage, interlinking, enrichment, quality analysis and repair which should be taken into account by data scientists and Linked Data experts. Once the data and schemata are provided to the LD-R component system, the system can bring a reciprocal value to Linked Data providers to better understand and curate the data when needed. For example, in the case of geo-coordinates, a map component can enable data providers to easily curate the outlier data (e.g. ambiguous entities) within a certain geo boundary in a visual manner.

  • Component Developer. Component developers are UX designers and Web programmers who are involved in component fabrication. There are two types of Web components developed in this step: (a) Core components (cf. Fig. 2) which abstract the underlying RDF data model. These components are built-in to the system, however can still be overwritten by developers who have proficiency in Semantic Web and Linked Data. (b) Community-driven components which exploit the core components. These components are either created from scratch or by remixing and repurposing existing Web components found on the Web.

  • Application Assembler. The main task of application assemblers is to identify the right components and configurations for the application; and to combine them in a way which fits the application requirements. Within the LD-R component system, the metadata provided by each Web component facilitates the discovery of relevant components. Having shared vocabularies on Linked Open Data allows assemblers to not only reuse components but also reuse the existing configurations and scopes published on the Web. For example, if there is already a suitable configuration for RP scope which uses foaf:Person as resource type and  dcterms:description as property URI, the assembler can reuse that configuration within his application.

  • End-User. End-users experience working with the components to pursue goals in a certain application domain. As such, they may request the development of new components or configurations in order to fulfil their requirements and are expected to provide feedback on existing components.

4 Implementation

In order to realize the idea of adaptive Linked Data-driven Web components, we implemented an open-source software framework called Linked Data Reactor (LD-Reactor) which is available online at http://ld-r.org. LD-Reactor utilizes Facebook’s ReactJSFootnote 4 components, the FluxFootnote 5 architecture, Yahoo!’s FluxibleFootnote 6 framework for isomorphic Web applications (i.e. running the components code both on the server and the client) and the Semantic-UIFootnote 7 framework for flexible UI themes. The main reasons we chose React components over other Web Components solutions (e.g. Polymer, AngularJS, EmberJS, etc.) were the maturity and maintainability of the technology, the native multi-platform support, the number of developer tools/components/applications, and the efficiency of its underlying virtual DOM approach.

Fig. 4.
figure 4

Data flow in the LD-Reactor framework.

As shown in Fig. 4, LD-Reactor follows the Flux architecture which eschews MVC (Model-View-Controller) in favour of a unidirectional data flow. When a user interacts with a React component, the component propagates an action through a central dispatcher, to the various stores that hold the application’s data and business logic, and updates all affected components. The component interaction with SPARQL endpoints to retrieve and update Linked Data occurs through the invocation of RESTful services in actions.

In order to allow the bootstrapping of LDA UIs, LD-Reactor provides a comprehensive framework that combines the following main elements:

  • A set of RESTful Web services that allow basic CRUD operations on Linked Data using SPARQL queriesFootnote 8.

  • A set of core components called Reactors which implement core Linked Data components (see Fig. 2) 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 the type of data and properties from commonly-used vocabularies (e.g. foaf, dcterms and SKOS).

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

LD-Reactor implementation is compliant with Microservices Architecture [13] where the existing ReactJS components can be extended by complementary LD services. In contrast to the centralized monolithic architecture, the microservices architecture allows placing the main functionalities of the LDA into separate decoupled services and scale by distributing these services across servers, replicating as needed. This architectural style also helps to minimize the redeploying of the entire application when changes in components were requested.

Semantic markup of data (as discussed in Sect. 3.3) is supported natively within the framework by embedding Microdata annotations within the LD-R Web components. Additionally, in order to facilitate the creation of component metadata, we developed a toolFootnote 9 which automatically generates the general metadata about the components in JSON-LD, using schema.org’s SoftwareApplication schema.

5 Use Cases

The LD-Reactor framework is already in use within the RISISFootnote 10 and Open PHACTSFootnote 11 projects.

5.1 RISIS

The RISIS project aims to provide an infrastructure for research and innovation, targeting researchers from various science and technology domains. The LD-Reactor framework was utilized in RISIS to help data providers with no Linked Data experience to provide RDF metadata about their datasetsFootnote 12. This metadata is then used to allow researchers to search, identify, and request access to the data they are interested inFootnote 13.

In the following, we present the main requirements for configurations and components, together with their representation in the LD-Reactor frameworkFootnote 14.

Configurations:

  • The UI should be able to render metadata properties in different categories.

  • The labels for properties should be changeable in the UI especially for technical properties (e.g. RDF dump) that are unknown to researchers outside the Semantic Web domain.

  • There should be a hint for properties to help metadata editors to understand the meaning of the property.

  • Instead of showing the full URIs, the output UI should render either a shortened URI or a meaningful string linked to the original URI.

  • Whenever a DBpedia URI is provided, display the corresponding Wikipedia URI enabling users to retrieve human readable information.

  • When a dropdown menu is provided, there should be the ability to accommodate user-defined values which are not listed in the menu.

Components:

  • A component for dcterms:spatial values to allow searching and inserting resources from DBpedia based on the entity type (e.g. Place, Organization, etc.).

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

  • A component for dcterms:language values to allow inserting 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 inserting and viewing file size specified by a unit.

  • A component for dcterms:format values to allow inserting and viewing mime types.

In accordance to the LD-Reactor microservices architecture (cf. Sect. 4), we built a DBpediaGMap viewer component where we reused the current react-google-maps together with DBpedia lookup and query services to retrieve the coordinates for the recognized DBpedia resource values.

5.2 Open PHACTS

The Open PHACTS Discovery Platform has been developed to reduce barriers to drug discovery, by collecting and integrating a large number of prominent RDF datasets in the pharmacology domain. The platform provides a uniform RESTful API for application developers to access the integrated data. In collaboration with the data providers, the Open PHACTS consortium has created a comprehensive dataset description specificationFootnote 15 based on the Vocabulary of Interlinked Datasets (VoID)Footnote 16. The metadata provided in this context enables (among others) exposing the detailed provenance for each result produced by the platform, the location of source files for each dataset, and example resources.

The provision of VoID dataset descriptors that adhere to the specification proved to be a non-trivial challenge, even for data providers that are well versed in providing RDF distributions of their core data. A series of UIs were therefore created to facilitate the creation of the VoID descriptors. However, as the specification evolved over the first 2 years of the project, any changes or additions made had to be reflected in the UI source code as well; a cumbersome process. Due to the inevitable delay between specification changes and UI development, users often found themselves having to edit large RDF files using text editors, which resulted in frequent syntax errors being made.

A new version of the VoID editor implemented using the LD-Reactor framework is now available onlineFootnote 17. Though the import/export capabilities of the editor are still not implemented at the time of writing, we have received very positive feedback from the community for a number of reasons:

Fig. 5.
figure 5

(Left) screenshot of RISIS VoID editor. (Right) screenshot of the BasicCalendarInput component for editing datetime values in Open PHACTS.

  • UI updates: As the UI is generated based on the underlying data, the process of staying up to date with the current specification becomes trivial. The RDF example provided by the specification can be simply loaded into the RDF store and the changes are immediately visible in the UI through the default core components. Users are then able to adapt the example VoID description to their dataset. The resulting VoID file can be downloaded by exporting all triples in the named graph corresponding to the dataset.

  • Dataset releases: A large number of property values remain the same across releases. Similarly with using the example from the Dataset Description Specification, users are able to upload their old VoID description and only edit the outdated values.

  • Access control: Using the built–in user authentication mechanism of LD-Reactor we were able to ensure that only the owner(s) of a particular dataset are able to edit its metadata.

  • Non-standard properties: Some data providers elect to include additional properties that are not prescribed by the specification. The visualisation of such properties is supported easily using the core LD-R components.

  • Intuitive navigation: Typically, each dataset consists of a number of subsets, which are also of type void:Dataset, and may have further subsets themselves. Displaying all the information together can easily become confusing for the user; instead the LD-Reactor framework was used to provide navigation through the subset links, displaying only a single dataset (or subset) at a time.

  • Datetime component: Manually typing datetimes in the required format (e.g. ‘2015-02-12T16:48:00Z’) can be an error prone process. Instead, we have been able to reuse the react-bootstrap-datetimepicker component, to create a new LD-R value editor for datetimes (BasicCalendarInputFootnote 18) with a graphical interface as shown in Fig. 5.

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

6 Related Work

Component-based software engineering (CBSE) has been an active research area since 1987 with numerous results published in the research literature [22]. Within the Semantic Web community, the main focus has been on enriching current service-oriented architectures (SOAs) with semantic formalisms and thereby providing Semantic Web services as reusable and scalable software components [23]. There have also been a few attempts to create Semantic Web Components by integrating existing Web-based components with Semantic Web technology [3, 7].

When it comes to component-based development of LDAs, the works typically fall into software application frameworks that address building scalable LDAs in a modular way. The survey conducted by [8] identified the main issues in current Semantic Web applications and suggested the provision of component-based software frameworks as a potential solution to the issues identified. The Semantic Web Framework [4] was one of the first attempts in that direction to decompose the LDA development requirements into an architecture of reusable software components. In most of the current full-stack LDA frameworks such as CallimachusFootnote 19 and LDIFFootnote 20 the focus is mainly on the backend side of LDAs and less attention is paid on how Linked Data is consumed by the end-user. There are also more flexible application frameworks such as OntoWiki [6] which provide UI widgets and extensions to expose Linked Data to non-SW end-users.

Besides these generic LDA frameworks, there are also approaches that focus on the development of user interfaces for LDAs. WYSIWYM (What You See Is What You Mean) [12] is a generic semantics-based UI model to allow integrated visualization, exploration and authoring of structured and unstructured data. Our proposed approach utilizes the WYSIWYM model for binding RDF-based data to viewer, editor and browser UIs. Uduvudu [14] is another approach to making an adaptive RDF-based UI engine to render LD. Instead of adopting Web components, Uduvudu employs a set of flexible UI templates that can be combined to create complex UIs. Even though the static templates do not provide enough interactions for editing and browsing data (in contrast to Web components), we believe that algorithms for automatic selection of templates employed in Uduvudu can be reused in the LD-Reactor framework for automatic generation of configurations. Another similar approach is SemwidgJS [20] which brings a semantic Widget library for the rapid development of LDA UIs. SemwidgJS offers a simplified query language to allow the navigation of graph-based data by ordinary Web developers. The main difference between LD-R and SemwidgJS is that LD-Reactor suggests a more interactive model which is not only for displaying LD but also for providing user adaptations based on the meaning of data. LD-Viewer [15] is another related Linked Data presentation framework particularly tailored for the presentation of DBpedia resources. In contrast to LD-Reactor, LD-Viewer builds on top of the traditional MVC architecture and its extensions rely heavily on the knowledge of RDF which is a burden for developers unfamiliar with SW technologies.

In addition to the LDA UI frameworks, there are several ad-hoc tools for Linked Data visualization and exploration such as Balloon Synopsis [18] and Sgvizler [19] which can be utilized as Web components within the LD-Reactor framework. [17] provides an extensive list of these tools aiming to make Linked Data accessible for common end-users who are not familiar with Semantic Web.

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

7 Conclusion and Future Work

This paper presented adaptive Linked Data-driven Web components as a solution to increase the usability of current Linked Data applications. The proposed component-based solution emphasizes the reusability and separation of concerns in respect to developing Linked Data applications. The RDF-based UI adaptation mechanism aims to provide better customization and personalization based on the meaning of data. Furthermore, employing standard Web components aspires to bring a better communication between UX designers and Semantic Web developers in order to reuse best UI practices within Linked Data applications.

We argue that bridging the gap between Semantic Web Technologies and Web Components worlds brings mutual benefits for both sides. On one hand, SW technologies provide support for richer component discovery, interoperability, integration, and adaptation on the Web. On the other, Web Components bring the advantages of UI standardization, reusability, replaceability and encapsulation to current Semantic Web applications.

As our future plan, we envisage creating a cloud infrastructure for sharing and reusing LD-R scopes and configurations as well as LD-R Web components without the need to install the framework. We also plan to make a user interface to facilitate creation of the LD-R scopes and configurations. Another direction for future research is developing mechanisms for the automatic configuration and composition of Web components based on the semantic markup provided.