blueskyArchitecture/BlueskyArchitecture.html

597 lines
21 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Bluesky Architecture compared to other social media services</title>
<meta name="author" content="Éibhear Ó hAnluain"/>
<meta name="description" content="A discussion of Bluesky's architecture as it relates to other social media services"/>
<meta name="keywords" content=""/>
<style type="text/css">
.underline { text-decoration: underline; }
</style>
<link rel="stylesheet" href="./reveal.js/dist/reveal.css"/>
<link rel="stylesheet" href="./reveal.js/dist/theme/white.css" id="theme"/>
<link rel="stylesheet" href="./e-reveal.css"/>
<link rel="stylesheet" href="./gridding.css"/>
</head>
<body>
<div class="reveal">
<div class="slides">
<section id="sec-title-slide" data-background="./bCardBackground.png"><h1 class="title">Bluesky Architecture compared to other social media services</h1><p class="subtitle"><a href="?print-pdf">Printable version</a></p>
<h2 class="author">Éibhear Ó hAnluain</h2><h2 class="email"><a href="mailto:eibhear.geo@gmail.com">eibhear.geo@gmail.com</a></h2><h2 class="date">2024-05-24 Fri 00:00</h2>
</section>
<section id="sec-table-of-contents" data-background="./bCardBackground.png"><div id="table-of-contents" role="doc-toc">
<h2>Table of Contents</h2>
<div id="text-table-of-contents" role="doc-toc">
<ul>
<li><a href="#/slide-org93a8805">Introduction</a></li>
<li><a href="#/slide-org26c71e1">General social media architectures</a></li>
<li><a href="#/slide-orgad41de2">Federated social media services</a></li>
<li><a href="#/slide-org3bda0cb">Bluesky</a></li>
<li><a href="#/slide-org6396db6">Bluesky &#x2013; Identities</a></li>
<li><a href="#/slide-org0c5cce8">Bluesky &#x2013; Feeds</a></li>
<li><a href="#/slide-org79115e8">Bluesky &#x2013; The AppView</a></li>
</ul>
</div>
</div>
</section>
<section>
<section id="slide-org93a8805" data-background="./bCardBackground.png">
<h2 id="org93a8805">Introduction</h2>
<div class="e-frame">
<p>
Boo!
</p>
</div>
</section>
</section>
<section>
<section id="slide-org26c71e1" data-background="./bCardBackground.png">
<h2 id="org26c71e1">General social media architectures</h2>
<div class="outline-text-2" id="text-org26c71e1">
</div>
</section>
<section id="slide-org47f6f38" data-background="./bCardBackground.png">
<h3 id="org47f6f38">Simplistic view 1/2 &#x2013; overview</h3>
<div class="e-frame">
<div id="org54aa8e9" class="figure">
<p><img src="structurizr-1-001-GenericSocial-01.png" alt="structurizr-1-001-GenericSocial-01.png" width="90%" />
</p>
</div>
</div>
</section>
<section id="slide-org4adbb43" data-background="./bCardBackground.png">
<h3 id="org4adbb43">Simplistic view 2/2 &#x2013; services</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns">
<div id="org4b7cca7" class="figure">
<p><img src="structurizr-1-002-GenericSocial-02.png" alt="structurizr-1-002-GenericSocial-02.png" width="40%" />
</p>
</div>
</div>
<div class="one_of_2_columns">
<ul>
<li class="fragment appear">Social media user access the app</li>
<li class="fragment appear">The app interacts with the API</li>
<li class="fragment appear">The API is the gateway for the database of posts, responses, likes, etc.</li>
</ul>
</div>
</div>
</section>
<section id="slide-org2595986" data-background="./bCardBackground.png">
<h3 id="org2595986">More realistic view 1/4 &#x2013; overview</h3>
<div class="e-frame">
<div id="orgc4ff576" class="figure">
<p><img src="structurizr-1-003-RealisticSocial-01.png" alt="structurizr-1-003-RealisticSocial-01.png" width="90%" />
</p>
</div>
</div>
</section>
<section id="slide-orga2df08a" data-background="./bCardBackground.png">
<h3 id="orga2df08a">More realistic view 2/4 &#x2013; basic services</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns">
<div id="orgd65630e" class="figure">
<p><img src="structurizr-1-004-RealisticSocial-02.png" alt="structurizr-1-004-RealisticSocial-02.png" width="70%" />
</p>
</div>
</div>
<div class="one_of_2_columns">
<ul>
<li class="fragment appear">Social media user access the app</li>
<li class="fragment appear">The app interacts with the API</li>
<li class="fragment appear">The API is the gateway for the database of posts, responses, likes, etc.</li>
<li class="fragment appear">The API also captures data for building profiles of users for targeting purposes</li>
<li class="fragment appear">The algorithmic feed generator guides the API on what posts to place into the app's feed</li>
</ul>
</div>
</div>
</section>
<section id="slide-orgaee48ac" data-background="./bCardBackground.png">
<h3 id="orgaee48ac">More realistic view 3/4 &#x2013; the algorithm</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns">
<div id="org69ec8e9" class="figure">
<p><img src="structurizr-1-005-RealisticSocial-03.png" alt="structurizr-1-005-RealisticSocial-03.png" width="70%" />
</p>
</div>
</div>
<div class="one_of_2_columns">
<ul>
<li>Social media user access the app</li>
<li>The app interacts with the API</li>
<li>The API is the gateway for the database of posts, responses, likes, etc.</li>
<li>The API also captures data for building profiles of users for targeting purposes</li>
<li>The algorithmic feed generator guides the API on what posts to place into the app's feed</li>
<li>Algorithmic feeds are created by the service administrator, using an app only <i>they</i> have access to</li>
</ul>
</div>
</div>
</section>
<section id="slide-orga8647d5" data-background="./bCardBackground.png">
<h3 id="orga8647d5">More realistic view 4/4 &#x2013; content moderation</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns">
<div id="org3b0659e" class="figure">
<p><img src="structurizr-1-006-RealisticSocial-04.png" alt="structurizr-1-006-RealisticSocial-04.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns">
<ul>
<li>Social media user access the app</li>
<li>The app interacts with the API</li>
<li>The API is the gateway for the database of posts, responses, likes, etc.</li>
<li>The API also captures data for building profiles of users for targeting purposes</li>
<li>The algorithmic feed generator guides the API on what posts to place into the app's feed</li>
<li>Algorithmic feeds are created by the service administrator, using an app only <i>they</i> have access to</li>
<li>Moderation is also performed by a member of the service's staff, using a dedicate app and services the the user doesn't have access to</li>
</ul>
</div>
</div>
</section>
</section>
<section>
<section id="slide-orgad41de2" data-background="./bCardBackground.png">
<h2 id="orgad41de2">Federated social media services</h2>
<div class="outline-text-2" id="text-orgad41de2">
</div>
</section>
<section id="slide-org38b1172" data-background="./bCardBackground.png">
<h3 id="org38b1172">Federated services 1/8 &#x2013; overview</h3>
<div class="e-frame">
<div id="orga57c504" class="figure">
<p><img src="structurizr-1-007-FederatedSocial-01.png" alt="structurizr-1-007-FederatedSocial-01.png" width="75%" />
</p>
</div>
</div>
</section>
<section id="slide-org220840e" data-background="./bCardBackground.png">
<h3 id="org220840e">Federated services 2/8 &#x2013; internal, administration and content moderation services</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns">
<div id="org28dffa4" class="figure">
<p><img src="structurizr-1-008-FederatedSocial-02.png" alt="structurizr-1-008-FederatedSocial-02.png" width="70%" />
</p>
</div>
</div>
<div class="one_of_2_columns">
<ul>
<li class="fragment appear">Same as before, the user access the service through an App that uses an API</li>
<li class="fragment appear">As federated services are small, the administrator and the moderator are the one person</li>
<li class="fragment appear">No algorithmic feeds, though
<ul>
<li>not popular in the fediverse community</li>
<li>difficult to implement in a federated environment.</li>
</ul></li>
</ul>
</div>
</div>
</section>
<section id="slide-org263cd7c" data-background="./bCardBackground.png">
<h3 id="org263cd7c">Federated services 3/8 &#x2013; federation 1</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns" style="width: 60%">
<div id="org05f7137" class="figure">
<p><img src="structurizr-1-009-FederatedSocial-03.png" alt="structurizr-1-009-FederatedSocial-03.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns" style="width: 40%">
<ul>
<li>Same as before, the user access the service through an App that uses an API</li>
<li>As federated services are small, the administrator and the moderator are the one person</li>
<li>No algorithmic feeds, though
<ul>
<li>not popular in the fediverse community</li>
<li>difficult to implement in a federated environment.</li>
</ul></li>
<li class="fragment appear">Federation service to push activity out to the federated network</li>
<li class="fragment appear">Federation API to take in activity from other nodes</li>
<li class="fragment appear">A logical database of inbound federated posts</li>
<li class="fragment appear">Federation using ActivityPub standard</li>
</ul>
</div>
</div>
</section>
<section id="slide-orgc7306f8" data-background="./bCardBackground.png">
<h3 id="orgc7306f8">Federated services 4/8 &#x2013; federation 2</h3>
<div class="e-frame">
<div id="org9df0f59" class="figure">
<p><img src="structurizr-1-010-FederatedSocial-04.png" alt="structurizr-1-010-FederatedSocial-04.png" width="75%" />
</p>
</div>
</div>
</section>
<section id="slide-org075c52b" data-background="./bCardBackground.png">
<h3 id="org075c52b">Federated services 5/8 &#x2013; federation 3</h3>
<div class="e-frame">
<div id="org678c821" class="figure">
<p><img src="structurizr-1-011-FederatedSocial-05.png" alt="structurizr-1-011-FederatedSocial-05.png" width="75%" />
</p>
</div>
</div>
</section>
<section id="slide-org049d4e6" data-background="./bCardBackground.png">
<h3 id="org049d4e6">Federated services 6/8 &#x2013; federation 4</h3>
<div class="e-frame">
<div id="org0f1f5c2" class="figure">
<p><img src="structurizr-1-012-FederatedSocial-06.png" alt="structurizr-1-012-FederatedSocial-06.png" width="75%" />
</p>
</div>
</div>
</section>
<section id="slide-orge0823d2" data-background="./bCardBackground.png">
<h3 id="orge0823d2">Federated services 7/8 &#x2013; federation 5</h3>
<div class="e-frame">
<div id="org9439a7c" class="figure">
<p><img src="structurizr-1-013-FederatedSocial-07.png" alt="structurizr-1-013-FederatedSocial-07.png" width="75%" />
</p>
</div>
</div>
</section>
<section id="slide-org3f86b37" data-background="./bCardBackground.png">
<h3 id="org3f86b37">Federated services 8/8 &#x2013; federation 6</h3>
<div class="e-frame">
<div id="org6733f9f" class="figure">
<p><img src="structurizr-1-014-FederatedSocial-08.png" alt="structurizr-1-014-FederatedSocial-08.png" width="75%" />
</p>
</div>
</div>
</section>
</section>
<section>
<section id="slide-org3bda0cb" data-background="./bCardBackground.png">
<h2 id="org3bda0cb">Bluesky</h2>
<div class="outline-text-2" id="text-org3bda0cb">
</div>
</section>
<section id="slide-org1a96ca1" data-background="./bCardBackground.png">
<h3 id="org1a96ca1">Basic Bluesky 1/2</h3>
<div class="e-frame">
<div id="orge9ee9f3" class="figure">
<p><img src="structurizr-1-015-BlueskyBasic-01.png" alt="structurizr-1-015-BlueskyBasic-01.png" width="100%" />
</p>
</div>
</div>
</section>
<section id="slide-org7ffed55" data-background="./bCardBackground.png">
<h3 id="org7ffed55">Basic Bluesky 2/2</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns" style="width: 70%">
<div id="orgba60da0" class="figure">
<p><img src="structurizr-1-016-BlueskyBasic-02.png" alt="structurizr-1-016-BlueskyBasic-02.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns" style="width: 30%">
<ul>
<li class="fragment appear">User interfaces with an app hosted by the <i>AppView</i></li>
<li class="fragment appear">The <i>AppView</i> includes an API (allowing for bot-like interactions)</li>
<li class="fragment appear">The <i>AppView</i> stores and reads data from the <i>Personal Data Server</i> (PDS)</li>
<li class="fragment appear">Bluesky resolved user identities using "DIDs" (Distributed IDs)</li>
<li class="fragment appear">The Bluesky admin uses a separate service for preparing algorithmic feeds</li>
<li class="fragment appear">The Bluesky moderator applies labels and actions to posts for trust and safety through a dedicated service</li>
</ul>
</div>
</div>
</section>
</section>
<section>
<section id="slide-org6396db6" data-background="./bCardBackground.png">
<h2 id="org6396db6">Bluesky &#x2013; Identities</h2>
<div class="outline-text-2" id="text-org6396db6">
</div>
</section>
<section id="slide-org1b31b9a" data-background="./bCardBackground.png">
<h3 id="org1b31b9a">Bluesky Identities 1/4</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns" style="width: 35%">
<div id="org73f4b15" class="figure">
<p><img src="structurizr-1-017-BlueskyIdentity-01.png" alt="structurizr-1-017-BlueskyIdentity-01.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns" style="width: 65%">
<ul>
<li class="fragment appear">User's typical Bluesky ID is <code>@&lt;user-handle&gt;.bsky.social</code>
<ul>
<li>e.g. <code>@theauldsthretch.bsky.social</code></li>
</ul></li>
<li class="fragment appear">Users can set up their own handle, <code>@&lt;user-handle&gt;.&lt;domain&gt;</code>. E.g. (and these are all real IDs) &#x2026;
<ul>
<li><code>@astrokatie.com</code> &#x2013; a cosmologist</li>
<li><code>@eibhear.gibiris.org</code> &#x2013; the author</li>
<li><code>@wyden.senate.gov</code> &#x2013; a U.S. Senator</li>
</ul></li>
<li class="fragment appear">User must control the domain or be a legitimate member of the domain's community</li>
<li class="fragment appear"><p>
Domain-based handle resolves to a DID, either by DNS or <code>.well-known</code>:
</p>
<div class="org-src-container">
<pre class="src src-shell" ><code trim>$ dig _atproto.eibhear.gibiris.org TXT
...
;; ANSWER SECTION:
_atproto.eibhear.gibiris.org. 3600 IN TXT <span style="color: #8b2252;">"did=did:plc:23mysztmt7dh3l5lzhinzafi"</span>
$ curl https://theauldsthretch.bsky.social/.well-known/atproto-did
did:plc:avzdf5esd7xpbgsgh7lx4kzq
</code></pre>
</div></li>
</ul>
</div>
</div>
</section>
<section id="slide-org1baca60" data-background="./bCardBackground.png">
<h3 id="org1baca60">Bluesky Identities 2/4</h3>
<div class="e-frame">
<div id="org7d8d5a4" class="figure">
<p><img src="structurizr-1-018-BlueskyIdentity-02.png" alt="structurizr-1-018-BlueskyIdentity-02.png" width="100%" />
</p>
</div>
</div>
</section>
<section id="slide-orgebce57a" data-background="./bCardBackground.png">
<h3 id="orgebce57a">Bluesky Identities 3/4</h3>
<div class="e-frame">
<div id="org24dd312" class="figure">
<p><img src="structurizr-1-019-BlueskyIdentity-03.png" alt="structurizr-1-019-BlueskyIdentity-03.png" width="100%" />
</p>
</div>
</div>
</section>
<section id="slide-org56cbb88" data-background="./bCardBackground.png">
<h3 id="org56cbb88">Bluesky Identities 3/4</h3>
<div class="e-frame">
<div id="org5a7b5d8" class="figure">
<p><img src="structurizr-1-020-BlueskyIdentity-04.png" alt="structurizr-1-020-BlueskyIdentity-04.png" width="100%" />
</p>
</div>
</div>
</section>
</section>
<section>
<section id="slide-org0c5cce8" data-background="./bCardBackground.png">
<h2 id="org0c5cce8">Bluesky &#x2013; Feeds</h2>
<div class="outline-text-2" id="text-org0c5cce8">
</div>
</section>
<section id="slide-orga4e19d3" data-background="./bCardBackground.png">
<h3 id="orga4e19d3">Bluesky Feeds 1/3</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns" style="width: 70%">
<div id="org041552a" class="figure">
<p><img src="structurizr-1-021-BlueskyFeeds-01.png" alt="structurizr-1-021-BlueskyFeeds-01.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns" style="width: 30%">
<ul>
<li class="fragment appear">Algorithmic feeds use an API</li>
<li class="fragment appear">Allows for independent feeds to be created by 3rd parties</li>
<li class="fragment appear">Users' default feed is <i>Following</i>:
<ul>
<li>A chronological feed of posts from those you follow</li>
</ul></li>
<li class="fragment appear">Users subscribe to other feeds. Examples:
<ul>
<li><i>Discover</i> &#x2013; posts that you may be interested in</li>
<li><i>Astronomy</i> &#x2013; Posts relating to astronomy</li>
<li><i>Quiet Posters</i> &#x2013; those you follow but who don't post very often</li>
</ul></li>
<li class="fragment appear">The <i>AppView</i> will read data from the independent feeds</li>
<li class="fragment appear">The feeds get relevant posts from the PDS</li>
</ul>
</div>
</div>
</section>
<section id="slide-orgbb3d261" data-background="./bCardBackground.png">
<h3 id="orgbb3d261">Bluesky Feeds 2/3 &#x2013; feeds as a separate application type</h3>
<div class="e-frame">
<div id="orgeb73970" class="figure">
<p><img src="structurizr-1-023-BlueskyFeeds-03.png" alt="structurizr-1-023-BlueskyFeeds-03.png" width="100%" />
</p>
</div>
</div>
</section>
<section id="slide-org2348787" data-background="./bCardBackground.png">
<h3 id="org2348787">Bluesky Feeds 3/3 &#x2013; Generic feeds</h3>
<div class="e-frame">
<div id="org486bb3e" class="figure">
<p><img src="structurizr-1-024-BlueskyFeeds-04.png" alt="structurizr-1-024-BlueskyFeeds-04.png" width="100%" />
</p>
</div>
</div>
</section>
</section>
<section>
<section id="slide-org79115e8" data-background="./bCardBackground.png">
<h2 id="org79115e8">Bluesky &#x2013; The AppView</h2>
<div class="outline-text-2" id="text-org79115e8">
</div>
</section>
<section id="slide-org70c253d" data-background="./bCardBackground.png">
<h3 id="org70c253d">Bluesky AppView 1/3</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns" style="width: 60%">
<div id="orgd349f8e" class="figure">
<p><img src="structurizr-1-025-BlueskyAppView-01.png" alt="structurizr-1-025-BlueskyAppView-01.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns" style="width: 40%">
<ul>
<li class="fragment appear">The main application users interact with the <i>AppView</i>.</li>
<li class="fragment appear">The <i>AppView</i> consists of the application (web, mobile, etc.) and the API
<ul>
<li>3rd-party applications (web, mobile, bots) can be created</li>
</ul></li>
<li class="fragment appear">The application is only a part of the <i>AppView</i></li>
<li class="fragment appear">Implements the <i>lexicon</i> of the service
<ul>
<li>Converts the <i>data</i> in the PDS into the social media <i>information</i></li>
</ul></li>
<li class="fragment appear">Now implemented by Bluesky as a separate application</li>
<li class="fragment appear"><i>AppView</i> reads from the Feeds services, the Moderation services and the PDS itelf</li>
<li class="fragment appear"><i>AppView</i> writes new posts, reposts, likes, replies, etc. to the PDS</li>
</ul>
</div>
</div>
</section>
<section id="slide-org1294eab" data-background="./bCardBackground.png">
<h3 id="org1294eab">Bluesky AppView 2/3 &#x2013; A 3rd-party independent AppView</h3>
<div class="gridded_frame_with_columns e-frame">
<div class="one_of_2_columns" style="width: 60%">
<div id="org60af8ea" class="figure">
<p><img src="structurizr-1-027-BlueskyAppView-03.png" alt="structurizr-1-027-BlueskyAppView-03.png" width="100%" />
</p>
</div>
</div>
<div class="one_of_2_columns" style="width: 40%">
<ul>
<li>The main application users interact with the <i>AppView</i>.</li>
<li>The <i>AppView</i> consists of the application (web, mobile, etc.) and the API
<ul>
<li>3rd-party applications (web, mobile, bots) can be created</li>
</ul></li>
<li>The application is only a part of the <i>AppView</i></li>
<li>Implements the <i>lexicon</i> of the service
<ul>
<li>Converts the <i>data</i> in the PDS into the social media <i>information</i></li>
</ul></li>
<li>Now implemented by Bluesky as a separate application</li>
<li><i>AppView</i> reads from the Feeds services, the Moderation services and the PDS itelf</li>
<li class="fragment appear"><i>AppView</i> writes new posts, reposts, likes, replies, etc. to the PDS</li>
<li class="fragment appear">Third parties can also develop separate <i>AppViews</i> (the application and APIs) &#x2026;
<ul>
<li>Alternatives to Bluesky's own <i>AppView</i></li>
<li>Implement a new <i>lexicon</i> for, say, video sharing, long-form posts, etc.</li>
</ul></li>
</ul>
</div>
</div>
</section>
<section id="slide-orga1d1aae" data-background="./bCardBackground.png">
<h3 id="orga1d1aae">Bluesky AppView 3/3 &#x2013; Generic AppView</h3>
<div class="e-frame">
<div id="org59a3109" class="figure">
<p><img src="structurizr-1-028-BlueskyAppView-04.png" alt="structurizr-1-028-BlueskyAppView-04.png" width="70%" />
</p>
</div>
</div>
</section>
</section>
</div>
</div>
<script src="./reveal.js/dist/reveal.js"></script>
<script src="./reveal.js/plugin/markdown/markdown.js"></script>
<script src="./reveal.js/plugin/zoom/zoom.js"></script>
<script src="./reveal.js/plugin/notes/notes.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
plugins: [RevealMarkdown, RevealZoom, RevealNotes],
transition:'none', margin: 0.1, slideNumber:true
});
</script>
</body>
</html>