Slide 1

Slide 1 text

Hilfe, wir syncen! DIGITALE LEUTE SUMMIT / 16.11.2021 LARS HUPEL @LARSR_H LUCAS DOHMEN @MOONBEAMLABS

Slide 2

Slide 2 text

Moderne Frontend-Architektur React SPA B4F µService 1 µService 2 µService 3 JSON

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Wenn alles in der Cloud ist ... • • • ... sind wir abhängig vom Internet ... können wir nur eingeschränkt arbeiten ... schließen wir Menschen aus

Slide 5

Slide 5 text

Of line arbeiten? • • früher™ hat man auch nicht ständig Internet gehabt lokale Datenspeicherung, manuelle Synchronisierung

Slide 6

Slide 6 text

Of line- irst ist Standard in der Entwicklung • • • wir arbeiten gerne of line niemand möchte mehr Subversion benutzen Warum verlangen wir Konnektivität von unseren User:innen?

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Hello world! Hello world Hello, world!

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Lattices • • mathematische Struktur abstrakte De inition einer Ordnungsrelation

Slide 13

Slide 13 text

https://commons.wikimedia.org/wiki/File:Lattice_of_the_divisibility_of_60.svg

Slide 14

Slide 14 text

CRDTs Con lict-Free Replicated Datatypes

Slide 15

Slide 15 text

Beispiel: G-Sets {} {Skyr} {Müsli} {Skyr, Grapefruit} {Skyr, Müsli, Grapefruit}

Slide 16

Slide 16 text

Tombstones • • Löschen ist nicht monoton ☹ Lösung: als „gelöscht“ markieren

Slide 17

Slide 17 text

Beispiel: 2P-Sets {Skyr, Müsli, Grapefruit} {Skyr, Müsli, Grapefruit} {Skyr, Äpfel, Müsli, Grapefruit} {Skyr, Müsli, Grapefruit, Tee} {Skyr, Äpfel, Müsli, Grapefruit, Tee}

Slide 18

Slide 18 text

Vector Clocks • • jedes der n Geräte bekommt einen eigenen Zeitstempel ein Gesamt-Zeitstempel setzt sich aus n Geräte-Zeitstempeln zusammen

Slide 19

Slide 19 text

https://commons.wikimedia.org/w/index.php?title=File:Lamport-Clock-en.svg

Slide 20

Slide 20 text

T₁ = 0 T₂ = 0 Beispiel: MV-Register x = 0 x = 1 T₁ = 1 T₂ = 0 👩 x = 0 T₁ = 0 T₂ = 0 x = 1 T₁ = 1 T₂ = 0 x = 1 T₁ = 1 T₂ = 0 x = 2 T₁ = 2 T₂ = 0 x = 3 T₁ = 2 T₂ = 1 💣 update sync update update x = 0 🧑

Slide 21

Slide 21 text

“Any two object replicas of a CvRDT eventually converge, assuming the system transmits payload in initely often between pairs of replicas over eventually-reliable point-to-point channels.”

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Automerge • • • JavaScript-Bibliothek ür Browser & Node.js bietet als Datentyp JSON-Dokumente 💡JSON-Dokument sind CRDTs

Slide 25

Slide 25 text

Verwendung Requests pro Sekunde doc1 = Automerge.from({ todos: [] }) doc2 = Automerge.change(doc1, 'Add muesli', doc => { doc.cards.push({ text: 'Müsli', done: false }) }) doc3 = Automerge.change(doc1, 'Add skyr', doc => { doc.cards.push({ text: 'Skyr', done: false }) }) Automerge.merge(doc2, doc3) // enthält Spuren von Müsli & Skyr

Slide 26

Slide 26 text

Demo Eine Einkaufsliste

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Weitere Features • • • • • mehr Datentypen: Counter Text (kollaboratives Editing) Table P2P-Anwendungen mit Hypermerge

Slide 29

Slide 29 text

Q&A Lucas Dohmen [email protected] @moonbeamlabs www.innoq.com innoQ Deutschland GmbH Krischerstr. 100 40789 Monheim +49 2173 333660 Ohlauer Str. 43 10999 Berlin Ludwigstr. 180E 63067 Offenbach Kreuzstr. 16 80331 München Hermannstr. 13 20095 Hamburg Erftstr. 15-17 50672 Köln Königstorgraben 11 90402 Nürnberg Lars Hupel [email protected] @larsr_h