Showcase for graphitejs - a music application

This site showcases two versions of a demo-application made to show some functionality of graphitejs, the framework created as part of Arne Hassel's master thesis.

Graphitejs is a AMD-based framework written in and for JavaScript (JS), designed to offer a multitude of interfaces toward handling data from the Semantic Web (SW). It loads and handles resources described with RDF, and enable querying by using SPARQL.

The demo-application is a simple web-application that lists a table with tracks, the music group that created it, and the album which it's available on. It also loads a set of users, which filter the tracks they listens to.

Requirements

Graphitejs requires the use of XMLHttpRequest Level 2, which is supported by most modern browsers (yes, even IE; at least IE9+).

Differences between version 1 and 2

Version 1 is built by using the API-module in graphitejs. This works like a facade-object, tying the two most important modules together, namely the Graph- and Query-module. In version 2 the facade is discarded, and the application uses the Graph-, Query-, and Loader-module directly.

This switching of modules are easily handled by require.js.

Underlying structure

The application's data is structured using Turtle and JSON-LD, two serializations of RDF.

It uses several vocabularies, as listed below:

In addition, I created my own vocabulary, specific to these demo-application, prefixed ma and localized as http://example.org/music/v1#. The terms used are described below:

  • ma:listensTo: a property stating the relation between a user and a track.
  • ma:spotify: a property stating the URI a track has to it's instance in Spotify, if any.
  • ma:User: a class, used to state a given resource as a user of the application.

The application uses jQuery to manipulate the DOM, and the jQuery-plugin jQuery.template() to handle the templating. The plugin doesn't always succeed to load, so you may have to refresh the page.