Core Concepts
shacl-vue
's functionality rests on several core concepts from its constituent technologies: SHACL, VueJS, N3.js, and shacl-tulip
.
SHACL
TIP
For a thorough understanding of SHACL, please refer to https://www.w3.org/TR/shacl/
The main concepts used from SHACL include the two types of shapes:
- shapes about the focus node itself, called node shapes [
sh:NodeShape
]- shapes about the values of a particular property or path for the focus node, called property shapes [
sh:PropertyShape
]
In terms of user interfaces, a NodeShape
would specify the schema for a complete form, while related PropertyShape
s would specify the schemas for individual fields in a form. Knowing the details of these schemas, i.e. knowing how they validate graph data, allows us to generate appropriate UI components for capturing valid data.
The details of these concepts include:
- targets specified for a
NodeShape
or aPropertyShape
which can indicate e.g. which class a set of data would have to be validated against nodeKind
, which specifies which kind of RDF node the field would constitute, such assh:IRI
orsh:BlankNode
.datatype
, which specifies what data type a field should have, e.g.string
ordatetime
In addition to specifications that can be used to render to correct field for a PropertyShape
and provide the associated validation rules, a SHACL shapes graph can also contain information to construct the layout of a form and make it more user-friendly. These are known as non-validating property shape characteristics:
sh:name
andsh:description
can be included to make a field more intuitive to a usersh:order
can be used to provide order to the fields of a formsh:group
specified on aPropertyShape
can tell the form builder whichsh:PropertyGroup
a field belongs to in terms of a grouping of themes or subsections in a form
Together, all of these concepts can be put together into a shapes graph in order to provide a full specification of a form and its fields, readily interpretable by a tool such as shacl-vue
, and ready to validate data on entry.
INFO
Currently, shacl-vue
does not yet support the full SHACL specification, only the basics. A complete list of supported SHACL features will follow. See https://www.w3.org/TR/shacl/#core-components for a complete list of SHACL's constraint components.
VueJS
shacl-vue
is implemented using VueJS 3, specifically the Composition API.
The application makes extensive use of:
- Vue Components to create standalone functional units that specify their own look and feel (
<template>
), their logic and state management code (<script setup>
), additional JavaScript code (<script>
), and any optional local styling (<style scoped>
). These components are the main driver behindshacl-vue
's ability to render different forms and fields based on the specifications in a SHACL schema. - Lifecycle hooks to run tasks during a component's life cycle, e.g. after creation or on mounting.
- Provide / Inject to share states between parent and child components
- Composables to manage generalizable and reusable code across components.
- Vuetify as a framework for existing UI components. Of note is the generic
v-input
which acts as a wrapper forshacl-vue
input components in order to standardize the API.
N3.js
N3.js is:
- an implementation of the RDF.js low-level specification that lets you handle RDF in JavaScript easily
- Lightning fast, spec-compatible, streaming RDF for JavaScript
shacl-vue
mainly uses N3.js, via shacl-tulip
, to:
- read RDF data into the application's graph store, which is managed as a VueJS-reactive
rdf.dataset()
- add quads to the graphh store
- traverse a graph in order to find specific nodes
shacl-tulip
In an effort to generalize shacl-vue
for improved use by and interoperability with other applications, the underlying functionality was factored out and packaged as the shacl-tulip
library (like "shacl-vue
-lib", but flowery).
shacl-tulip
provides the main (derived) classes for handling RDF data and related form data. It is completely independent of VueJS, yet class constructors allow passing reactive objects as arguments, which shacl-tulip
handles seamlessly. It also focuses purely on library-level functionality (including utilities that were previously part of shacl-vue
), and contains no frontend code. shacl-vue
imports shacl-tulip
classes and uses them mainly in its composable code.