Browsing the imported Facebook mock data



In this section, we will browse through some of the (mock) Facebook data you imported previously and touch on:

Let’s look at the photos imported from Facebook, and introducing MeshObjects

Go back to the front page of your Docker container at http://localhost:1080/. Click on “Photo” (below the “Media” headline).

This will bring up the list of the (mock) photos our mock user supposedly has uploaded to Facebook. Scroll down a bit, and you should see a screen similar to the following:

On the left, we see the (mock) photos, and on the right side, the metadata exported by Facebook, such as when each photo was created.

Note the “Album” label next to some of the photos. Click this label, and you will see the Facebook album that contains this photo on Facebook – together with all the other photos in the same album.

You can click from the photo to the album, and to other photos in the same album, because the UBOS Personal Data Mesh keeps all the relationships in the source data: if Facebook said that a photo was part of an album, that’s also true on the UBOS Personal Data Mesh.


Data elements on the UBOS Personal Data Mesh are called MeshObjects. There is much to say about MeshObjects – for now, only a few tidbits:

  • MeshObjects may have types (here: photo vs album)
  • MeshObjects may have properties (like the “Created” timestamp), and
  • MeshObjects may have relationships to other MeshObjects (here: the relationship between the album and the photos it contains, so you could click from one to the other and back).

Most importantly: all personal data on the UBOS Personal Data Mesh is represented as MeshObjects. If you are looking for where data is stored, always look for a MeshObject (and not a database table or such).


Notice that all relationships between MeshObjects are bidirectional: you can traverse from a photo to the containing album, and from an album to any of the contained photos. On the UBOS Personal Data Mesh, all relationships are bidirectional regardless of whether they were in the input data or not (in the case of Facebook, they are not).

The UBOS Personal Data Mesh automatically manages the integrity of these relationships in both directions, so they never dangle or become inconsistent. You don’t have to do anything as an application developer. (Makes software development easy, no?)

Let’s look at the imported Facebook messages

Go back to the front page (click on the logo upper-left), and then click on “Facebook message”. As you would expect, that shows you all messages that our user sent and received with Facebook Messenger.

For this tutorial, select a message sent by “Lisa Nelson” saying something about rain. This shows the message, again with some metadata, one of which is field “Thread”.

Facebook collects messages in threads. Click that thread, and now you see all messages that are part of this message thread.

Viewlets and Skins

You probably noticed that the user interface is different based on what type of data element, aka MeshObject you are looking at. That’s of course what most web applications do, but the UBOS Personal Data Mesh doesn’t have a global “route” table; instead, it’s a competition.


Different types of MeshObjects are rendered differently in the user interface. We call a user interface component that knows how to render things in a particular way a Viewlet. The part of the user interface that remains the same is a Skin.

When you browse around data on the UBOS Personal Data Mesh, there is an automatic match-making process between available Viewlets and the MeshObject that’s your current subject of interest. The best match wins, and that Viewlet is chosen to render the current subject, inside the current Skin.

Because there is no static “route” table, this makes adding new Viewlets or even removing default ones very simple, and the UI very customizable.

But there may be other Viewlets that can also render the current subject: click on the little “Views” link towards the top right.

If you select “Properties”, the “Properties Viewlet” will render the current subject instead of the “Message Thread Viewlet” that won the competition. Depending on the type of MeshObject you are looking at, and depending on the set of Viewlets that are available at your installation of the UBOS Personal Data Mesh, the list of Viewlets may be shorter or longer for a given MeshObject.


As developer, you can create your own Viewlets, and they will show up in the user interface at the right time, i.e. when they match what the user wants to see better than any alternative Viewlets. To add a Viewlet, not even a recompile is required. Don’t like our Viewlets? Create your own! (More about that later.)


The “Properties Viewlet” (if installed) is always available to render any MeshObject. It is the fallback if no better Viewlet can be found, and it helps you, the developer, understand the actual data you are looking at.

You may notice that many links in the current version of the UBOS Personal Data Mesh lead to the Properties Viewlet; that’s because we don’t have all that many Viewlets developed yet.

Identifiers for MeshObjects and URLs

Go to this MeshObject: http://localhost:1080/

This will bring up the specific Facebook message you looked at earlier.


Each MeshObject has its own URL. It’s very RESTful in the original sense of the word. You can bookmark it, e-mail it, and the like, and it will always resolve to the same MeshObject (assuming the user has permission to access this URL).

This URL has a one-to-one mapping with the MeshObjectIdentifier used internally to identify the MeshObject. So every single data element on the UBOS Personal Data Mesh is effortlessly available to anybody on the web (assuming they have permissions). No database / relational / object / web mapping mismatches on the UBOS Personal Data Mesh.

The square brackets in the URL? We use this convention to indicate the namespace for this MeshObjectIdentifier. More about that later.

Next steps

If you want to deep dive in the data representation on the UBOS Personal Data Mesh, go to Deep-dive into data representation with the Property Sheet Viewlet (OPTIONAL).

But you can skip that, add some (mock) Google data instead, and watch a Bot connect the Facebook data and the Google data into a single, multi-service address book, by going to Adding Google data and watching a bot connect it to the Facebook data.