Echtzeit-Updates für Internetseiten: Von HTTP zu reaktiven Backends

Das HTTP-Problem: Anfrage und Antwort sind nicht in Echtzeit  

Browser sprechen über HTTP mit Servern. Diese Technik gibt es seit dem Jahr 1991. Sie ist die Basis vom Internet. Aber HTTP ist nicht für Echtzeit-Apps gemacht.

HTTP nutzt eine einfache Regel. Diese Regel heißt Request-Response. Das bedeutet Anfrage und Antwort.

1. Der Browser fragt nach Daten.
2. Der Server gibt die Daten.
3. Die Verbindung schließt sich.

Warum ist das ein Problem?  

Programmierer haben HTTP für einfache Texte gemacht. Eine Person liest allein. Für gemeinsame Apps in Echtzeit funktioniert HTTP nicht gut.

Die großen Probleme von HTTP:

1. Nur eine Richtung: Nur der Browser darf Fragen stellen. Der Server darf nicht von sich aus sprechen.
2. Anfrage und Antwort: Der Browser muss immer anfangen. Das gilt auch bei offenen Verbindungen.
3. Keine Push-Nachrichten: Der Server kann keine Neuigkeiten von selbst senden.
4. Ständiges Nachfragen: Der Browser muss immer wieder fragen. Nur so bemerkt er Änderungen.

Übersicht der Themen  

Ein Beispiel aus dem Alltag: Die Einkaufsliste  

Die Situation: Sie und Ihr Partner haben eine Einkaufsliste auf Papier.

Das Ergebnis: Sie haben nun doppelt Milch gekauft. Ihre Listen waren nicht auf dem gleichen Stand.

Genau dieses Problem haben Apps mit HTTP!

Das gleiche Problem bei Apps  

Die drei wichtigsten Probleme  

Wie lösen Programmierer dieses Problem heute?  

Programmierer nutzen drei Tricks. So können sie HTTP für Echtzeit-Apps nutzen. Alle drei Tricks machen viel Arbeit:

// Der Browser fragt alle 5 Sekunden nach neuen Daten
setInterval(async () => {
const response = await fetch('/api/project/status')
const data = await response.json()
updateUI(data)
}, 5000) // Das passiert alle 5 Sekunden

Das wichtigste Problem  

Diese drei Lösungen sind nur Notlösungen. Programmierer verbringen viel Zeit mit diesen Problemen. Sie haben dann weniger Zeit für neue Funktionen der App.

Die Lösung: Reaktive Backends  

Die neue Regel: Automatische Updates  

Sie haben eine gemeinsame Einkaufsliste auf dem Handy. Ihr Partner streicht "Milch" durch. Sie sehen die Änderung sofort auf Ihrem Handy. Sie müssen nicht nachfragen. Alles passiert ganz automatisch!

So funktioniert es: Die gemeinsame Einkaufsliste  

1. Sie öffnen die App. Sie sehen die gemeinsame Einkaufsliste.
2. Der Server merkt sich: "Diese Person schaut auf die Einkaufsliste."
3. Ihr Partner streicht Milch durch. Der Server schickt Ihnen automatisch die Änderung.
4. Ihre App aktualisiert die Liste. Sie sehen sofort die durchgestrichene Milch.

Convex: Ein Beispiel aus der Praxis  

Convex hat drei wichtige Funktionen:

1. Automatisches Merken (Reactive Queries) – Der Server kennt die benötigten Daten.
2. Alles oder Nichts (Transactional Mutations) – Änderungen sind immer komplett.
3. Immer verbunden (Real-time Subscriptions) – Eine dauerhafte Verbindung ohne viel Arbeit.

Funktion 1: Automatisches Merken (Reactive Queries)  

Das Problem: Der Server muss den Empfänger der Nachricht kennen.

Die Lösung: Convex merkt sich die Nutzer automatisch.

Zurück zur Einkaufsliste: Sie und Ihr Partner öffnen die Liste. Der Server merkt sich das. Ihr Partner streicht "Milch" durch. Der Server informiert nur Sie beide. Andere Nutzer bekommen keine Nachricht.

Code-Beispiel  

// Convex Query: Automatisches Merken
export const getShoppingList = query({
args: { listId: v.id("shoppingLists") },
handler: async (ctx, { listId }) => {
  // Convex merkt sich automatisch:
  // "Dieser Browser schaut auf diese Einkaufsliste"
  const list = await ctx.db.get(listId)
  return list
},
})

// Im Browser: Automatische Updates
const shoppingList = useQuery(api.lists.getShoppingList, { listId })
// Die Anzeige aktualisiert sich automatisch bei einer Aenderung!

Funktion 2: Alles oder Nichts (Transactional Mutations)  

Das Problem: Ein Fehler passiert mitten in einer Änderung. Was tun?

Die Lösung: Bei Convex klappt alles oder gar nichts.

Ein Beispiel mit Geld:

Sie machen eine Überweisung:

1. Geld vom Konto A abbuchen.
2. Geld auf Konto B einzahlen.

Was ist das Problem? Ein Fehler passiert im zweiten Schritt. Dann ist das Geld weg!

Atomare Transaktion bedeutet:

• Entweder passieren BEIDE Schritte.
• Oder KEINER der beiden Schritte passiert.
• Es passiert nie nur ein Schritt!

Code-Beispiel  

// Convex Mutation: Alles oder Nichts
export const checkOffItem = mutation({
args: { 
  listId: v.id("shoppingLists"),
  itemName: v.string(),
},
handler: async (ctx, { listId, itemName }) => {
  // Alles zusammen ist eine atomare Transaktion
  const list = await ctx.db.get(listId)
  
  if (!list) {
    throw new Error("Die Einkaufsliste ist nicht da")
  }
  
  // Den Artikel finden

Die vier Garantien (ACID-Regeln):

• Unteilbar: Alles oder nichts.
• Konsistent: Die Daten sind immer gültig.
• Isoliert: Gleichzeitige Änderungen stören sich nicht.
• Dauerhaft: Erfolgreiche Änderungen sind fest gespeichert.

Funktion 3: Immer verbunden (Real-time Subscriptions)  

Das Problem: Wie informiert der Server Sie ohne Verzögerung?

Die Lösung: Convex hält eine dauerhafte Verbindung offen.

Das Geniale: Sie müssen sich nicht um WebSockets kümmern!

Convex richtet die Verbindung automatisch ein. Sie programmieren Ihre App ganz normal. Die Updates kommen automatisch.

Code-Beispiel  

// Das muessen Sie schreiben (es ist sehr einfach!):
import { ConvexProvider, ConvexReactClient } from 'convex/react'

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!)

function App() {
return (
  <ConvexProvider client={convex}>
    {/* Alle Teile hier bekommen automatische Updates */}
    <ShoppingListApp />
  </ConvexProvider>
)
}

// In Ihrer App: Sie fragen ganz normal Daten ab

Sie müssen NICHTS programmieren für:

• Den Aufbau der Verbindung.
• Die Überwachung der Verbindung.
• Die neue Verbindung nach einem Abbruch.
• Das Empfangen von Updates.
• Die Aktualisierung der Anzeige.

Convex macht all diese Dinge automatisch!

Der Vergleich: Alt gegen Neu  

Hier sehen Sie die Unterschiede in einer Tabelle:

Eigene Server und Datenschutz  

Sie können Convex auf eigenen Servern betreiben. Das ist wichtig für Firmen mit strengen Regeln für den Datenschutz.

Der Code ist offen zugänglich (Open Source). Sie können das Backend in Ihrer eigenen Firma laufen lassen. Das gibt Ihnen die volle Kontrolle über alle Daten.

Die Funktionen: Das eigene Backend enthält alle wichtigen Funktionen.

Hinweise zum Datenschutz (DSGVO): Convex ist eine Firma aus den USA. Bei der Nutzung der Cloud gehen Daten in ein Drittland. Sie brauchen dafür einen speziellen Vertrag. Für viele normale Apps reicht das völlig aus. Bei sehr wichtigen Daten ist ein eigener Server besser. Dazu zählen zum Beispiel Gesundheitsdaten oder Bankdaten.

Unser Tipp: Für die meisten Internetseiten können Sie die Managed Cloud nutzen. Sie ist sicher. Eigene Server lohnen sich nur für Banken, Krankenhäuser oder Behörden.

Der Wechsel: Von alt zu neu  

Wie schwer ist der Wechsel?  

Es gibt eine gute Nachricht. Sie müssen nicht alles sofort ändern. Sie können Schritt für Schritt wechseln.

Ein Beispiel: Wie viel einfacher wird der Code?

Vorher: Mit dem alten System (HTTP)  

Was ist hier das Problem?

Code-Beispiel  

// Altes System: Viel zu kompliziert!
// Backend (Express.js)
app.get('/api/projects/:id', async (req, res) => {
const project = await db.projects.findById(req.params.id)
res.json(project)
})

app.patch('/api/projects/:id', async (req, res) => {
const updated = await db.projects.update(req.params.id, req.body)
res.json(updated)
})

// Frontend (React + Redux)
const ProjectView = ({ projectId }) => {
const dispatch = useDispatch()

Nachher: Mit Convex (viel einfacher!)  

Der Unterschied ist riesig!

Zusammenfassung: Sie schreiben nicht mehr Hunderte Zeilen Code. Sie nutzen zwei einfache Befehle. Den Rest übernimmt Convex.

Code-Beispiel  

// Convex Backend (viel einfacher!)
export const getShoppingList = query({
args: { listId: v.id("shoppingLists") },
handler: async (ctx, { listId }) => {
  // Einfach Daten holen. Convex merkt sich automatisch den Nutzer.
  return await ctx.db.get(listId)
},
})

export const checkOffItem = mutation({
args: { 
  listId: v.id("shoppingLists"),
  itemName: v.string(),
},
handler: async (ctx, { listId, itemName }) => {

Vergleich der Geschwindigkeit (mit Zahlen)  

Ein Beispiel: 1.000 Personen nutzen Ihre App gleichzeitig.

Grenzen der Technik  

Internetverbindung ist wichtig  

Reaktive Backends brauchen eine aktive Internetverbindung. Die App kann sonst keine Daten abgleichen. Für Offline-Apps brauchen Sie zusätzliche Technik.

Aufwand für den Wechsel  

Sie müssen alten Code oft neu schreiben. Wir empfehlen einen langsamen Wechsel.

Hilfe für Offline-Apps: Es gibt auch gemischte Lösungen. Der Browser speichert Daten lokal ab. Er gleicht Daten bei einer Internetverbindung ab. Das macht aber zusätzliche Arbeit beim Programmieren.

Zusammenfassung und Tipp  

Unsere Meinung: Für Echtzeit-Apps brauchen Sie reaktive Backends. Der Wechsel lohnt sich auf jeden Fall.

Weitere Links zum Thema  

• Convex Anleitungen – Die offiziellen Erklärungen und Beispiele. Es gibt eine kostenlose Version zum Testen.
• Das Reactive Manifesto – Die Grundregeln für reaktive Systeme. Das ist etwas technisch.
• Regeln für WebSockets – Die offizielle Technik-Seite für WebSockets. Das ist nur für Experten.