SOCOM Tutorial Slides - LDflex

LDflex Tutorial

• First part: Introduction to LDflex


• Second part: Hands-on
  • 1. LDflex playground
  • 2. LDflex on React

What is LDflex?

• A JavaScript-like domain-specific language for simple Linked Data querying using path-based expressions
• 

Traverse Linked Data as JS objects

            await [https://julianrojas.org/#me].name // "Julián Rojas"
      

Traverse Linked Data as JS objects

          await [https://julianrojas.org/#me].name // "Julián Rojas"
  
          await [https://julianrojas.org/#me].friends.name // ["Ruben Verborgh", "Ruben Taelman", ...]
      

How does it work?

Thanks to JSON-LD contexts and JavaScript Proxies we can treat Linked Data graphs as local objects

The await keyword allows waiting for remote HTTP requests

JSON-LD contexts for semantics

• JSON-LD contexts provide unambiguous semantics to access data. For example this:

              {
                "@context": {
                  "foaf": "http://xmlns.com/foaf/0.1/",
                  "name": "foaf:name",
                  "friends": "foaf:knows",
                  ...
                }
              }
            

• Allows this:

            [something].name === [something][http://xmlns.com/foaf/0.1/name]
          

Transparent data access

JavaScript Proxies enable LDflex processors to translate path expressions to SPARQL queries and resolve them through a query engine (e.g. Comunica)

•               await [https://julianrojas.org/#me].name  
          

• 

•               SELECT ?name WHERE {
                  <https://julianrojas.org/#me> <http://xmlns.com/foaf/0.1/name> ?name.
                }
          

Support for data writing

LDflex allows for writing/updating knowledge graphs that support SPARQL UPDATE operations such as SPARQL endpoints and Solid pods.

For example this expression:

        await [https://julianrojas.solid.org/profile/#me].add('foaf:givenName' , 'Julian');
      

Will be translated to this SPARQL UPDATE query:

        INSERT DATA {
          <https://julianrojas.solid.org/profile/#me> 
            <http://xmlns.com/foaf/0.1/givenName> "Julian".
        }
      

LDFlex is Solid compliant

Through Comunica, LDflex uses the solid-auth-client to ensure that only authorized clients can read/write data from/to Solid pods

Hands-on 1: LDflex playground

Find the play ground at https://solid.github.io/ldflex-playground

Hands-on 2: LDflex on React

Goal: Cover the basics on building React applications that use LDflex to query Knowledge Graphs on the Web.

This tutorial will introduce how to reuse existing React components that use LDflex. It will also introduce how can you create your own components that query Knowledge Graphs on the Web.

No advanced JavaScript or React knowledge required, we start from scratch

Hands-on: requirements

• git: cloning the starting code
• Node.js (version 8.0 or higher): running the code
• A JavaScript editor (we will use Visual Studio Code): editing the code

Hands-on 2: getting started

Each step is explained in detail on the GitHub wiki:

https://github.com/julianrojas87/Tutorial-ISWC2019-LDflex-on-React/wiki/Tutorial-Walkthrough