1. Ruben Taelman
imec - Ghent University
Components.js
A semantic dependency injection framework

2. A car has swappable components

3. A car has swappable components

4. A car has swappable components

5. Hard-wiring: Instantiate programmatically
let myCar = new Porsche356B({
color: 'ruby red',
engine: new V8Engine(),
tireFrontLeft: new MichelinLTXMS2(),
tireFrontRight: new MichelinLTXMS2(),
tireBackLeft: new MichelinLTXMS2(),
tireBackRight: new MichelinLTXMS2(),
});
myCar.drive();
+ Easy
- Less flexible swapping of components

6. Dependency Injection to the rescue!
let myCar = new Porsche356B({
color: 'ruby red',
engine: new V8Engine(),
tireFrontLeft: new MichelinLTXMS2(),
tireFrontRight: new MichelinLTXMS2(),
tireBackLeft: new MichelinLTXMS2(),
tireBackRight: new MichelinLTXMS2(),
});
myCar.drive();

7. Soft-wiring with declarative instantiation
let myCar = Loader.load('myCar-config.json');
myCar.drive();
+ Flexible swapping of components
- Extra layer of complexity

8. Components.js
Dependency injection framework for JavaScript
Declarative instantiation of components in external configuration file
Semantic configuration file (RDF)

9. Components.js Terminology
Module
Component
Instance

10. Components.js Terminology
Collection of components (e.g., a software package)
Something that can be instantiated (e.g., a class)
An instantiated Component
Module
Component
Instance

11. Components.js Terminology
Module
Component
Instance
Modules file
Configuration file
Collection of components (e.g., a software package)
Something that can be instantiated (e.g., a class)
An instantiated Component

12. Components.js configuration of a car
{
"@context": ...
"@id": "ex:myCar",
"@type": "porsche:356B",
"wheelFrontLeft": { "@type": "michelin:LTXMS2" },
"wheelFrontRight": { "@type": "michelin:LTXMS2" },
"wheelBackLeft": { "@type": "michelin:LTXMS2" },
"wheelBackRight": { "@type": "michelin:LTXMS2" },
"engine": { "@type": "leon:V8" }
}
JSON-LD, or any other RDF serialization
Configuration file

13. Components.js configuration of a car
{
"@context": ...
"@id": "ex:myCar",
"@type": "porsche:356B",
"wheelFrontLeft": { "@type": "michelin:LTXMS2" },
"wheelFrontRight": { "@type": "michelin:LTXMS2" },
"wheelBackLeft": { "@type": "michelin:LTXMS2" },
"wheelBackRight": { "@type": "michelin:LTXMS2" },
"engine": { "@type": "leon:V8" }
}
JSON-LD, or any other RDF serialization
URI of a component
Configuration file

14. Declarative component type description
{
"@context": …,
"@id": "porsche:module",
"@type": "Module",
"components": [{
"@id": "porsche:356B",
"@type": "Class",
"parameters": [
{ "@id": "porsche:356B/wheelFrontLeft", "unique": true },
{ "@id": "porsche:356B/wheelFrontRight", "unique": true },
{ "@id": "porsche:356B/wheelBackLeft", "unique": true },
{ "@id": "porsche:356B/wheelBackRight", "unique": true },
{ "@id": "porsche:356B/engine", "unique": true },
]
}, ...]
}
A module is a collection of components
Modules file

15. Declarative component type description
{
"@context": …,
"@id": "porsche:module",
"@type": "Module",
"components": [ {
"@id": "porsche:356B",
"@type": "Class",
"parameters": [
{ "@id": "porsche:356B/wheelFrontLeft", "unique": true },
{ "@id": "porsche:356B/wheelFrontRight", "unique": true },
{ "@id": "porsche:356B/wheelBackLeft", "unique": true },
{ "@id": "porsche:356B/wheelBackRight", "unique": true },
{ "@id": "porsche:356B/engine", "unique": true },
]
}, ...]
}
A component corresponds to a JavaScript class
Modules file

16. Get your hands on Components.js
https://www.npmjs.com/package/componentsjs
https://github.com/LinkedSoftwareDependencies/Components.js
https://componentsjs.readthedocs.io/

17. Ruben Taelman - @rubensworks
imec - Ghent University
Components.js
A semantic dependency injection framework

19. Demo: Real-world usage
Comunica: a meta-query engine
https://github.com/comunica/comunica

20. Why semantic configuration files?
Unique identification of components and instances via URIs
Split up config files, combine over the Web
Config files are meaningful as they use standard vocabularies
All of the benefits of Linked Data
Any RDF-enabled application can work with these config files
Visualize the instance graph
Reasoners can check if parameter values are valid
Reasoners can generate a config file best suited for a given situation
SPARQL querying over your config file