Current section

Files

Jump to
reckon_db assets event_sourcing.svg
Raw

assets/event_sourcing.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450">
<defs>
<linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1a1a2e"/>
<stop offset="100%" style="stop-color:#16213e"/>
</linearGradient>
<filter id="shadow2" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="3" stdDeviation="3" flood-opacity="0.3"/>
</filter>
</defs>
<rect width="800" height="450" fill="url(#bg2)"/>
<!-- Title -->
<text x="400" y="35" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif" font-size="22" font-weight="bold">Event Sourcing vs Traditional CRUD</text>
<!-- CRUD Side -->
<rect x="30" y="60" width="360" height="360" rx="10" fill="#0f3460" filter="url(#shadow2)"/>
<text x="210" y="90" text-anchor="middle" fill="#e94560" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Traditional CRUD</text>
<!-- Database table -->
<rect x="60" y="110" width="300" height="140" rx="5" fill="#1e3a5f"/>
<text x="210" y="135" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif" font-size="12" font-weight="bold">users table</text>
<!-- Table header -->
<rect x="70" y="145" width="280" height="25" fill="#2d4a6d"/>
<text x="85" y="162" fill="#aaa" font-family="monospace" font-size="10">id</text>
<text x="130" y="162" fill="#aaa" font-family="monospace" font-size="10">name</text>
<text x="200" y="162" fill="#aaa" font-family="monospace" font-size="10">email</text>
<text x="300" y="162" fill="#aaa" font-family="monospace" font-size="10">balance</text>
<!-- Table row -->
<rect x="70" y="170" width="280" height="25" fill="#0a2540"/>
<text x="85" y="187" fill="#fff" font-family="monospace" font-size="10">123</text>
<text x="130" y="187" fill="#fff" font-family="monospace" font-size="10">Alice</text>
<text x="200" y="187" fill="#fff" font-family="monospace" font-size="10">a@ex.com</text>
<text x="300" y="187" fill="#4ade80" font-family="monospace" font-size="10">$150</text>
<!-- Only current state -->
<rect x="70" y="200" width="280" height="40" fill="#1a1a2e" rx="3"/>
<text x="210" y="225" text-anchor="middle" fill="#e94560" font-family="Arial, sans-serif" font-size="11">Only current state is stored</text>
<!-- Lost history -->
<text x="210" y="280" text-anchor="middle" fill="#888" font-family="Arial, sans-serif" font-size="11">History is lost:</text>
<text x="210" y="300" text-anchor="middle" fill="#666" font-family="Arial, sans-serif" font-size="10">• Initial balance?</text>
<text x="210" y="318" text-anchor="middle" fill="#666" font-family="Arial, sans-serif" font-size="10">• When did it change?</text>
<text x="210" y="336" text-anchor="middle" fill="#666" font-family="Arial, sans-serif" font-size="10">• Who made changes?</text>
<text x="210" y="354" text-anchor="middle" fill="#666" font-family="Arial, sans-serif" font-size="10">• What were the amounts?</text>
<!-- Warning icon -->
<circle cx="210" cy="390" r="15" fill="#ef4444"/>
<text x="210" y="396" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif" font-size="16" font-weight="bold">!</text>
<!-- Event Sourcing Side -->
<rect x="410" y="60" width="360" height="360" rx="10" fill="#0f3460" filter="url(#shadow2)"/>
<text x="590" y="90" text-anchor="middle" fill="#4ade80" font-family="Arial, sans-serif" font-size="16" font-weight="bold">Event Sourcing</text>
<!-- Event stream -->
<rect x="430" y="110" width="320" height="220" rx="5" fill="#1e3a5f"/>
<text x="590" y="135" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif" font-size="12" font-weight="bold">user-123 stream</text>
<!-- Events -->
<rect x="445" y="150" width="290" height="35" rx="4" fill="#4ade80"/>
<text x="455" y="165" fill="#000" font-family="monospace" font-size="9" font-weight="bold">v0</text>
<text x="485" y="165" fill="#000" font-family="monospace" font-size="9">UserCreated</text>
<text x="455" y="178" fill="#1a1a2e" font-family="monospace" font-size="8">{name: "Alice", email: "a@ex.com"}</text>
<rect x="445" y="190" width="290" height="35" rx="4" fill="#60a5fa"/>
<text x="455" y="205" fill="#000" font-family="monospace" font-size="9" font-weight="bold">v1</text>
<text x="485" y="205" fill="#000" font-family="monospace" font-size="9">BalanceDeposited</text>
<text x="455" y="218" fill="#1a1a2e" font-family="monospace" font-size="8">{amount: 200, source: "direct"}</text>
<rect x="445" y="230" width="290" height="35" rx="4" fill="#f59e0b"/>
<text x="455" y="245" fill="#000" font-family="monospace" font-size="9" font-weight="bold">v2</text>
<text x="485" y="245" fill="#000" font-family="monospace" font-size="9">BalanceWithdrawn</text>
<text x="455" y="258" fill="#1a1a2e" font-family="monospace" font-size="8">{amount: 50, reason: "purchase"}</text>
<rect x="445" y="270" width="290" height="35" rx="4" fill="#a78bfa"/>
<text x="455" y="285" fill="#000" font-family="monospace" font-size="9" font-weight="bold">v3</text>
<text x="485" y="285" fill="#000" font-family="monospace" font-size="9">EmailChanged</text>
<text x="455" y="298" fill="#1a1a2e" font-family="monospace" font-size="8">{old: "a@ex.com", new: "alice@new.com"}</text>
<!-- Derive state -->
<path d="M590 330 L590 350" stroke="#4ade80" stroke-width="2" fill="none"/>
<polygon points="585,345 590,355 595,345" fill="#4ade80"/>
<rect x="480" y="355" width="220" height="50" rx="5" fill="#166534"/>
<text x="590" y="375" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif" font-size="10" font-weight="bold">Current State (derived)</text>
<text x="590" y="393" text-anchor="middle" fill="#4ade80" font-family="monospace" font-size="9">balance = 200 - 50 = $150</text>
<!-- Check icon -->
<circle cx="590" cy="420" r="15" fill="#4ade80"/>
<text x="590" y="426" text-anchor="middle" fill="#fff" font-family="Arial, sans-serif" font-size="16" font-weight="bold"></text>
</svg>