Bubble-zu-Code-Migration: Wann, Warum und Was es kostet
Ein Leitfaden für Teams, die Bubble verlassen, basierend auf Claude Code und Codex. Dies ist für Gründer und CEOs, die ein Unternehmen auf Bubble aufgebaut haben und die Mängel der Plattform zu spüren beginnen.
TLDR
Eine Migration ist eine Geschäftsentscheidung, bevor sie eine technische ist. Eine echte Bubble-App mit zahlenden Kunden und Workflows braucht einige Monate, um sie richtig neu aufzubauen. Teams, die dies getan haben, nennen drei bis fünf Monate pro App, und sie beschönigen die Schätzung nicht.
Budgetmäßig liegen die meisten Teams für einen vollständigen Neuaufbau zwischen 15.000 und 25.000 US-Dollar, abhängig von den Funktionen und der Datenkomplexität. Wenn Sie es selbst machen möchten, kostet es Ihr Team Zeit statt Geld.
Der Vorteil der Migration ist, dass Sie den Code besitzen, die App schneller wird und Sie auf eine Weise finanzierbar und akquirierbar werden, wie es eine Bubble-App nie ganz ist. Was Sie übernehmen, sind die Dinge, die Bubble stillschweigend für Sie erledigt hat, wie Sicherheitspatches, Backups und Verfügbarkeit, die nun in Ihrer Verantwortung liegen.
Aber mit Claude Code und Codex kann ein viel kleineres Team das neu aufbauen, wofür früher ein ganzes Team sechs Monate brauchte.
Sollten Sie von Bubble zu benutzerdefiniertem Code migrieren?
Bubble ist in vielen Dingen gut. Es kann Ihre Idee ohne ein Entwicklerteam vor zahlende Nutzer bringen, aber es gibt eine Obergrenze, und es gibt Anzeichen dafür, dass Sie diese erreicht haben.
- Die App-Performance sinkt, wenn die Nutzerzahl wächst
- Kleine Änderungen können Dinge kaputt machen, die Sie nicht angefasst haben
- Sie benötigen etwas, das Bubble nicht kann, wie z.B. intensive Hintergrundverarbeitung
- Ihr Team verbringt ein Drittel bis die Hälfte seiner Zeit damit, Fehler zu beheben, anstatt Dinge zu verbessern
- Die Kosten pro Workload-Einheit steigen, und die Skalierung der Nutzung macht es schlimmer, nicht besser
Aber der Fehler, den die Leute hier machen, ist, die Migration als Alles-oder-Nichts zu behandeln. Das ist sie nicht.
Sie haben ein paar Optionen, bevor Sie Ihre Bubble-App komplett neu aufbauen. Sie können nur den Teil neu aufbauen, der tatsächlich kaputt ist, und den Rest auf Bubble belassen.
Einer unserer Kunden hatte eine gut verwaltete Bubble-App, die einen WebSocket-Dienst benötigte, um eine Flotte verbundener Kühlschränke zu verwalten. Wir haben keine vollständige Migration empfohlen.
Eine benutzerdefinierte Backend-Komponente, die die Hardware mit der bestehenden App verband, war alles, was sie brauchten. Alles andere blieb in Bubble.
Das ist die Art von Entscheidung, die es wert ist, getroffen zu werden, bevor Sie mit der Migration Ihrer Bubble-App beginnen. Wir helfen Teams mit einem Migrations-Audit, bevor sie sich zu einem Neuaufbau verpflichten. Wenn Sie prüfen, ob ein Agent zu Ihrem Prozess passt, bevor Sie sich für eine Migration entscheiden, beginnen Sie damit zu verstehen, was ein KI-Agent tatsächlich ist.
Wenn es eine Sache gibt, die Bubble nicht kann, können Sie diese Funktion immer noch mit Code erstellen und Bubble für alles andere verwenden.
Wenn Performance und Kosten Probleme verursachen, die App aber funktioniert, planen Sie einen vollständigen Neuaufbau in Phasen.
Wenn Sie überall an die Grenzen gestoßen sind, z.B. bei der Beschaffung von Finanzmitteln, oder wenn Sie den Quellcode besitzen möchten, planen Sie eine vollständige Migration.
Wenn Sie jedoch noch die Produkt-Markt-Passung finden oder die App wöchentlich geändert wird, bleiben Sie bei Bubble. Eine Migration wäre jetzt verfrüht.
Nur eine Sache, die Bubble nicht kann, alles andere läuft gut
Bauen Sie dieses eine Teil in Code, Rest bleibt auf Bubble
Performance und Kosten sind ein Problem, die App funktioniert aber
Planen Sie einen vollständigen Neuaufbau in Phasen
Sie sind überall an die Grenze gestoßen (Finanzierung, Code-Eigentum)
Planen Sie eine vollständige Migration
Noch auf der Suche nach Produkt-Markt-Passung, App ändert sich wöchentlich
Bleiben Sie bei Bubble. Migration wäre jetzt verfrüht
Was benutzerdefinierter Code Ihnen bietet, was Bubble nicht kann
Ein häufiger Fehler ist es, den Wechsel als eine Möglichkeit darzustellen, den Problemen von Bubble zu entfliehen. Das ist richtig, aber unvollständig.
Echtzeitfunktionen (WebSockets)
Sie können Live-Dashboards, kollaboratives Bearbeiten und sofortige Benachrichtigungen erstellen. Benutzer sehen Updates sofort, ohne die Seite aktualisieren zu müssen, wodurch die Anwendung reaktionsschnell und modern wirkt.
Direkter Zugriff auf KI/ML-Modelle
Sie können KI-Modelle direkt in Ihr Produkt integrieren, anstatt sich auf restriktive Drittanbieter-Plugins zu verlassen. Dies gibt Ihnen die volle Kontrolle über Modellauswahl, Leistung, Fähigkeiten und Kosten.
Echte native mobile Apps
Erstellen Sie echte iOS- und Android-Anwendungen mit nativer Leistung, Geräteintegrationen und einer ausgefeilten Benutzererfahrung, anstatt eine verpackte Web-App zu erstellen.
Hintergrundverarbeitung
Sie können langlaufende und rechenintensive Aufgaben zuverlässig im Hintergrund ausführen, ohne durch Nutzungskontingente eingeschränkt zu sein.
Sub-Sekunden-Performance-Optimierung
Sie können Datenbankabfragen, Caching und Anwendungsarchitektur optimieren, um die Benutzererfahrung zu verbessern.
Volle Infrastrukturkontrolle
Wählen Sie Ihren Cloud-Anbieter, Ihre Bereitstellungsstrategie und Ihren Skalierungsansatz, während Sie Ihre Sicherheits-, Compliance- und Kostenanforderungen erfüllen.
Keine Preisgestaltung pro Aktion
Halten Sie die Kosten vorhersehbar, indem Sie für die von Ihnen genutzte Infrastruktur bezahlen, anstatt für jede Workflow-Ausführung oder Benutzeraktion belastet zu werden.
Wie dasselbe in Bubble vs. in Code gemacht wird
Tabellen und Felder hinzufügen
Bubble: Erstellen Sie einen Datentyp im Tab “Data” und fügen Sie Felder hinzu.
Code: Definieren Sie ein Datenbankschema, und ein KI-Agent generiert die Migration.
Daten suchen oder abfragen
Bubble: Verwenden Sie “Do a search for” mit Einschränkungen.
Code: Schreiben Sie eine Abfrage mit SQL oder einem ORM, wobei der KI-Agent den Großteil der Implementierung generiert.
Geschäftsregeln und Workflows
Bubble: Erstellen Sie Workflows, indem Sie Aktionen auf die Workflow-Leinwand ziehen.
Code: Definieren Sie Funktionen, die als Reaktion auf Ereignisse ausgeführt werden, wobei der KI-Agent die Logik implementiert.
Bedingte Logik
Bubble: Fügen Sie Aktionen “Only when”-Bedingungen hinzu.
Code: Verwenden Sie Standard-If-Anweisungen und andere Programmierkonstrukte.
Benutzerauthentifizierung
Bubble: Die Authentifizierung ist integriert und funktioniert sofort.
Code: Wählen Sie einen Authentifizierungsanbieter und integrieren Sie ihn in Ihre Anwendung.
Datei-Uploads
Bubble: Dateien werden automatisch hochgeladen und gespeichert.
Code: Konfigurieren Sie den Objektspeicher und implementieren Sie den Upload-Flow selbst.
Integration von Drittanbieter-APIs
Bubble: Verbinden Sie APIs mit dem API Connector, ohne Code zu schreiben.
Code: Führen Sie direkte API-Aufrufe durch, was Ihnen die vollständige Kontrolle über Anfragen, Authentifizierung und Fehlerbehandlung gibt.
E-Mail-Versand
Bubble: Verwenden Sie eine integrierte Aktion oder ein Plugin.
Code: Integrieren Sie einen E-Mail-Dienst und konfigurieren Sie Zustellbarkeitseinstellungen wie SPF und DKIM.
Geplante Aufgaben
Bubble: Verwenden Sie “Schedule API Workflow”.
Code: Führen Sie geplante Aufgaben mit Cron-Jobs oder Hintergrund-Workern aus.
Zugriffssteuerung
Bubble: Konfigurieren Sie Datenschutzregeln (Privacy Rules).
Code: Implementieren Sie Row-Level-Security und serverseitige Autorisierung.
Änderungen bereitstellen
Bubble: Klicken Sie auf “Preview” oder “Deploy”.
Code: Committen Sie Änderungen an Git, lassen Sie CI-Tests laufen und stellen Sie über eine Release-Pipeline bereit.
Debugging
Bubble: Durchlaufen Sie Workflows mit dem Debugger.
Code: Überprüfen Sie Logs, führen Sie automatisierte Tests aus und reproduzieren Sie Probleme lokal.
Versionskontrolle
Bubble: Verlassen Sie sich auf Bubbles Speicherpunkte und Versionshistorie.
Code: Verwenden Sie Git für vollständige Versionshistorie, Branching, Code-Reviews und zuverlässige Rollbacks.
Wo Bubble-Migrationen schiefgehen
Fast jeder teure Fehler bei einer Bubble-Migration resultiert aus einer erforderlichen Änderung der Denkweise.
Visuelle Workflows werden zu Code
In Bubble haben Sie Workflow-Schritte gezogen. Im Code lebt die Logik in Funktionen, die ausgeführt werden, wenn etwas passiert: ein Benutzer klickt, eine API wird ausgelöst oder ein Timer startet.
Die Logik ist dieselbe. Das “Wo sehe ich es” ist völlig anders, und das ist das Erste, was die Leute verwirrt.
Ihre Bubble-Datenbank wird zu einer echten Datenbank
Bubbles Datentypen werden zu Tabellen. Felder werden zu Spalten.
Sie müssen jetzt Regeln erstellen. Ein Feld, das eine Zahl enthalten soll, wird Text ablehnen. Bubble war einfach. Postgres ist es nicht, und die Strenge ist sowohl ein Feature als auch, während der Migration, ein Bereich, in dem viele Fehler passieren.
Datenschutzregeln müssen Sie selbst erstellen
In Bubble entschieden Datenschutzregeln (Privacy Rules), wer was sehen konnte. In benutzerdefiniertem Code ist nichts geschützt, bis Sie den Schutz schreiben. Der Standardzustand einer neuen App ist offen. Jede Regel, die Sie in Bubble hatten, muss neu aufgebaut werden. Wenn Sie dies überspringen, werden Sie anfällig für eine Datenpanne.
Sie benötigen verschiedene Dienste für Frontend und Backend
Bubble bündelte Frontend, Backend, Datenbank und Hosting in einem einzigen Editor. Bei benutzerdefiniertem Code sind dies separate Dienste. Das klingt nach mehr Verwaltungsaufwand, und das ist es auch, aber es ist auch genau das, was zwei KI-Agenten ermöglicht, gleichzeitig an verschiedenen Teilen zu arbeiten.
Plugins werden zu Paketen und APIs
Das Bubble-Plugin, das Sie mit einem Klick installiert haben, wird zu einer Bibliothek oder einer API, die Sie direkt aufrufen. Das bedeutet mehr Kontrolle und mehr Zuverlässigkeit, aber etwas mehr Einrichtung.
Vorbereitung auf die Migration Ihrer Bubble-App
Es gibt keinen “Ein-Klick-App-Migrations”-Button in Bubble. Sie können weder Ihr HTML noch Ihre Workflows exportieren. Was Sie exportieren können, sind Ihre Daten, und selbst das birgt einige Herausforderungen.
Der Tab “Data” ermöglicht es Ihnen, jeden Datentyp als CSV herunterzuladen. Da Sie Editor-Zugriff haben, umgeht dies die Datenschutzregeln, sodass Sie alles sehen.
Die Data API gibt 100 Datensätze pro Anfrage zurück, was bedeutet, dass Sie eine Cursor-basierte Paginierung benötigen, um alles abzurufen.
Dann gibt es das Problem mit Dateien und Bildern. Wenn Sie eine CSV-Datei exportieren, sind Ihre Dateien und Bilder nicht darin enthalten. Was enthalten ist, sind die URLs, die auf den Speicherort dieser Dateien bei Bubble verweisen. Wenn Sie ohne Übertragung Ihrer Dateien migrieren, werden diese URLs ungültig, und die Assets sind verschwunden.
Workflows und UI müssen von Grund auf neu erstellt werden, da keine Ihrer Logik exportiert wird. Jemand muss aufschreiben, was jeder Workflow tut.
Das ist mühsam, und Sie werden viel Zeit hier verbringen. Aber das Dokument, das Sie erstellen, ist Ihre Spezifikation. Es ist genau das, woraus die KI-Agenten aufbauen werden.
Und überprüfen Sie Ihre Datenschutzregeln jetzt, bevor Sie den Zugriff darauf verlieren. Schreiben Sie jede einzelne auf, da sie Ihr gesamtes Autorisierungsmodell definiert. Wenn sie unvollständig ist, fehlen Ihrer neuen App Sicherheitsregeln, von denen Sie nicht wussten, dass Sie sie hatten.
Medien- und Dateihosting
Jedes Mal, wenn ein Benutzer ein Profilfoto oder ein PDF in Ihre Bubble-App hochgeladen hat, hat Bubble es in AWS gespeichert und eine URL dafür zurückgegeben. In benutzerdefiniertem Code wählen Sie S3 oder Cloudflare R2 und müssen die Pipeline dafür erstellen.
Die Migration selbst hat eine bestimmte Reihenfolge der Operationen, und ein Fehler dabei führt zu dauerhaftem Datenverlust.
Exportieren Sie zuerst Ihre Daten, denken Sie daran, dass Sie URLs erhalten, nicht Dateien. Führen Sie dann ein Skript aus, das jede Datei von jeder URL herunterlädt, bevor das Bubble-Hosting verschwindet. Laden Sie dann alles in Ihren neuen Speicher hoch. Und schließlich schreiben Sie jede gespeicherte URL in Ihrer Datenbank um, um auf den neuen Speicherort zu verweisen.
- Daten exportieren (URLs, keine Dateien)
- Jede Datei herunterladen
- In neuen Speicher hochladen
- Gespeicherte URLs umschreiben
Einige Bubble-URLs sind signiert und laufen ab, daher müssen Sie entscheiden, welche Dateien öffentlich und welche privat sind. Und Bubble verwendete ein CDN, um Dateien weltweit schnell bereitzustellen, während Dateigrößen- und Zugriffsregeln durchgesetzt wurden. All das müssen Sie nun selbst einrichten.
Nichts davon ist isoliert betrachtet schwer. Das Problem ist, nicht zu wissen, dass es existiert, bis ein Benutzer meldet, dass seine Dateien verschwunden sind.
Datenbereinigung
Jemand, der noch nie eine App migriert hat, wird dies nicht als große Herausforderung betrachten.
Bubbles Datenbank ist einfach. Felder können leer sein, obwohl sie es nicht sein sollten. Ein Feld kann für 9.000 Datensätze eine Zahl und für die anderen 12 Text enthalten. Beziehungen zwischen Dingen werden als Referenz gespeichert und driften über Jahre des realen Gebrauchs auseinander. Nichts davon verursachte offensichtliche Probleme in Bubble, da Bubble keine Strenge durchsetzte.
Dann wechseln Sie zu Supabase oder Xano, und der Import schlägt fehl. Weil Ihre Daten die Regeln verletzen.
Nullwerte, wo ein Wert erforderlich ist. Verwaiste Referenzen, die auf gelöschte Datensätze verweisen. Doppelte E-Mails in einem Feld, das eindeutig sein sollte. Daten werden in drei verschiedenen Formaten gespeichert.
Ihre Optionssätze werden als IDs oder Anzeigetext exportiert, nicht als Fremdschlüssel, was es schwierig macht, sie mit den richtigen relationalen Daten zu verknüpfen.
Bubble exportiert verknüpfte “Dinge” als Referenz-IDs, nicht als die lesbaren Beziehungen, die Sie im Editor sehen, und die Rekonstruktion, wie alles miteinander verbunden ist, erfordert viel Arbeit.
Die Zeit, die Sie mit dem Bereinigen, Deduplizieren und Abgleichen exportierter Bubble-Daten verbringen, wird immer die Zeit übersteigen, die Sie für das Schreiben des Imports selbst aufwenden.
Dies ist normalerweise der Punkt, an dem Teams ein zweites Paar Augen wünschen.
Wir haben diese Migrationen schon durchgeführt: das erneute Hosten von Dateien, die Authentifizierungs-Umstellung, das Audit der Datenschutzregeln. Besprechen Sie es, bevor Sie sich auf einen Plan festlegen.
Umgang mit Benutzerauthentifizierung und Migration von Konten
Bubble erlaubt Ihnen nicht, die Passwort-Hashes Ihrer Benutzer zu exportieren. Es ist gut, dass diese schwer zu extrahieren sind. Das bedeutet aber, dass Sie die Passwörter Ihrer Benutzer nicht einfach in ein neues System verschieben und alle sich anmelden lassen können, als ob nichts geschehen wäre.
Die erste Lösung ist ein erzwungener Passwort-Reset. Alle wechseln gleichzeitig. Beim Cutover muss jeder Benutzer sein Passwort zurücksetzen, und Sie senden ihm einen Reset-Link per E-Mail. Der Vorteil ist ein sauberer, einfacher, einmaliger Wechsel. Für die Unternehmen, denen wir bei der Migration geholfen haben, wählen wir ein Zeitfenster mit geringem Traffic, wie ein Wochenende.
Die zweite ist die schrittweise Migration. Sie behalten das neue Authentifizierungssystem neben dem alten bei. Wenn sich jeder Benutzer nach dem Cutover zum ersten Mal anmeldet, überprüft das neue System seine Anmeldeinformationen einmal gegen das alte Bubble-System und speichert dann das Passwort. Von da an sind sie vollständig migriert.
Für die meisten Apps mit weniger als ein paar tausend Benutzern ist ein erzwungener Reset einfacher und die geringe Reibung wert. Verwenden Sie den schrittweisen Ansatz, wenn ein erzwungener Reset Sie Benutzer kosten würde oder wenn Ausfallzeiten teuer sind.
Neben Passwörtern müssen Sie auch alles andere über Ihre Benutzer migrieren. Profile, Rollen, Berechtigungen, all das wird als Daten verschoben.
Ein paar weitere Dinge, die Sie planen müssen: Alle aktiven Sitzungen werden beim Cutover ungültig, sodass sich jeder einmal abmelden muss; soziale Logins wie Google müssen neu verknüpft werden; und jede Multi-Faktor-Einrichtung muss neu registriert werden.
Sie können zwischen einem verwalteten Authentifizierungsanbieter wie Auth0 oder Clerk wählen, der die schwierigen Teile gegen eine Gebühr übernimmt, oder einer Authentifizierungsbibliothek, die Sie selbst mit mehr Kontrolle und Verantwortung betreiben.
Ich empfehle immer, für einen verwalteten Anbieter zu bezahlen, es sei denn, Sie haben einen bestimmten Grund, dies nicht zu tun. Authentifizierung ist einer dieser Bereiche, in denen die Kosten für einen kleinen Fehler sehr hoch sind.
Datensicherheit
In Bubble geschah Sicherheit meistens, ob Sie darüber nachgedacht haben oder nicht. Im Code ist der Standardzustand Ihrer App ungeschützt, und jede Sicherheitsebene ist etwas, das Sie bewusst hinzufügen.
Jede Bubble-Datenschutzregel muss als echte serverseitige Logik neu aufgebaut werden, oft mit Row-Level-Security in der Datenbank.
Das Geheimnismanagement ist der nächste Schritt. Geheimnisse wie API-Schlüssel sollten in serverseitigen Umgebungsvariablen gespeichert werden.
Wenn das Framework, auf dem Sie aufgebaut haben, ein Sicherheitsupdate veröffentlicht, liegt es an Ihnen, es anzuwenden. Bubble hat dies im Hintergrund für Sie erledigt. Darüber hinaus sind Sie nun für die Verschlüsselung während der Übertragung und im Ruhezustand verantwortlich, die größtenteils durch gute Standardeinstellungen und Ihre Hosting-Wahl abgedeckt wird, aber es liegt jetzt in Ihrer Verantwortung, dies zu bestätigen, anstatt anzunehmen, und für die Eingabevalidierung, da Ihre eigenen API-Endpunkte der Welt ausgesetzt sind und sich gegen schlechte Eingaben verteidigen müssen.
Datensicherheit ist ein Grund, warum es schiefgehen kann, wenn man es alleine macht, ohne jemanden, der es schon einmal gemacht hat – leise und teuer.
Was Bubble stillschweigend für Sie erledigt hat
Es sollte inzwischen klar sein, dass Bubble viele Dinge für Sie erledigt hat. Aber Sie können dasselbe auch tun, solange Sie wissen, was Sie selbst tun müssen.
Automatische tägliche Backups
Sie müssen Backups konfigurieren, meist automatisch bei verwalteten Datenbanken
DDoS-Schutz
Wird normalerweise von Ihrem Hosting oder CDN übernommen, sobald eingerichtet
SSL-Zertifikatserneuerung
Ist wieder automatisch, muss aber einmal bestätigt werden
CDN
Sie richten es einmal mit Cloudflare ein
Autoscaling
Sie wählen einen Host, der es tut, oder Sie stimmen es ab
Log-Aufbewahrung
Sie können Ihr eigenes Logging-Setup wählen
Compliance (SOC 2 etc.)
Hängt weitgehend von Ihrem Datenbankanbieter ab. Ist wieder eine einmalige Einrichtung
Der Grund, sie aufzulisten, ist nicht, Sie abzuschrecken. Es ist, damit “wir müssen Backups einrichten” etwas ist, das Sie geplant haben.
Auswahl des Tech-Stacks
Sie können React, Next.js oder jedes andere Frontend-Framework wählen. Alle KI-Agenten kennen alle Frameworks.
Da KI-Agenten den Großteil des Codes schreiben, sind die Kosten für eine bestimmte Stack-Wahl niedriger als früher. Obwohl LLMs dazu neigen, React und Next.js zu bevorzugen und gut darin sind.
Was zuerst migrieren
Sie sollten sich immer auf das Backend konzentrieren. Ihre Datenbank, Ihre Authentifizierung und Ihre Kern-API sind die Grundlage, auf der alles aufgebaut ist.
Wenn Sie diese zuerst erstellen, können Sie bestätigen, dass Ihre Daten intakt sind. Wenn ich ein LLM dafür empfehlen müsste, wählen Sie Codex. Es ist gut für Backend- und datenintensive Operationen.
Die Konzentration auf das Frontend funktioniert zuerst, wenn die Benutzeroberfläche das Problem ist und Sie ein neues Frontend mit der bestehenden Data API von Bubble verbinden können. Sie können damit beginnen, die App Modul für Modul zu ersetzen, während Bubble als Backend dient.
Ich empfehle, die Migration Modul für Modul zu bearbeiten. Wählen Sie ein einzelnes Modul und bauen Sie es komplett durch, Datenbank, API und UI, von oben nach unten.
Auf diese Weise werden Sie viel darüber lernen, wo Dinge für Sie schiefgelaufen sind, denn das werden sie, bevor Sie sich zur Migration von allem verpflichtet haben.
Welches Sie auch wählen, wählen Sie Ihr erstes Modul nach derselben Logik: geringste Abhängigkeiten.
Zeichnen Sie auf, welche anderen Module davon abhängen, bevor Sie beginnen. Lassen Sie das am stärksten vernetzte Modul für den Zeitpunkt, an dem die Grundlagen solide sind.
Wenn Sie sich zuerst auf die schwierigste Aufgabe stürzen, werden Sie Probleme bekommen.
Aufbau des Frontends und eines Designsystems
Wenn Sie anfangen, Seiten ohne System zu erstellen, erhalten Sie das, was jeder als KI-generierte App erkennt.
Die Lösung ist ein Designsystem. Das bedeutet Ihre Farben, Abstände und Typografie. Dann werden Komponenten aus diesen Tokens erstellt, die Schaltflächen, Karten und Eingabefelder. Dann werden die Seiten aus Komponenten zusammengesetzt.
Wenn Sie es in dieser Reihenfolge aufbauen, ist die Konsistenz automatisch. Aber wenn Sie zuerst Seiten erstellen, wird Ihre App niemals konsistent aussehen.
Wenn Sie Designs in Figma haben, können Sie Figma direkt mit Claude Code und Codex verbinden, sodass der Agent die Benutzeroberfläche erstellt.
Claude ist besser als Codex, wenn es um Frontend geht. Lassen Sie den Agenten einen Screenshot dessen machen, was er mit Playwright erstellt hat, und überprüfen Sie ihn. Dies verbessert die Ausgabe in der Benutzeroberfläche dramatisch.
Vom Standard-Look wegzukommen, ist meistens eine Frage der Erfahrung, anstatt das erste zu akzeptieren, was der KI-Agent erstellt. Hier macht jemand mit Geschmack den Unterschied zwischen “sieht aus wie eine Vorlage” und “sieht aus wie ein Produkt”.
Aufbau des Backends und der Logik
Der Backend-Build ist hauptsächlich eine Übersetzungsübung aus der Dokumentation, die Sie zuvor erstellt haben. Jeder Bubble-Workflow wird nun ein API-Endpunkt sein.
Implementieren Sie zuerst die Datenschutzregeln neu. Jede Regel, die Sie zuvor geprüft haben, wird zu serverseitiger Logik und Row-Level-Security. Lassen Sie sich nicht vom Agenten versichern, dass er “Sicherheit hinzugefügt” hat. Überprüfen Sie, ob jede spezifische Regel aus Ihrem Audit existiert und funktioniert. Agenten behaupten manchmal, dass etwas funktioniert, obwohl es nicht der Fall ist.
Zweitens, starten Sie die Datenmigration. Importieren Sie die bereinigten Daten in das neue Schema, führen Sie den Datei-Rehosting-Prozess aus und überprüfen Sie dann, ob die Datensatzanzahlen übereinstimmen. Zählen Sie die Datensätze im alten System, zählen Sie sie im neuen und bestätigen Sie, dass sie übereinstimmen.
Und schließlich, verschieben Sie geplante und Hintergrundarbeiten. Bubbles geplante API-Workflows sollten in Cron-Jobs oder Warteschlangen-Worker umgewandelt werden.
Einrichten einer Codebasis, in der die LLM-Agenten arbeiten können
Sie werden wahrscheinlich Claude Code oder Codex verwenden, um bei der Migration zu helfen. Wenn nicht, empfehle ich Ihnen dringend, dies zu tun, und Sie müssen ein paar Dinge tun, um sicherzustellen, dass die Agenten effektiv sind.
CLAUDE.md ist eine Datei, in der Sie Anweisungen und Regeln für Claude Code schreiben. Sie dient als Leitfaden, der Claude sagt, wie Ihr Projekt funktioniert, welche Codierungsstandards zu befolgen sind und was es sich über Ihre Präferenzen merken soll.
Sie wird zu Beginn jeder Sitzung geladen und hilft Claude, bessere Entscheidungen über Ihren Code zu treffen. Teilen Sie domänenspezifische Regeln in separate Dateien auf, die nur bei Bedarf geladen werden.
Strukturieren Sie dann das Repository so, dass Frontend und Backend getrennt sind, da dies parallele Agenten ermöglicht. Wenn die Grenzen klar sind, können zwei Agenten arbeiten, ohne sich gegenseitig in die Quere zu kommen.
Die Dokumentation, die Sie zuvor erstellt haben, wird nun zu Ihren Produktanforderungen, aufgeteilt in kleine, vollständige vertikale Slices.
Verwenden Sie Git vom ersten Tag an. Es wird Ihnen helfen, Branches und Commits zu erstellen und die vollständige Historie zu bewahren. Dies ist Ihr Sicherheitsnetz. Wenn ein Agent eine Änderung vornimmt, die Ihnen nicht gefällt, können Sie sie mit Git sauber rückgängig machen.
LLMs verbessern sich täglich, aber sie machen immer noch Fehler. Ohne Versionskontrolle setzen Sie Ihr gesamtes Projekt aufs Spiel.
Claude Code ist gut für Frontend- und UI-Arbeiten. Codex ist gut für Backend-lastige Datenbankarbeiten. Die einfachste Aufteilung erfolgt also entlang der Frontend-Backend-Aufgaben.
Und bauen Sie mit einem Agenten (Claude oder Codex), und lassen Sie den anderen eine kritische Überprüfung des Ergebnisses durchführen. Der Überprüfungsmodus von Codex ist gut dafür. Ein Agent schreibt, der andere überprüft es, und Sie erhalten besseren Code, als jeder allein produzieren würde.
Halten Sie Kontexte getrennt. Geben Sie nicht beiden Agenten dieselben Informationen. Konzentrieren Sie jeden Agenten auf seinen spezifischen Bereich, um die Leistung zu verbessern. Ein Backend-Agent muss Ihre CSS-Regeln nicht kennen.
Sie können beide Agenten gleichzeitig ausführen, indem Sie ein Terminal verwenden, das sich in Bereiche aufteilt, mit tmux oder zellij, oder indem Sie jeden Agenten auf ein separates Verzeichnis verweisen, oder mit Git-Worktrees, die es Agenten ermöglichen, ohne Merge-Konflikte zu arbeiten.
Führen Sie eine gemeinsame Aufgabenliste und markieren Sie Abhängigkeiten explizit, damit ein Agent keine Arbeit beginnt, die von etwas abhängt, das der andere noch nicht abgeschlossen hat. Überprüfen Sie ständig den Git-Status. Überprüfen Sie Änderungen, bevor sie committet werden. Und lassen Sie niemals zwei Agenten gleichzeitig dieselben Dateien bearbeiten.
Die Qualität leidet, wenn die Aufgaben nicht klar definiert sind. Wenn Sie Agenten unklare Aufgaben geben, könnten sie überlappende Rollen übernehmen und am Ende Teile erstellen, die nicht gut zusammenarbeiten. Geben Sie daher immer spezifische und gut definierte Aufgaben.
Hinzufügen von Qualitäts-Gates
Sie benötigen ein Sicherheitsnetz, das bei jeder Änderung, die LLM-Agenten vornehmen, ausgeführt wird, ohne dass jemand daran denken muss, es auszulösen. Das sind diese Gates.
Pre-Commit-Hooks werden automatisch ausgeführt, bevor Code committet wird. Formatierer, Linter, Secret-Scanner, damit ein API-Schlüssel niemals versehentlich committet wird, und grundlegende Tests.
Sie können die Korrektheitsprüfungen automatisieren, sodass sie stattfinden, bevor Code überhaupt zur Überprüfung gelangt. Linting- und Formatierungskonfigurationen geben den Agenten einen konsistenten Stil vor, der die Codebasis auch dann lesbar hält, wenn verschiedene Agenten verschiedene Teile geschrieben haben.
Kontinuierliche Integration stellt sicher, dass Ihr Code die Definition von “Done” erfüllt, indem sie sicherstellt, dass er ausführbar ist. Wenn Tests vor der Bereitstellung bestanden werden müssen, wird das Problem “es funktioniert auf meinem Rechner” eliminiert, da CI jedes Mal dieselben Prüfungen ausführt.
Testen Sie immer die Ausgabe der Agenten, bevor Sie sie in die Produktion bringen. Das Überprüfen ist schneller, als alles selbst erneut auszuführen, und es funktioniert auch für Sitzungen, die Sie nicht beobachtet haben. Noch besser: Lassen Sie einen zweiten Agenten mit frischem Kontext versuchen, Lücken in der Arbeit des ersten Agenten zu finden. Der Agent, der die Arbeit erledigt hat, sollte nicht derjenige sein, der sie bewertet.
Wo die KI-Agenten versagen
Jeder hypet KI-Codierung. Sie sind hervorragend darin, schnell Code zu generieren, über viele Dateien hinweg zu arbeiten, klar definierte Aufgaben zu bearbeiten und klaren Konventionen zu folgen. Nutzen Sie sie dafür. Aber verlassen Sie sich nicht auf sie für Geschäftslogik.
Sie können kleine, leicht zu übersehende Fehler haben, und schlecht entworfene Tests können diese möglicherweise nicht identifizieren. Sie neigen auch dazu, zu behaupten, dass Schutzmaßnahmen vorhanden sind, z.B. dass eine Autorisierungsregel hinzugefügt wurde, obwohl dies nicht der Fall war, oder dass eine Datenschutzregel existiert, obwohl keine vorhanden ist.
Wenn Sie keine Überprüfung durchführen und Feedback geben, würden sie lieber die bequeme Bibliothek verwenden, nicht die richtige, weil ein KI-Agent darauf optimiert ist, die Aufgabe zu erledigen, anstatt die beste langfristige Wahl zu treffen.
KI-Agenten helfen Ihnen bei der Migration von Bubble-Apps. Sie ersetzen nicht das Wissen, wie “korrekt” aussieht. Ein Team, das versteht, wie “korrekt” aussieht, arbeitet viel schneller. Ein Team, das es nicht versteht, wird schnell eine kaputte, unzuverlässige App haben.
Viele Leute werden Ihnen sagen, Sie sollen an dieser Stelle einfach eine Agentur beauftragen. Ich sage nur, dass die Lücke zwischen einem schnellen KI-Agenten und dem Wissen, wann etwas nicht stimmt, der Grund ist, warum erfahrene Hilfe sich auszahlt. Ob es wir sind oder jemand anderes, lassen Sie die Agenten nicht ihre eigene Arbeit bewerten.
Wer pflegt es nach dem Start?
Sobald Sie migriert sind, müssen Sie es nun warten. Sie können einen Ingenieur einstellen, die Agentur, die es gebaut hat, behalten oder Claude oder Codex verwenden, wenn das Produkt einfach ist. Jede dieser Optionen ist in Ordnung.
Kosten für den Betrieb einer Bubble-App vs. Code
Ihre alte Bubble-Rechnung war einfach. Bubble-Plan plus Workload-Unit-Überschreitungen, wenn die Nutzung anstieg. Aber jetzt hat Ihre neue Rechnung ein paar weitere Anbieter. Hosting, eine Datenbank, Objektspeicher für Dateien, ein Authentifizierungsanbieter, ein E-Mail-Dienst, Überwachung und eine Domain.
Zuerst steigen Ihre Kosten. Aber wenn Ihre App wächst, wird sie billiger als Bubble, besonders für Apps mit hoher Nutzung. Der Vorteil sind nicht nur niedrigere monatliche Kosten. Sie erhalten eine schnellere App und ein Asset, das Sie vollständig besitzen.
Wo die Migration von Bubble schiefgeht
Diese Liste wird sich wie ein Overkill anfühlen, bis Ihnen eines davon passiert.
- Zu glauben, es gäbe einen Ein-Klick-Export von Bubble zu Code. Den gibt es nicht, und eine Planung darum verschwendet Wochen.
- Zu vergessen, dass exportierte Dateien nur URLs sind, und jedes Asset zu verlieren, wenn das Bubble-Hosting abläuft.
- Eine große Tabelle über die Data API in einer Anfrage zu ziehen und stillschweigend nur 100 Datensätze zu erhalten.
- Zu versuchen, Passwort-Hashes zu migrieren, die Sie nicht exportieren können, anstatt eine Reset- oder Trickle-Strategie zu planen.
- Die Datenschutzregeln nicht neu zu implementieren, wodurch die Daten der neuen App weit offen liegen.
- Alles in eine riesige CLAUDE.md zu stopfen.
- Den Agenten vage Anweisungen wie “ein Dashboard bauen” zu geben.
- Die Agenten große, dateiübergreifende Umschreibungen in einem Rutsch machen zu lassen. Machen Sie kleine Änderungen.
- Zwei Agenten bearbeiten gleichzeitig dieselben Dateien.
- Einem Agenten zu vertrauen, dass etwas funktioniert, anstatt es selbst zu überprüfen.
- Keine Woche für die Datenbereinigung aufzuwenden.
- Zu vergessen, dass Sie jetzt für Backups, Patches und Verfügbarkeit verantwortlich sind.
- Den Cutover ohne Rollback-Plan durchzuführen.
Bereit, Ihre Migration zu planen?
Die meisten Neuaufbauten kosten zwischen 15.000 und 25.000 US-Dollar über drei bis fünf Monate. Wir werden Ihre in einem Anruf festlegen. Und wenn eine teilweise Migration alles ist, was Sie brauchen, werden wir Ihnen das sagen.
Lassen Sie uns reden
Teams, die das umsetzen, sehen Ergebnisse im ersten Sprint.
Vereinbaren Sie ein entspanntes 30-minütiges Gespräch. Bringen Sie alles mit, was Sie beschäftigt — wir helfen Ihnen, es zu durchdenken, ob Sie je mit uns arbeiten oder nicht.
- Ein freundliches Gespräch, kein Verkaufsgespräch
- Keine Vorbereitung, keine Verpflichtung, kein Druck
- Gehen Sie mit Ihren Fragen beantwortet