Files
jellytau/architecture/03-data-flow.html
T

435 lines
27 KiB
HTML

<!DOCTYPE HTML>
<html lang="en" class="navy" dir="ltr">
<head>
<!-- Book generated using mdBook -->
<meta charset="UTF-8">
<title>Data Flow - JellyTau Documentation</title>
<!-- Custom HTML head -->
<meta name="description" content="Requirements, traceability, and architecture for the JellyTau Jellyfin client.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#ffffff">
<link rel="icon" href="../favicon.svg">
<link rel="shortcut icon" href="../favicon.png">
<link rel="stylesheet" href="../css/variables.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/chrome.css">
<link rel="stylesheet" href="../css/print.css" media="print">
<!-- Fonts -->
<link rel="stylesheet" href="../FontAwesome/css/font-awesome.css">
<link rel="stylesheet" href="../fonts/fonts.css">
<!-- Highlight.js Stylesheets -->
<link rel="stylesheet" href="../highlight.css">
<link rel="stylesheet" href="../tomorrow-night.css">
<link rel="stylesheet" href="../ayu-highlight.css">
<!-- Custom theme stylesheets -->
</head>
<body class="sidebar-visible no-js">
<div id="body-container">
<!-- Provide site root to javascript -->
<script>
var path_to_root = "../";
var default_theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "navy" : "navy";
</script>
<!-- Work around some values being stored in localStorage wrapped in quotes -->
<script>
try {
var theme = localStorage.getItem('mdbook-theme');
var sidebar = localStorage.getItem('mdbook-sidebar');
if (theme.startsWith('"') && theme.endsWith('"')) {
localStorage.setItem('mdbook-theme', theme.slice(1, theme.length - 1));
}
if (sidebar.startsWith('"') && sidebar.endsWith('"')) {
localStorage.setItem('mdbook-sidebar', sidebar.slice(1, sidebar.length - 1));
}
} catch (e) { }
</script>
<!-- Set the theme before any content is loaded, prevents flash -->
<script>
var theme;
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
if (theme === null || theme === undefined) { theme = default_theme; }
var html = document.querySelector('html');
html.classList.remove('navy')
html.classList.add(theme);
var body = document.querySelector('body');
body.classList.remove('no-js')
body.classList.add('js');
</script>
<input type="checkbox" id="sidebar-toggle-anchor" class="hidden">
<!-- Hide / unhide sidebar before it is displayed -->
<script>
var body = document.querySelector('body');
var sidebar = null;
var sidebar_toggle = document.getElementById("sidebar-toggle-anchor");
if (document.body.clientWidth >= 1080) {
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
sidebar = sidebar || 'visible';
} else {
sidebar = 'hidden';
}
sidebar_toggle.checked = sidebar === 'visible';
body.classList.remove('sidebar-visible');
body.classList.add("sidebar-" + sidebar);
</script>
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
<div class="sidebar-scrollbox">
<ol class="chapter"><li class="chapter-item expanded affix "><a href="../index.html">Introduction</a></li><li class="chapter-item expanded affix "><li class="part-title">Requirements & Traceability</li><li class="chapter-item expanded "><a href="../requirements.html"><strong aria-hidden="true">1.</strong> Requirements Specification</a></li><li class="chapter-item expanded "><a href="../traceability.html"><strong aria-hidden="true">2.</strong> Traceability Matrix</a></li><li class="chapter-item expanded "><a href="../traceability-ci.html"><strong aria-hidden="true">3.</strong> Traceability CI</a></li><li class="chapter-item expanded "><a href="../traces-quick-ref.html"><strong aria-hidden="true">4.</strong> Traces Quick Reference</a></li><li class="chapter-item expanded affix "><li class="part-title">Architecture</li><li class="chapter-item expanded "><a href="../architecture/index.html"><strong aria-hidden="true">5.</strong> Overview</a><a class="toggle"><div></div></a></li><li><ol class="section"><li class="chapter-item "><a href="../architecture/01-rust-backend.html"><strong aria-hidden="true">5.1.</strong> Rust Backend</a></li><li class="chapter-item "><a href="../architecture/02-svelte-frontend.html"><strong aria-hidden="true">5.2.</strong> Svelte Frontend</a></li><li class="chapter-item expanded "><a href="../architecture/03-data-flow.html" class="active"><strong aria-hidden="true">5.3.</strong> Data Flow</a></li><li class="chapter-item "><a href="../architecture/04-type-sync-and-threading.html"><strong aria-hidden="true">5.4.</strong> Type Sync & Threading</a></li><li class="chapter-item "><a href="../architecture/05-platform-backends.html"><strong aria-hidden="true">5.5.</strong> Platform Backends</a></li><li class="chapter-item "><a href="../architecture/06-downloads-and-offline.html"><strong aria-hidden="true">5.6.</strong> Downloads & Offline</a></li><li class="chapter-item "><a href="../architecture/07-connectivity.html"><strong aria-hidden="true">5.7.</strong> Connectivity</a></li><li class="chapter-item "><a href="../architecture/08-database-design.html"><strong aria-hidden="true">5.8.</strong> Database Design</a></li><li class="chapter-item "><a href="../architecture/09-security.html"><strong aria-hidden="true">5.9.</strong> Security</a></li></ol></li><li class="chapter-item expanded "><li class="part-title">UX</li><li class="chapter-item expanded "><a href="../ux-flows.html"><strong aria-hidden="true">6.</strong> UX Flows</a></li><li class="chapter-item expanded affix "><li class="part-title">Specs — Pending Work</li><li class="chapter-item expanded "><a href="../specs/index.html"><strong aria-hidden="true">7.</strong> Specs Index</a></li><li class="chapter-item expanded "><a href="../specs/SPEC-TEMPLATE.html"><strong aria-hidden="true">8.</strong> Spec Template</a></li><li class="chapter-item expanded "><a href="../specs/SPEC-REVIEW-CHECKLIST.html"><strong aria-hidden="true">9.</strong> Spec Review Checklist</a></li><li class="chapter-item expanded "><a href="../specs/playback-backend-unification.html"><strong aria-hidden="true">10.</strong> Playback Backend Unification</a></li><li class="chapter-item expanded "><a href="../specs/linux-native-video-spike.html"><strong aria-hidden="true">11.</strong> Linux Native Video Spike</a></li><li class="chapter-item expanded "><a href="../specs/backend-owned-stream-selection.html"><strong aria-hidden="true">12.</strong> Backend-Owned Stream Selection</a></li><li class="chapter-item expanded "><a href="../specs/player-facade-enforcement.html"><strong aria-hidden="true">13.</strong> Player Facade Enforcement</a></li><li class="chapter-item expanded "><a href="../specs/windows-native-audio-backend.html"><strong aria-hidden="true">14.</strong> Windows Native Audio Backend</a></li><li class="chapter-item expanded "><a href="../specs/libmpv2-migration.html"><strong aria-hidden="true">15.</strong> libmpv2 Migration</a></li><li class="chapter-item expanded "><a href="../specs/read-through-media-cache.html"><strong aria-hidden="true">16.</strong> Read-Through Media Cache</a></li><li class="chapter-item expanded "><a href="../specs/scoped-search.html"><strong aria-hidden="true">17.</strong> Scoped Search</a></li><li class="chapter-item expanded "><a href="../specs/scoped-search-boundary.html"><strong aria-hidden="true">18.</strong> Scoped Search Boundary</a></li><li class="chapter-item expanded "><a href="../specs/scoped-search-boundary-implementation.html"><strong aria-hidden="true">19.</strong> Scoped Search Boundary — Implementation</a></li><li class="chapter-item expanded "><a href="../specs/frontend-domain-model.html"><strong aria-hidden="true">20.</strong> Frontend Domain Model</a></li><li class="chapter-item expanded "><a href="../specs/build-provenance.html"><strong aria-hidden="true">21.</strong> Build Provenance</a></li><li class="chapter-item expanded affix "><li class="part-title">Build & Release</li><li class="chapter-item expanded "><a href="../build/build-release.html"><strong aria-hidden="true">22.</strong> Build & Release</a></li><li class="chapter-item expanded "><a href="../release-checklist.html"><strong aria-hidden="true">23.</strong> Release Checklist</a></li><li class="chapter-item expanded "><a href="../build/build-desktop-packages.html"><strong aria-hidden="true">24.</strong> Desktop Packaging</a></li><li class="chapter-item expanded "><a href="../build/build-windows.html"><strong aria-hidden="true">25.</strong> Windows Build</a></li><li class="chapter-item expanded "><a href="../defect-windows.html"><strong aria-hidden="true">26.</strong> Defect Windows</a></li><li class="chapter-item expanded "><a href="../build/docker.html"><strong aria-hidden="true">27.</strong> Docker</a></li><li class="chapter-item expanded "><a href="../build/build-builder-image.html"><strong aria-hidden="true">28.</strong> Builder Image</a></li><li class="chapter-item expanded affix "><li class="spacer"></li><li class="chapter-item expanded affix "><a href="../api-redirect.html">Rust API Reference (rustdoc)</a></li></ol>
</div>
<div id="sidebar-resize-handle" class="sidebar-resize-handle">
<div class="sidebar-resize-indicator"></div>
</div>
</nav>
<!-- Track and set sidebar scroll position -->
<script>
var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
sidebarScrollbox.addEventListener('click', function(e) {
if (e.target.tagName === 'A') {
sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
}
}, { passive: true });
var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
sessionStorage.removeItem('sidebar-scroll');
if (sidebarScrollTop) {
// preserve sidebar scroll position when navigating via links within sidebar
sidebarScrollbox.scrollTop = sidebarScrollTop;
} else {
// scroll sidebar to current active section when navigating via "next/previous chapter" buttons
var activeSection = document.querySelector('#sidebar .active');
if (activeSection) {
activeSection.scrollIntoView({ block: 'center' });
}
}
</script>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar-hover-placeholder"></div>
<div id="menu-bar" class="menu-bar sticky">
<div class="left-buttons">
<label id="sidebar-toggle" class="icon-button" for="sidebar-toggle-anchor" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
<i class="fa fa-bars"></i>
</label>
<button id="theme-toggle" class="icon-button" type="button" title="Change theme" aria-label="Change theme" aria-haspopup="true" aria-expanded="false" aria-controls="theme-list">
<i class="fa fa-paint-brush"></i>
</button>
<ul id="theme-list" class="theme-popup" aria-label="Themes" role="menu">
<li role="none"><button role="menuitem" class="theme" id="light">Light</button></li>
<li role="none"><button role="menuitem" class="theme" id="rust">Rust</button></li>
<li role="none"><button role="menuitem" class="theme" id="coal">Coal</button></li>
<li role="none"><button role="menuitem" class="theme" id="navy">Navy</button></li>
<li role="none"><button role="menuitem" class="theme" id="ayu">Ayu</button></li>
</ul>
<button id="search-toggle" class="icon-button" type="button" title="Search. (Shortkey: s)" aria-label="Toggle Searchbar" aria-expanded="false" aria-keyshortcuts="S" aria-controls="searchbar">
<i class="fa fa-search"></i>
</button>
</div>
<h1 class="menu-title">JellyTau Documentation</h1>
<div class="right-buttons">
<a href="../print.html" title="Print this book" aria-label="Print this book">
<i id="print-button" class="fa fa-print"></i>
</a>
<a href="https://gitea.tourolle.paris/dtourolle/jellytau" title="Git repository" aria-label="Git repository">
<i id="git-repository-button" class="fa fa-github"></i>
</a>
<a href="https://gitea.tourolle.paris/dtourolle/jellytau/_edit/master/docs/../docs/architecture/03-data-flow.md" title="Suggest an edit" aria-label="Suggest an edit">
<i id="git-edit-button" class="fa fa-edit"></i>
</a>
</div>
</div>
<div id="search-wrapper" class="hidden">
<form id="searchbar-outer" class="searchbar-outer">
<input type="search" id="searchbar" name="searchbar" placeholder="Search this book ..." aria-controls="searchresults-outer" aria-describedby="searchresults-header">
</form>
<div id="searchresults-outer" class="searchresults-outer hidden">
<div id="searchresults-header" class="searchresults-header"></div>
<ul id="searchresults">
</ul>
</div>
</div>
<!-- Apply ARIA attributes after the sidebar and the sidebar toggle button are added to the DOM -->
<script>
document.getElementById('sidebar-toggle').setAttribute('aria-expanded', sidebar === 'visible');
document.getElementById('sidebar').setAttribute('aria-hidden', sidebar !== 'visible');
Array.from(document.querySelectorAll('#sidebar a')).forEach(function(link) {
link.setAttribute('tabIndex', sidebar === 'visible' ? 0 : -1);
});
</script>
<div id="content" class="content">
<main>
<h1 id="data-flow"><a class="header" href="#data-flow">Data Flow</a></h1>
<h2 id="repository-query-flow-cache-first"><a class="header" href="#repository-query-flow-cache-first">Repository Query Flow (Cache-First)</a></h2>
<pre><code class="language-mermaid">sequenceDiagram
participant UI as Svelte Component
participant Client as RepositoryClient (TS)
participant Rust as Tauri Command
participant Hybrid as HybridRepository
participant Cache as OfflineRepository (SQLite)
participant Server as OnlineRepository (HTTP)
participant Conn as ConnectivityMonitor
UI-&gt;&gt;Client: getItems(parentId)
Client-&gt;&gt;Rust: invoke("repository_get_items", {handle, parentId})
Rust-&gt;&gt;Hybrid: get_items()
par Parallel Racing
Hybrid-&gt;&gt;Cache: get_items() with 100ms timeout
Hybrid-&gt;&gt;Server: get_items() (no timeout)
end
Note over Server,Conn: Every server request reports its outcome
alt Server succeeds (or answers with 4xx/5xx)
Server-&gt;&gt;Conn: mark_reachable() (server is up)
else Network failure / timeout
Server-&gt;&gt;Conn: mark_unreachable() (debounced)
end
alt Cache returns with content
Cache--&gt;&gt;Hybrid: Result with items
Hybrid--&gt;&gt;Rust: Return cache result
else Cache timeout or empty
Server--&gt;&gt;Hybrid: Fresh result
Hybrid--&gt;&gt;Rust: Return server result
end
Rust--&gt;&gt;Client: SearchResult
Client--&gt;&gt;UI: items[]
Note over UI: Reactive update
</code></pre>
<p><strong>Key Points:</strong></p>
<ul>
<li>Cache queries have 100ms timeout for responsiveness</li>
<li>Server queries always run for fresh data</li>
<li>Cache wins if it has meaningful content</li>
<li>Automatic fallback to server if cache is empty/stale</li>
<li>Background cache updates (planned)</li>
<li><strong>Connectivity side-effect</strong>: each server request feeds the <code>ConnectivityMonitor</code>, which is the source of truth for the offline/online banner (see <a href="07-connectivity.html">07-connectivity.md</a>). A server-answered error (401/404/5xx) still counts as <em>reachable</em> — only network failures, sustained past a debounce window, flip the app to offline.</li>
</ul>
<h2 id="search-flow-locally-indexed"><a class="header" href="#search-flow-locally-indexed">Search Flow (Locally Indexed)</a></h2>
<p><strong>TRACES</strong>: UR-065 | DR-108 … DR-111, IR-030</p>
<p>Search does not depend on a per-keystroke round trip to Jellyfin. The instant leg
reads the <strong>local SQLite catalog</strong>, which is already synced and already
FTS5-indexed, so results appear as fast as SQLite can answer — online or offline.
The server query stays, demoted to a background reconciliation that merges in
late results.</p>
<pre><code class="language-mermaid">sequenceDiagram
participant UI as Search UI
participant Rust as repository_search
participant Cache as Local catalog (FTS5)
participant Server as Jellyfin
participant Indexer as spawn_catalog_indexer
UI-&gt;&gt;Rust: search(query, scope)
Rust-&gt;&gt;Cache: FTS5 query, scope expanded by SearchScope::item_types()
Cache--&gt;&gt;UI: instant results
Rust-&gt;&gt;Server: reconciliation query (background)
Server--&gt;&gt;UI: search-event with late/merged results
Note over Indexer,Cache: Independent of any query:&lt;br/&gt;scheduled crawl keeps the index fresh,&lt;br/&gt;prunes items deleted on the server
</code></pre>
<p><strong>Key points:</strong></p>
<ul>
<li>The <strong>scope is opaque on the wire</strong>. The frontend sends a <code>SearchScope</code>
variant; Rust expands it to item types
(<a href="01-rust-backend.html#search-scope-and-the-taxonomy-boundary">01-rust-backend.md</a>).</li>
<li><strong>Index freshness is a Rust policy</strong>, not a frontend startup call — a scheduled
background pass, not "whatever was synced when the app last launched"
(DR-109). See
<a href="01-rust-backend.html#background-workers">Background workers</a>.</li>
<li><strong>Index hygiene matters as much as freshness</strong>: the catalog save path uses
<code>INSERT OR REPLACE</code> and the crawl prunes rows for content deleted on the
server, or search keeps returning items that no longer exist (DR-110).</li>
<li>The index covers <strong>exactly the types the result groups render</strong> (DR-111) —
including Artists, which the crawl must reach or the Artists group is silently
always empty.</li>
</ul>
<p><strong>Deliberately not done, with reasons:</strong></p>
<ul>
<li><strong>Incremental indexing</strong> (Jellyfin's <code>MinDateLastSaved</code>). A <em>full</em> crawl is
what makes the deletion sweep sound — it yields the authoritative id set per
library, and an incremental pass cannot detect deletions. Worth revisiting if
full crawls prove slow on large libraries; measure first.</li>
<li><strong>Removing the server leg.</strong> The reconciliation query stays.</li>
</ul>
<blockquote>
<p>⚠️ Two dead search implementations still exist: <code>storage_search_items</code>
(<code>commands/storage/mod.rs</code>) and <code>offline_search</code> (<code>commands/offline.rs</code>). Both
are registered in <code>lib.rs</code> and exported to <code>bindings.ts</code>; neither is called
from the frontend. Deleting them is correct and unclaimed.</p>
</blockquote>
<h2 id="playback-initiation-flow"><a class="header" href="#playback-initiation-flow">Playback Initiation Flow</a></h2>
<pre><code class="language-mermaid">sequenceDiagram
participant User
participant AudioPlayer
participant Tauri as Tauri IPC
participant Command as player_play_item()
participant Controller as PlayerController
participant Backend as PlayerBackend
participant Store as Frontend Store
User-&gt;&gt;AudioPlayer: clicks play
AudioPlayer-&gt;&gt;Tauri: invoke("player_play_item", {item})
Tauri-&gt;&gt;Command: player_play_item()
Command-&gt;&gt;Command: Convert PlayItemRequest -&gt; MediaItem
Command-&gt;&gt;Controller: play_item(item)
Controller-&gt;&gt;Backend: load(item)
Note over Backend: State -&gt; Loading
Controller-&gt;&gt;Backend: play()
Note over Backend: State -&gt; Playing
Controller--&gt;&gt;Command: Ok(())
Command--&gt;&gt;Tauri: PlayerStatus {state, position, duration, volume}
Tauri--&gt;&gt;AudioPlayer: status
AudioPlayer-&gt;&gt;Store: player.setPlaying(media, position, duration)
Note over Store: UI updates reactively
</code></pre>
<h2 id="playback-mode-transfer-flow"><a class="header" href="#playback-mode-transfer-flow">Playback Mode Transfer Flow</a></h2>
<pre><code class="language-mermaid">sequenceDiagram
participant UI as Cast Button
participant Store as playbackMode store
participant Rust as Tauri Command
participant Manager as PlaybackModeManager
participant Player as PlayerController
participant Jellyfin as Jellyfin API
UI-&gt;&gt;Store: transferToRemote(sessionId)
Store-&gt;&gt;Rust: invoke("playback_mode_transfer_to_remote", {sessionId})
Rust-&gt;&gt;Manager: transfer_to_remote()
Manager-&gt;&gt;Player: Get current queue
Player--&gt;&gt;Manager: Vec&lt;MediaItem&gt;
Manager-&gt;&gt;Manager: Extract Jellyfin IDs
Manager-&gt;&gt;Jellyfin: POST /Sessions/{id}/Playing&lt;br/&gt;{itemIds, startIndex}
Jellyfin--&gt;&gt;Manager: 200 OK
Manager-&gt;&gt;Jellyfin: POST /Sessions/{id}/Playing/Seek&lt;br/&gt;{positionTicks}
Jellyfin--&gt;&gt;Manager: 200 OK
Manager-&gt;&gt;Player: stop()
Manager-&gt;&gt;Manager: mode = Remote {sessionId}
Manager--&gt;&gt;Rust: Ok(())
Rust--&gt;&gt;Store: PlaybackMode
Store-&gt;&gt;UI: Update cast icon
</code></pre>
<h2 id="queue-navigation-flow"><a class="header" href="#queue-navigation-flow">Queue Navigation Flow</a></h2>
<pre><code class="language-mermaid">flowchart TB
User["User clicks Next"] --&gt; Invoke["invoke('player_next')"]
Invoke --&gt; ControllerNext["controller.next()"]
ControllerNext --&gt; QueueNext["queue.next()&lt;br/&gt;- Check repeat mode&lt;br/&gt;- Check shuffle&lt;br/&gt;- Update history"]
QueueNext --&gt; None["None&lt;br/&gt;(at end)"]
QueueNext --&gt; Some["Some(next)"]
QueueNext --&gt; Same["Same&lt;br/&gt;(repeat one)"]
Some --&gt; PlayItem["play_item(next)&lt;br/&gt;Returns new status"]
</code></pre>
<h2 id="volume-control-flow"><a class="header" href="#volume-control-flow">Volume Control Flow</a></h2>
<pre><code class="language-mermaid">sequenceDiagram
participant User
participant Slider as Volume Slider
participant Handler as handleVolumeChange()
participant Tauri as Tauri IPC
participant Command as player_set_volume
participant Controller as PlayerController
participant Backend as MpvBackend/NullBackend
participant Events as playerEvents.ts
participant Store as Player Store
participant UI
User-&gt;&gt;Slider: adjusts (0-100)
Slider-&gt;&gt;Handler: oninput event
Handler-&gt;&gt;Handler: Convert 0-100 -&gt; 0.0-1.0
Handler-&gt;&gt;Tauri: invoke("player_set_volume", {volume})
Tauri-&gt;&gt;Command: player_set_volume
Command-&gt;&gt;Controller: set_volume(volume)
Controller-&gt;&gt;Backend: set_volume(volume)
Backend-&gt;&gt;Backend: Clamp to 0.0-1.0
Note over Backend: MpvBackend: Send to MPV loop
Backend--&gt;&gt;Tauri: emit "player-event"
Tauri--&gt;&gt;Events: VolumeChanged event
Events-&gt;&gt;Store: player.setVolume(volume)
Store--&gt;&gt;UI: Reactive update
Note over UI: Both AudioPlayer and&lt;br/&gt;MiniPlayer stay in sync
</code></pre>
<p><strong>Key Implementation Details:</strong></p>
<ul>
<li>Volume is stored in the backend (NullBackend/MpvBackend)</li>
<li><code>PlayerController.volume()</code> delegates to backend</li>
<li><code>get_player_status()</code> returns <code>controller.volume()</code> (not hardcoded)</li>
<li>Frontend uses normalized 0.0-1.0 scale, UI shows 0-100</li>
</ul>
</main>
<nav class="nav-wrapper" aria-label="Page navigation">
<!-- Mobile navigation buttons -->
<a rel="prev" href="../architecture/02-svelte-frontend.html" class="mobile-nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../architecture/04-type-sync-and-threading.html" class="mobile-nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
<div style="clear: both"></div>
</nav>
</div>
</div>
<nav class="nav-wide-wrapper" aria-label="Page navigation">
<a rel="prev" href="../architecture/02-svelte-frontend.html" class="nav-chapters previous" title="Previous chapter" aria-label="Previous chapter" aria-keyshortcuts="Left">
<i class="fa fa-angle-left"></i>
</a>
<a rel="next prefetch" href="../architecture/04-type-sync-and-threading.html" class="nav-chapters next" title="Next chapter" aria-label="Next chapter" aria-keyshortcuts="Right">
<i class="fa fa-angle-right"></i>
</a>
</nav>
</div>
<script>
window.playground_copyable = true;
</script>
<script src="../elasticlunr.min.js"></script>
<script src="../mark.min.js"></script>
<script src="../searcher.js"></script>
<script src="../clipboard.min.js"></script>
<script src="../highlight.js"></script>
<script src="../book.js"></script>
<!-- Custom JS scripts -->
</div>
</body>
</html>