Querying the decentralized Web with JavaScript

Ruben Verborgh, Ghent University – imec

GhentJS Meetup, 10 April 2019

Querying the decentralized Web with JavaScript

Ruben Verborgh

Ghent University – imec

Orange is
the new black.

Blockchain is
the new JavaScript.

GraphQL is
the new REST.

Future Web apps will access
data from different people
from different places.

That’s why, at UGent/imec,
we are querying the Web
with JavaScript.

JSON documents only have meaning
with respect to one source. 


{

  "name": "Jane Doe",
  "jobTitle": "developer",
  "telephone": "(425) 123-4567"
}

JSON-LD documents only have meaning
with respect to entire Web. 


{
  "@context": "http://schema.org/",
  "name": "Jane Doe",
  "jobTitle": "developer",
  "telephone": "(425) 123-4567"
}

JSON-LD uses URLs under the hood
to create universal meaning. 


{
  "@context": "http://schema.org/",
  "http://schema.org/name": "Jane Doe",
  "http://schema.org/jobTitle": "developer",
  "http://schema.org/telephone": "(425) 123-4567"
}

GraphQL queries only have meaning
with respect to one source. 




# List 50 people and their names
{
  person(first:50) {
    name
  }
}

GraphQL queries only have meaning
with respect to one source. 




# List 50 people and their names
{
  users(first:50) {
    fullName
  }
}

GraphQL queries only have meaning
with respect to one source. 




# List 50 people and their names
{
  friends(first:10) {
    displayName
  }
}

SPARQL queries have universal meaning
across all possible sources. 

PREFIX dbo:  <http://dbpedia.org/ontology/>
PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

# List 50 people and their names
SELECT * {
  ?person a dbo:Person;
          rdfs:label ?name.
}
LIMIT 50

We can separate language from API:
this query runs partially client-side.

The Comunica engine executes queries.
It's written in TypeScript and open source.

Try it out at github.com/comunica.

Create a client-side query engine,
and pass it a query and source. 

import { newEngine } from '@comunica/actor-init-sparql';
const engine = newEngine();

async function printResults(sparql, source) {
  const result = await engine.query(sparql,
    sources: [ { type: 'hypermedia', value: source } ]);
  result.bindingsStream.on('data', data =>
    console.log(data.toObject()));
}

Comunica especially shines when
executing queries across multiple APIs.

The Web brings freedom of expression
to everyone across the world.

The Web brings permissionless innovation
at a global scale.

Permissionless innovation has brought
unprecedented creativity to the world.

Our data has become centralized
in a handful of Web platforms.

Within the walled gardens of social media,
you have to move either data or people.

© David Simonds

The current massive centralization
hurts diversity, innovation, and choice.

This is for everyone #london2012 #oneweb #openingceremony @webfoundation @w3c

Tim Berners-Lee July 27, 2012

Solid is about choice.

The Solid ecosystem enables people to pick the apps they need, while
storing their data wherever they want.

People control their data, and share it
with the apps and people they choose.

[the Solid logo]

People choose where they store
every single piece of data they produce.

They can grant apps and people access
to very specific parts of their data.

Separating app and storage competition
drives permissionless innovation.

Solid is not a company or organisation.
Solid is not (just) software.

[the Solid logo]

The Solid server acts as a data pod
that stores and guards your data.

A typical data pod can contain
any data you create or need online.

Solid clients are browser or native apps
that read from or write to your data pod.

Any app you can envision,
you can build with Solid.

We aim to bring the Solid experience
to people all over the world.

2014
start of Solid at MIT
Oct 2018
launch of Inrupt
Jan 2019
developer toolkit & common UX
early 2019
MVP of the ecosystem
today
you become involved? 😉

Decentralized apps have many back-ends. Back-ends work with many apps.

Interoperability challenges in Solid
are solved through Linked Data.

With JSON-LD, every piece of data
can link to any other piece of data. 

{
  "@context":  "https://www.w3.org/ns/activitystreams",
  "id":        "#ruben-likes-ghentjs",
  "type":      "Like",
  "actor":     "https://ruben.verborgh.org/profile/#me",
  "object":    "https://javascript.gent/#this",
  "published": "2019-04-10T20:00:00Z"
}

Data shapes and their semantics
enable layered compatibility. 

{
  "@context":  "https://www.w3.org/ns/activitystreams",
  "id":        "#ruben-likes-ghentjs",
  "type":      "Like",
  "actor":     "https://ruben.verborgh.org/profile/#me",
  "object":    "https://javascript.gent/#this",
  "published": "2019-04-10T20:00:00Z"
}

Different source data
can be concatenated. 

{
  "@context":  "https://www.w3.org/ns/activitystreams",
  "@graph": [{
    "type":      "Like",
    "actor":     "https://ruben.verborgh.org/profile/#me",
    "object":    "https://javascript.gent/#this",
    "published": "2019-04-10T20:00:00Z"
  },{
    "type":      "Like",
    "actor":     "https://example.org/people/klaas#me",
    "object":    "https://javascript.gent/#this",
    "published": "2019-04-10T20:05:00Z"
  }]
}

The current approach to building APIs
does not play well with decentralization.

When clients do not bind to HTTP requests,
APIs can evolve independently of app logic.

The developer experience is the most
crucial factor for Solid success.

LDflex exposes Linked Data’s flexibility without having to learn new tricks.

LDflex is a domain-specific language
for JavaScript.

A JavaScript Proxy can make
an object behave in any way.

Solid taps into existing experiences
such as React. 

<LoggedIn>
  <p>Welcome, <Value src="user.firstName"/></p>
  <Image src="user.image" defaultSrc="profile.svg"/>
  <ul>
    <li><Link href="user.inbox">Your inbox</Link></li>
    <li><Link href="user.homepage">Your homepage</Link></li>
  </ul>
  <h2>Your friends</h2>
  <List src="user.friends.firstName"/>
</LoggedIn>

Data access is simplified through
LDflex expressions for data. 

<LoggedIn>
  <p>Welcome, <Value src="user.firstName"/></p>
  <Image src="user.image" defaultSrc="profile.svg"/>
  <ul>
    <li><Link href="user.inbox">Your inbox</Link></li>
    <li><Link href="user.homepage">Your homepage</Link></li>
  </ul>
  <h2>Your friends</h2>
  <List src="user.friends.firstName"/>
</LoggedIn>

On the future Web,
people will control their data,
 which they will store everywhere.

A new developer experience is emerging
and queries will play a major role.

See you on solid.inrupt.com!

At Ghent University – imec, we are actively
looking to collaborate on the next Web.

Talk to me about:

Querying the decentralized Web with JavaScript

@RubenVerborgh