TypeScript überall: Wie Convex.dev die Full-Stack-Entwicklung vereinfacht

Du kennst das Problem: Du willst eine coole Web-App bauen, aber sobald es um Backend, Datenbank und Echtzeit-Updates geht, wird alles kompliziert. WebSockets einrichten, State-Management basteln, Sicherheitsregeln konfigurieren - am Ende verbringst du mehr Zeit mit der Infrastruktur als mit deiner eigentlichen Idee.

Genau hier kommt Convex.dev ins Spiel. Diese Plattform verspricht, das traditionelle Backend-Chaos zu beenden und dir als Entwickler das Leben deutlich einfacher zu machen. Aber hält sie, was sie verspricht? Schauen wir uns das mal genauer an.

Was ist Convex.dev überhaupt?

Stell dir vor, du könntest deine komplette App-Architektur in TypeScript schreiben - Frontend, Backend, Datenbank, alles. Keine verschiedenen Sprachen, keine komplizierten API-Schnittstellen, keine manuellen Updates zwischen Client und Server.

Das ist Convex in einer Nussschale: Eine reaktive Datenbank-Plattform, die deine drei-schichtige Architektur (Frontend - Backend - Datenbank) in einem einzigen, code-zentrierten System zusammenfasst.

Achtung: Namens-Verwirrung!

Bevor wir weitermachen: Es gibt mehrere Projekte namens "Convex". Da ist einmal das MATLAB-Optimierungstool CVX, die DeFi-Plattform Convex Finance und noch ein paar andere. Wir reden hier nur über Convex.dev - die reaktive Datenbank für App-Entwickler.

Diese Namensgleichheit sorgt übrigens regelmäßig für Verwirrung bei der Google-Suche. Also pass auf, dass du auf der richtigen Seite landest!

Das Herzstück: Reaktivität in der Praxis

Was bedeutet "reaktiv" für dich als Entwickler?

Kennst du das von WhatsApp? Du schreibst eine Nachricht, und sie erscheint sofort bei allen anderen - ohne dass jemand die App neu laden muss. Genau das ist Reaktivität.

Bei herkömmlichen Ansätzen müsstest du:

• WebSockets einrichten
• State-Management programmieren
• Cache-Invalidierung implementieren
• Fehlerbehandlung für Verbindungsabbrüche schreiben

Mit Convex machst du einfach das:

// Backend-Query
export const getMessages = query({
  handler: async (ctx) => {
    return await ctx.db.query("messages").collect();
  },
});

// React-Frontend
function ChatApp() {
  const messages = useQuery(api.messages.getMessages);

  return (
    <div>
      {messages?.map(message => (
        <div key={message._id}>{message.text}</div>
      ))}
    </div>
  );
}

Fertig! Wenn jemand eine neue Nachricht schreibt, erscheint sie automatisch bei allen anderen. Convex übernimmt die komplette Synchronisation im Hintergrund.

"Everything is Code" - TypeScript überall

Warum ist das so genial?

Statt zwischen verschiedenen Sprachen und Konfigurationsdateien zu jonglieren, schreibst du alles in TypeScript:

// Datenschema definieren
export const messageSchema = defineTable({
  text: v.string(),
  author: v.string(),
  timestamp: v.number(),
});

// Backend-Mutation
export const sendMessage = mutation({
  args: { text: v.string(), author: v.string() },
  handler: async (ctx, args) => {
    await ctx.db.insert('messages', {
      text: args.text,
      author: args.author,
      timestamp: Date.now(),
    });
  },
});

Das bringt dir mehrere Vorteile:

• Typsicherheit: TypeScript fängt Fehler ab, bevor sie in Produktion gehen
• Autocompletition: Dein Editor weiß genau, welche Felder verfügbar sind
• Ein Kontext: Du musst nicht zwischen Backend- und Frontend-Denkweise wechseln

Sicherheit ohne Kopfschmerzen

Das Problem mit Firebase

Bei Firebase kannst du direkt vom Client auf die Datenbank zugreifen. Das klingt praktisch, führt aber zu einem Albtraum bei den Sicherheitsregeln:

// Firebase-Sicherheitsregeln (kompliziert und fehleranfällig)
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /messages/{messageId} {
      allow read: if request.auth != null;
      allow create: if request.auth != null &&
                   request.auth.uid == request.resource.data.userId &&
                   request.resource.data.keys().hasAll(['text', 'timestamp']) &&
                   request.resource.data.keys().hasOnly(['text', 'timestamp', 'userId']);
    }
  }
}

Convex macht es einfach

Bei Convex läuft alles über Backend-Funktionen. Die Sicherheitslogik schreibst du direkt in TypeScript:

export const sendMessage = mutation({
  args: { text: v.string() },
  handler: async (ctx, args) => {
    // Benutzer authentifiziert?
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) throw new Error('Nicht authentifiziert');

    // Nachricht zu lang?
    if (args.text.length > 280) throw new Error('Nachricht zu lang');

    // Alles okay? Dann speichern!
    await ctx.db.insert('messages', {
      text: args.text,
      author: identity.email,
      timestamp: Date.now(),
    });
  },
});

Viel klarer, oder? Die Sicherheitslogik steht direkt da, wo sie hingehört - im Backend-Code.

Datenmodellierung für Praktiker

Flexibel wie NoSQL, strukturiert wie SQL

Convex verwendet ein hybrides Datenmodell. Du speicherst JSON-ähnliche Dokumente, kannst aber Beziehungen zwischen Tabellen modellieren:

// Benutzer-Tabelle
export const users = defineTable({
  name: v.string(),
  email: v.string(),
});

// Nachrichten-Tabelle mit Beziehung zu Benutzern
export const messages = defineTable({
  text: v.string(),
  userId: v.id('users'), // Beziehung!
  timestamp: v.number(),
});

// Query mit Join
export const getMessagesWithAuthors = query({
  handler: async (ctx) => {
    const messages = await ctx.db.query('messages').collect();

    return Promise.all(
      messages.map(async (message) => ({
        ...message,
        author: await ctx.db.get(message.userId),
      })),
    );
  },
});

Graduelles Schema

Du kannst ohne Schema starten (perfekt für Prototypen) und später strenge Typen einführen:

// Phase 1: Ohne Schema - einfach loslegen
await ctx.db.insert('posts', {
  title: 'Mein erster Post',
  content: 'Hallo Welt!',
});

// Phase 2: Schema hinzufügen für mehr Sicherheit
export const posts = defineTable({
  title: v.string(),
  content: v.string(),
  published: v.optional(v.boolean()),
  tags: v.optional(v.array(v.string())),
});

Der Entwickler-Workflow in der Praxis

Von der Idee zur Produktion

Der Convex-Workflow ist auf Geschwindigkeit optimiert:

# 1. Lokale Entwicklung starten
npx convex dev

# 2. Code schreiben (Backend und Frontend)
# 3. Testen in der lokalen Umgebung
# 4. Deployen mit einem Befehl

npx convex deploy

Das war's! Keine komplizierte Docker-Konfiguration, keine Server-Administration, keine Datenbank-Migrations-Skripte.

Built-in Features, die Zeit sparen

Convex kommt mit vielen Funktionen out-of-the-box:

// Cron-Jobs
export const dailyCleanup = internalMutation({
  handler: async (ctx) => {
    // Alte Nachrichten löschen
    const oldMessages = await ctx.db
      .query('messages')
      .filter((q) =>
        q.lt(q.field('timestamp'), Date.now() - 30 * 24 * 60 * 60 * 1000),
      )
      .collect();

    for (const message of oldMessages) {
      await ctx.db.delete(message._id);
    }
  },
});

// Authentifizierung
export const getCurrentUser = query({
  handler: async (ctx) => {
    return await ctx.auth.getUserIdentity();
  },
});

KI-Integration: Die Zukunft ist jetzt

Warum Convex perfekt für KI-Apps ist

Mit dem "Chef"-Feature kannst du KI-Backends mit einem Klick erstellen. Da alles in TypeScript geschrieben ist, können KI-Tools wie ChatGPT oder Copilot extrem präzisen Code generieren:

// KI-gestützte Funktion
export const generateBlogPost = action({
  args: { topic: v.string() },
  handler: async (ctx, args) => {
    // OpenAI-Call
    const response = await openai.chat.completions.create({
      model: 'gpt-4',
      messages: [
        {
          role: 'user',
          content: `Schreibe einen Blogpost über: ${args.topic}`,
        },
      ],
    });

    // Ergebnis in Datenbank speichern
    await ctx.runMutation(api.posts.create, {
      title: args.topic,
      content: response.choices[0].message.content,
      generated: true,
    });
  },
});

Convex vs. Firebase: Der Praxis-Vergleich

Was Firebase kompliziert macht

// Firebase: Komplex und fehleranfällig
import { initializeApp } from 'firebase/app';
import {
  getFirestore,
  collection,
  onSnapshot,
  addDoc,
} from 'firebase/firestore';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

// Konfiguration
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);

// Echtzeit-Updates einrichten
onSnapshot(collection(db, 'messages'), (snapshot) => {
  const messages = snapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));
  setMessages(messages);
});

// Sicherheitsregeln separat konfigurieren (fehleranfällig!)

Convex macht es einfach

// Convex: Alles in TypeScript, alles sicher
export const getMessages = query({
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) return [];

    return await ctx.db.query('messages').collect();
  },
});

// Frontend
const messages = useQuery(api.messages.getMessages);
// Fertig! Echtzeit-Updates inklusive

Die wichtigsten Unterschiede

Anwendungsfälle aus der Praxis

1. Echtzeit-Chat

// Nachrichten senden
export const sendMessage = mutation({
  args: { roomId: v.id('rooms'), text: v.string() },
  handler: async (ctx, args) => {
    const identity = await ctx.auth.getUserIdentity();
    if (!identity) throw new Error('Nicht angemeldet');

    await ctx.db.insert('messages', {
      roomId: args.roomId,
      text: args.text,
      author: identity.name,
      timestamp: Date.now(),
    });
  },
});

// Frontend
function ChatRoom({ roomId }) {
  const messages = useQuery(api.chat.getMessages, { roomId });
  const sendMessage = useMutation(api.chat.sendMessage);

  // Automatische Updates ohne zusätzlichen Code!
}

2. Kollaboratives Dashboard

// Dashboard-Daten
export const updateMetric = mutation({
  args: { name: v.string(), value: v.number() },
  handler: async (ctx, args) => {
    const existing = await ctx.db
      .query('metrics')
      .filter((q) => q.eq(q.field('name'), args.name))
      .first();

    if (existing) {
      await ctx.db.patch(existing._id, { value: args.value });
    } else {
      await ctx.db.insert('metrics', args);
    }
  },
});

3. E-Commerce mit Inventory

// Produkt kaufen (mit Transaktionsgarantie)
export const purchaseProduct = mutation({
  args: { productId: v.id('products'), quantity: v.number() },
  handler: async (ctx, args) => {
    const product = await ctx.db.get(args.productId);
    if (!product) throw new Error('Produkt nicht gefunden');

    if (product.inventory < args.quantity) {
      throw new Error('Nicht genügend auf Lager');
    }

    // Alles in einer Transaktion - entweder alles oder nichts!
    await ctx.db.patch(args.productId, {
      inventory: product.inventory - args.quantity,
    });

    await ctx.db.insert('orders', {
      productId: args.productId,
      quantity: args.quantity,
      timestamp: Date.now(),
    });
  },
});

Mobile Apps: React Native Integration

// Derselbe Code funktioniert für Web UND Mobile!
import { useQuery, useMutation } from "convex/react";

function TodoApp() {
  const todos = useQuery(api.todos.list);
  const addTodo = useMutation(api.todos.add);

  return (
    <View>
      {todos?.map(todo => (
        <Text key={todo._id}>{todo.text}</Text>
      ))}
      <Button
        title="Hinzufügen"
        onPress={() => addTodo({ text: "Neue Aufgabe" })}
      />
    </View>
  );
}

Open Source: Sicherheit für die Zukunft

Warum Open Source wichtig ist

Viele Entwickler haben noch die "RethinkDB-Lektion" im Kopf - eine innovative reaktive Datenbank, die trotz großartiger Technologie scheiterte und ihre Nutzer im Regen stehen ließ.

Convex lernt aus dieser Geschichte: Das Backend ist vollständig Open Source. Selbst wenn das Unternehmen scheitern sollte, könntest du den Code selbst hosten:

# Selbst-Hosting mit Docker
docker run -p 8080:8080 convex/backend

# Unterstützt verschiedene Datenbanken
DATABASE_URL=postgresql://... docker run convex/backend
DATABASE_URL=sqlite://... docker run convex/backend

Community und Unterstützung

• 6.7k GitHub Stars - zeigt starkes Interesse
• 363 Forks - aktive Community-Beteiligung
• Convex Champions Programm - für Power-User und Feedback

Enterprise-Features: Mehr als nur ein Spielzeug

Compliance und Zertifizierungen

Convex erfüllt wichtige Unternehmensstandards:

• SOC 2 Type II - Sicherheit und Verfügbarkeit
• HIPAA - Gesundheitsdaten-Schutz
• GDPR - Europäischer Datenschutz

Das macht die Plattform auch für größere Projekte interessant, nicht nur für Hobby-Apps.

Monitoring und Observability

// Built-in Logging
export const processPayment = mutation({
  args: { amount: v.number() },
  handler: async (ctx, args) => {
    console.log(`Verarbeite Zahlung: €${args.amount}`);

    try {
      // Zahlung verarbeiten...
      console.log('Zahlung erfolgreich');
    } catch (error) {
      console.error('Zahlung fehlgeschlagen:', error);
      throw error;
    }
  },
});

Kosten und Pricing: Was kostet der Spaß?

Generous Free Tier

Convex startet kostenlos mit:

• Unbegrenzte Funktionen
• 1GB Speicher
• 1M Funktionsaufrufe pro Monat

Das reicht für die meisten Hobby-Projekte und zum Ausprobieren!

Pay-as-you-Scale

Die kostenpflichtigen Pläne orientieren sich an der tatsächlichen Nutzung. Du zahlst nur für das, was du wirklich brauchst - keine überteuerten Enterprise-Pakete für einfache Projekte.

Wann solltest du Convex verwenden?

Perfekt für:

• Echtzeit-Anwendungen: Chat, Collaboration Tools, Live-Dashboards
• Rapid Prototyping: Schnell eine Idee testen ohne Backend-Komplexität
• KI-Integration: LLM-basierte Features einfach einbauen
• Mobile + Web: Eine Codebasis für beide Plattformen
• Solo-Entwickler: Du willst dich auf Features konzentrieren, nicht auf Infrastruktur

Weniger geeignet für:

• Legacy-Integration: Wenn du komplexe SQL-Strukturen migrieren musst
• Extrem spezielle Anforderungen: Wenn du eine hochspezialisierte Datenbank brauchst
• Kritische Performance: Wenn jede Millisekunde zählt und du Full-Control brauchst

Migration von anderen Plattformen

Von Firebase zu Convex

// Firebase Code
const [messages, setMessages] = useState([]);

useEffect(() => {
  const unsubscribe = onSnapshot(collection(db, 'messages'), (snapshot) => {
    setMessages(
      snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      })),
    );
  });
  return unsubscribe;
}, []);

// Convex Äquivalent (viel einfacher!)
const messages = useQuery(api.messages.list);

Daten-Migration

// Migration Script
export const migrateFromFirebase = internalMutation({
  handler: async (ctx) => {
    // Firebase-Daten laden (z.B. aus JSON Export)
    const firebaseData = await loadFirebaseExport();

    for (const item of firebaseData.messages) {
      await ctx.db.insert('messages', {
        text: item.text,
        author: item.author,
        timestamp: item.timestamp,
      });
    }
  },
});

Debugging und Entwickler-Tools

Dashboard und Monitoring

Das Convex-Dashboard zeigt dir in Echtzeit:

• Funktionsaufrufe und Performance
• Datenbankzugriffe und Queries
• Fehler und Logs
• Schema-Änderungen

Local Development

# Lokale Entwicklung mit Hot-Reload
npx convex dev

# Database-Browser im Terminal
npx convex dashboard

# Logs in Echtzeit
npx convex logs

Fazit: Lohnt sich der Wechsel?

Die Wahrheit über Convex

Convex ist nicht perfekt, aber es löst echte Probleme, mit denen jeder Web-Entwickler kämpft:

• Echtzeit-Updates ohne WebSocket-Alptraum
• Sicherheit ohne komplizierte Rules-Engine
• TypeScript überall - ein Kontext, eine Sprache
• Open Source - kein Vendor Lock-in
• KI-Ready für moderne Anwendungen

Meine Empfehlung

Probier es aus! Der Free Tier ist großzügig genug, um ein echtes Gefühl für die Plattform zu bekommen. Bau einen kleinen Chat oder ein Todo-App damit - du wirst überrascht sein, wie wenig Code du brauchst.

Besonders wenn du:

• Indie-Hacker oder Solo-Entwickler bist
• Schnell Prototypen erstellen willst
• Echtzeit-Features brauchst
• Keine Lust auf Backend-Komplexität hast

Convex könnte deine neue Lieblings-Plattform werden.

Häufige Fragen (FAQ)

Ist Convex nur ein Hype oder eine langfristige Lösung?

Die Open-Source-Strategie ist hier der Schlüssel. Selbst wenn das Unternehmen scheitern sollte, bleibt der Code verfügbar. Die starke Community-Aktivität (6.7k GitHub Stars) und die Compliance-Zertifizierungen zeigen, dass es sich um mehr als nur ein Hobby-Projekt handelt. Für langfristige Projekte bietet die Selbst-Hosting-Option zusätzliche Sicherheit.

Wie schwer ist die Migration von Firebase zu Convex?

Überraschend einfach! Die größte Arbeit liegt in der Übersetzung der Firebase-Sicherheitsregeln in TypeScript-Backend-Funktionen. Das Datenmodell ist ähnlich genug, dass eine Migration meist in wenigen Tagen machbar ist. Convex bietet sogar Migration-Tools und -Scripts an.

Kann ich Convex mit meinem bestehenden React/Vue/Angular-Projekt verwenden?

Ja! Convex bietet Client-Bibliotheken für alle gängigen Frameworks. Die Integration ist meist eine Sache von wenigen Stunden. Du kannst sogar schrittweise migrieren - einzelne Features nach und nach auf Convex umstellen, während der Rest deiner App unverändert bleibt.