Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Components.js

134 views

Published on

Presentation about Components.js, a semantic dependency injection framework, at The Web Conference 2018 (Developers Track).

https://github.com/LinkedSoftwareDependencies/Components.js

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Components.js

  1. 1. Ruben Taelman imec - Ghent University Components.js A semantic dependency injection framework
  2. 2. A car has swappable components
  3. 3. A car has swappable components
  4. 4. A car has swappable components
  5. 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. 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. 7. Soft-wiring with declarative instantiation let myCar = Loader.load('myCar-config.json'); myCar.drive(); + Flexible swapping of components - Extra layer of complexity
  8. 8. Components.js Dependency injection framework for JavaScript Declarative instantiation of components in external configuration file Semantic configuration file (RDF)
  9. 9. Components.js Terminology Module Component Instance
  10. 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. 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. 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. 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. 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. 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. 16. Get your hands on Components.js https://www.npmjs.com/package/componentsjs https://github.com/LinkedSoftwareDependencies/Components.js https://componentsjs.readthedocs.io/
  17. 17. Ruben Taelman - @rubensworks imec - Ghent University Components.js A semantic dependency injection framework
  18. 18. Demo: Real-world usage Comunica: a meta-query engine https://github.com/comunica/comunica
  19. 19. 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

×