Developing Apps for a Decentralized Web

Ruben Verborgh, Ghent Universityimec

The Web Conference, 28 April 2022

Developing Apps for a Decentralized Web

Ruben Verborgh

Ghent University – imec

Solid aims to restore choice
by separating data from apps.

Every piece of data created by a person
or about them, is stored in a data pod.

Apps and services appear similarly,
but they blend data from many sources.

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

Separating app and storage competition
creates better offerings for all parties.

By abandoning data harvesting,
we restore permissionless innovation.

Solid is not a platform to replace others,
but a way of building for the Web.

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-thewebconf",
  "type":      "Like",
  "actor":     "https://ruben.verborgh.org/profile/#me",
  "object":    "https://www2022.thewebconf.org/#this",
  "published": "2022-04-28T08:00:00Z"
}

Data shapes and their semantics
enable layered compatibility.

{
  "@context":  "https://www.w3.org/ns/activitystreams",
  "id":        "#ruben-likes-thewebconf",
  "type":      "Like",
  "actor":     "https://ruben.verborgh.org/profile/#me",
  "object":    "https://www2022.thewebconf.org/#this",
  "published": "2022-04-28T08: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://www2022.thewebconf.org/#this",
    "published": "2022-04-28T08:00:00Z"
  },{
    "type":      "Like",
    "actor":     "http://tomayac.com/thomas_steiner.rdf#me",
    "object":    "https://www2022.thewebconf.org/#this",
    "published": "2022-04-28T10:00:00Z"
  }]
}

Apps, in some way,
read–write access to a knowledge graph.

[a browser app needs access to knowledge]

The graph is too big for any single place,
so apps reconstruct the whole via parts.

[apps operate parts of the knowledge graph]

When knowledge fits in a single source,
we can place an API in front of it.

[accessing knowledge hosted on a single server]

Abstract knowledge needs to be exposed
through concrete documents/resources.

[accessing knowledge through a single JSON API]

A GraphQL API combines data from across
multiple resources of the “main” API.

[GraphQL APIs can access multiple conceptual resources]

Let’s revisit API design for cases where
knowledge cannot fit in one place.

[an application needs to access a knowledge graph that is distributed across multiple servers]

Each data pod exposes its part
as RDF through a Web API.

[each server exposes an RDF API]

Different APIs for RDF
have different characteristics.

[RDF can be exposed through different APIs]

It quickly becomes unfeasible for apps
to deal with all possible API combinations.

[each server might expose the same knowledge through multiple APIs]

A GraphQL Web API is not possible here,
since there is no server to attach it to.

[we cannot attach a GraphQL API to any single server when the data resides in multiple servers]

The app can still be written with GraphQL:
a library translates it into HTTP requests.

[a client-side library translates GraphQL queries from the app into HTTP requests for different APIs and servers]

Solid technology marks a transition
from API integration to data integration.

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

The old way of working with RDF
followed the old way of JSON APIs.

The old way of working with RDF
in the browser is hard.

  1. Gather input data into a query.
  2. Send a specific API call the query.
  3. Parse the response as JSON RDF.
  4. Traverse the JSON tree RDF graph structure.
  5. Update the DOM.

Frameworks like React combines all steps
into a seamless component experience.

<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>

Reusable abstractions can be shared
between different frameworks.

<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>

LDflex exposes Linked Data’s flexibility without RDF’s complexity.

LDflex is a domain-specific language
for JavaScript.

Developing Apps for a Decentralized Web

@RubenVerborgh

ruben.verborgh.org