Scaling a no-code system like Bubble requires creative solutions to overcome its inherent limitations. At CodeCompass, we've developed a hybrid approach that allows us to leverage the strengths of Bubble while integrating traditional code solutions for scalability. Here’s a technical breakdown of how we manage complexity and scale our Bubble-based platform.
1. Micro-Frontends with Angular and React
One of the biggest challenges with Bubble is that it doesn’t offer the flexibility needed for highly interactive and complex user interfaces. To solve this, we build separate Angular and React applications and embed them in our Bubble app using iframes. This approach provides several benefits:
- Better performance: We offload complex UI rendering to modern frameworks.
- Greater flexibility: We can build highly customized interfaces without Bubble’s constraints.
- Incremental migration: We replace Bubble features one at a time as their requirements solidify.
By embedding these micro-frontends, we maintain the core of our application in Bubble while iteratively upgrading components without a full rewrite.
2. Authentication with Bubble and SAML
Security and authentication are critical when integrating micro-frontends. We use Bubble authentication as the primary identity provider and implement SAML-based authentication to authenticate our micro-apps. Here’s how it works:
- User logs into Bubble, which acts as the main authentication hub.
- When a user accesses an embedded micro-frontend, the app requests authentication via SAML Single Sign-On (SSO).
- The micro-frontend validates the SAML response, granting access without requiring a separate login.
- Session tokens and user roles are synced to maintain a seamless experience across both environments.
This setup ensures a unified authentication experience while allowing us to scale frontend components independently.
3. Data Synchronization via Cron Jobs
Bubble’s database is optimized for no-code use but isn’t well-suited for complex querying and large-scale operations. To address this, we set up cron jobs that pull data from Bubble into our micro-apps on a scheduled basis.
- Data extraction: We use Bubble’s API to fetch relevant data at regular intervals.
- Transformation & storage: Data is processed and stored in a more optimized database for querying.
- Performance optimization: By offloading intensive operations, our micro-apps run faster without overloading Bubble’s backend.
This approach gives us the ability to build more performant features while still leveraging Bubble for workflows and backend logic.
4. Incremental Feature Replacement Strategy
We don’t replace Bubble features all at once. Instead, we take an incremental migration approach, replacing features one at a time as we gain a better understanding of user needs and workflow configurations.
- Step 1: Identify features that require more flexibility or better performance.
- Step 2: Build and deploy micro-frontends with improved functionality.
- Step 3: Use Bubble to continue managing non-critical or evolving features.
- Step 4: Gradually transition more logic to traditional code as patterns solidify.
This method allows us to evolve our architecture over time without disrupting existing users.
Conclusion
By combining Bubble with traditional frontend frameworks, SAML authentication, scheduled data synchronization, and an incremental migration strategy, we’ve created a scalable system that maintains the agility of no-code while leveraging the power of custom development.
This approach ensures we can adapt to new requirements, scale efficiently, and maintain a robust architecture as our product grows.
To learn more about how we manage scaling complexity in the modern development era of no-code and AI, check out CodeCompass.