How a Turtle file can describe your application frontend

Like most of our community members I am a developer. Over the past years, I specialised in Semantic Web, particularly I got proficient in SKOS based Knowledge Graphs enriched with custom ontologies. RDF all the way! Frontend frameworks are not my strong suit and I would choose a RDF based solution anyday.

As you might already get the feeling (and because the title gives it away), I am building up a story lobbying for having frontends built in RDF. So I was pretty flabbergasted when I found out this is already possible! Let me show you exactly how.

A short note about my goal.

I have a Pod with my data on it and I want to create an application to showcase some of this data. I know RDF modelling, basic HTML and CSS. How can I do this? The screenshots in Figure 1 exemplify what I want to achieve. I need to get from RDF to a HTML page.


Figure 1: Ramen application description in RDF rendered as a Web App with HTML & CSS

Let’s get into the technical details. To help me achieve my goal, my colleague from SolidOS, Jeff Zucker, created a prototype library written in JS. Jeff’s prototype library is built on top of a SolidOS stack library, the solid-ui. (Solid-ui is part of what most of the community knows as mashlib.) Jeff’s lib, called solid-ui-components, adds some fancy elements, like accordions (the menus on the left in the HTML page), and a seamless loading of RDF resources to make it possible to build easy and fast cool frontends.

Solid-ui-components and solid-ui both can interpret and translate to HTML a frontend RDF resource. This particular RDF resource we call a form. A form describes how the application looks like through using the UI ontology created by Sir Tim Berners-Lee. Hence the UI is written in Turtle. A snippet example is shown in Figure 2. 


Figure 2: An accordion element for the frontend menu filled with a SPARQL query

The menu items are dynamically filled by making use of a SPARQL engine like Comunica. The Comunica JS lib can be imported directly in HTML. An alternative is to not use Comunica at all, case in which there is a default packed SPARQL query engine for basic querying (packed in rdflib, a dependency of mashlib and solid-ui).

The rest of the application is a basic one page HTML and CSS. I didn't even write my own CSS but I used an existing framework called Simple CSS.

The one page HTML application is now deployed on my own Pod provisioned at solidcommunity.net. But it can, as well, be deployed on your favourite hosting platform.

All the needed data is on my Pod but that is not mandatory. The raw data and the form could be on any other Pod (the app needs to have access and for now it does not make use of any ACL or ACP process). Visit the resulting demo application on my Pod over at Solid Hello Worlds.

This shows me yet again, the future is closer than we think, we just have to be brave to imagine it.

Pod on!

Next reading in this series -> Frontends that let you edit the data: RDF forms for Solid.

Resources:

Modified
Published
Language
English
Document Status
Published