Are you a front-end developer, interested in Solid, but unfamiliar with Linked Data? Try Tripledoc

Build a Solid App Developer Experience
1

There are a number of great libraries available for building Solid apps, such as LDflex for Solid and rdflib*. They’re very useful, but also primarily aimed at making life easy for developers already familiar with the concepts of Linked Data, RDF, etc.

Some of you will have seen glimpses of it already, but since it might be useful to others as well, here’s an explicit forum post to share Tripledoc.

Tripledoc was created while writing documentation for developers new to Solid. It that process, it turned out there was quite a distance between how the explanation of Solid’s concepts, and the code you would write. Thus, the main motivation for Tripledoc is to provide something that is:

  • Well documented.
  • Makes it as easy as possible to understand for developers with limited familiarity with Linked Data.

So where LDflex contains many clever shortcuts to make it easier to write Linked Data applications, Tripledoc will often be wordier - but hopefully with fewer surprises.

Check out the documentation, play around with it, and let me know what you think and how it works for you.

* I should also give a shout-out to @jeffz solid-file-client, which makes it easy to store arbitrary files on a Solid Pod. I’m mainly focusing on storing structured data here, though :slight_smile:

9 Likes
2

This sounds great. I like the idea very much. I tried the quick start link but am not seeing anything but Tim’s name underneath: The following name is fetched from https://www.w3.org/People/Berners-Lee/card:

Using Firefox on Android tablet. Same with Chrome on Android tablet.

2 Likes
3

Ah, thanks for the heads-up. It should show the source code next to it, but it probably doesn’t do that on a tablet screen size by default. You can click the little bar on the left-hand side to reveal and edit the code - though editing is probably easier on a full computer.

codesandbox
codesandbox767×808 119 KB

1 Like
4

Ah ok, I did get the source up by accident on Chrome but couldn’t close it! I was expecting some output under Tim’s name. Is it expected to be blank?

5

It’s just example code that fetches Tim’s name from his Pod to give a feel for how Tripledoc works, so yes, Tim’s name is the only output. Consider the area below it to be a blank canvas that you can fill with your own code :wink:

If you want a more elaborate example, the docs also point to a CodeSandbox with a note-taking app. (Which was the basis for my earlier post: Notepod, a note-taking app for Solid .)

1 Like
6

Tripledoc is really nice. One thing though, I get a 404 on clicking ‘read our guide to writing Solid apps’

7

Ah, well spotted! Fixed now, thanks for the heads-up :slight_smile:

1 Like
8

hi @Vincent looks really great! I really like your “Writing a Solid app” docs; I might give it a try and see if I can replicate a basic “notes” type app.

9

Excellent! Do not hesitate to ask any questions if things are unclear - with any luck, the answers will help others too :slight_smile:

10

do you have any cdn links to the relevant minified js files?

11

@Vincent gave me an example here

You can do

<script src="https://unpkg.com/rdflib/dist/rdflib.min.js"></script>
    <script>
      window.rdflib = window.$rdf;
    </script>
    <script src="https://unpkg.com/tripledoc@2.4/umd/index.js"></script>
    <script>
      Tripledoc.fetchDocument("https://vincentt.inrupt.net/profile/card").then(
        doc => console.log(doc))
</script>
2 Likes
12

thanks; that was helpful!

13

Hi @Vincent I’ve use Tripledoc 2.4 to integrate Notepod in a dashboard https://scenaristeur.github.io/compagent/notepod-i18n/ but I encountered an issue when I wanted to use websocket to refresh data.
I thought it was due to the cache of Tripledoc that didn’t parse a doc it has already parser. So looking to tripledoc doc I’ve seen that you have disabled caching :+1: . So I 've tried to use Tripledoc 3 but some change make my app going wrong :
Tripledoc now uses n3.js, and as I said in another topic, I want to use bundled librairies so that the app can be hosted on github-pages or on a Pod. But I was not able to create a bundle n3.js with browserify as @RubenVerborgh said.
Can someone help? Thxs

14

Hi @Smag0, I think I managed to get it to work by using a CDN that runs Browserify on the fly (specifically: https://wzrd.in). You can try out a demo here: https://codesandbox.io/s/hardcore-elion-11ko6

(Note that you can publish the output of a bundler like Webpack or Browserify to GitHub Pages or a Pod just fine, so I’d still recommend people reading along to use a bundler if they can, which should result in better performance by only shipping relevant code.)

15

@Vincent thxs it seems to work.
I know it’s a better to bundle all, but
I don’t want my app to be bundled so it could be editable on the POD, but i need dependencies to be bundled
:smirk:

16

:tired_face::sleepy:@Vincent doesn’t really work : https://gitlab.com/vincenttunru/tripledoc/issues/25

17

I’ve added a response there :slight_smile:

18

Hi @Vincent,
Regarding LongChat implementation,
I would like to add in a tripledoc doc a subject that refers to another file, something like ldflex

   await solid.data.from(this.fileUrl)[index]['http://www.w3.org/2005/01/wf/flow#message'].add(namedNode(messUri))

this.fileUrl is the doc url and index is a index.ttl#this stored in another folder

Here is the code with tripledoc after

Do you have any suggestions?
Thxs :slightly_smiling_face:

19

Hi @Smag0,

I’m not sure if I’m parsing the LDflex correctly, but I think that would be something like this:

const inbox = await fetchDocument(this.fileUrl);
const notification = inbox.getSubject(index);
notification.addRef('http://www.w3.org/2005/01/wf/flow#message', messUri);

Does that make sense?

(I’m guessing at the variable names, since I’m not entirely sure what it is you’re trying to do/what type of data you’re storing.)

20

Hello, what I need is to conform to the Solid LongChat spec, the last line with flow:message as a subject that is an URI from a parent folder

solid-panes/conventions.md at 8ee193d5d9d3c27b60d8e3d5ccda1aff1f0c82de · solid/solid-panes · GitHub,

I need to create /root/index.ttl#this as a subject in a /root/year/month/day/chat.ttl doc

Screenshot_20200811-190505_Chrome
Screenshot_20200811-190505_Chrome720×1280 250 KB