A simple website. Written by Vue 3.
Data persistents in index DB, and local first after syncing but not using CRDTs.
Establishing IndexDb for the first time.
sequenceDiagram
participant Server as Server Database
participant API as /sync/collection Interface
participant Frontend as Frontend
participant Stream as Stream Processing
participant IndexDB as IndexDb
Server->>API: Full data stream transmission loss
API->>Frontend: Data stream
Frontend->>Stream: Receiving data stream
loop Parse each line of data
Stream->>IndexDB: Enter each line of data into respective tables
end
Data binding with Pinia to implement UI reactivity.
sequenceDiagram
participant IndexDB as IndexDb
participant Hook as Hook (on change)
participant Pinia as Pinia Store
participant UI as User Interface
IndexDB->>Hook: Change event
Hook->>Pinia: Update/inject data
Pinia->>UI: Render/update reactive data
Subsequent incremental updates.
flowchart LR
subgraph server [Server]
db[Database]
checksum_table[Checksum Table]
hooks[Update Hooks]
db --> checksum_table
db --> hooks
end
subgraph operations [Operations]
add_record[Add Record]
update_record[Update Record]
delete_record[Delete Record]
add_record --> hooks
update_record --> hooks
delete_record --> hooks
end
cronjob[Cron Job] --> db
hooks -->|Update Checksums| checksum_table
server -.-> operations
server --> cronjob
sequenceDiagram
participant Frontend
participant /sync/deta API
participant Database
Frontend->>/sync/deta API: Request sync with last sync timestamp
/sync/deta API->>Database: Query updates since last sync timestamp
Database-->>/sync/deta API: Updated records
/sync/deta API-->>Frontend: Updated records
Frontend->>Frontend: Incrementally update indexDb with records