Building Modular: How Bubble Builds Bubble for Scale

It’s the kind of scenario that’s a good problem to have: You’ve built an app, established product-market fit, grown your userbase, and now … you need to figure out how your app development is going to scale with this demand.

It’s not uncommon to prioritize speed and time-to-market when first building the earliest versions of tech products. You want to validate your idea, collect feedback as soon as possible, and get to market quickly. This sometimes means sacrificing responsible software development principles — the idea being that you can go back later and clean things up when you have more time. In practice, this can lead to duct tape, patchy bug fixes, and tech debt rather than a stable, well-organized, easy-to-maintain app. 

How can you avoid ‌liabilities without sacrificing speed? At BubbleCon 2023, our internal team of Bubble Developers held a session exclusively for virtual attendees on how to build modularly, why it matters, and even demonstrated how Bubble applies these principles to our own web app, Bubble.io.

Watch the replay below or keep reading for the recap and key takeaways from Building Modular: How Bubble Builds Bubble for Scale, featuring Senior Product Manager Nick Carroll as moderator and Senior Bubble Developer Andrew Vernon, Bubble Development Manager Maria Posa, and Bubble Developer Sam Morgan as panelists.

Understanding “modular” and why it matters

Nick kicked off the panel by level-setting on what “modular” means: “Breaking your app up into small reusable parts that can be called or referenced in multiple places. This includes the design, data, and logic components of an app,” he explained. 

An example of a modular technique might be “a custom event that opens a popup and focuses on an input.” This custom event represents a small chunk of instructions that can be saved, called, and invoked elsewhere throughout your app whenever you’d like, without having to recreate the logic each time you want to incorporate this functionality.

The concept is simple enough to grasp — but why does it matter? As apps grow, they inevitably get more complex. More features are added, more details need to be managed, and more developers might be added into the mix. Nick says that “by investing upfront in building modular, you can support growth more gracefully, because you have a more organized, maintainable, and scalable app.”

Building modularly on Bubble

One of the key modular principles in software development applies to traditional coding and no-code alike: DRY (Don’t Repeat Yourself). 

In other words, if you’re going to do something multiple times, it’s worth seeing if you can turn that thing into a reusable module. This not only helps you build faster, but it makes your app more maintainable because you’re less likely to make errors rebuilding the same thing in multiple places.

At Bubble, we call these reusable modules reusable elements. The name says it all — in the words of Nick, “reusable elements are the Cadillac of building modular.” Think about reusable elements as blocks of logic and UI that can be dropped throughout your app as needed.

Nick touched on other key Bubble features that allow you to build modularly, including custom events, backend workflows, option sets, and styles:

• Custom events with properties allow reusable blocks to be context-aware, making them super flexible and smart.
• Backend workflows can be used to define specific actions that sometimes need to happen on different pages, like automating a welcome email or updating a database field after a user changes their email address.
• Option sets are a particularly helpful time-saver for static, public lists, allowing you to define and reference a list of items globally.
• Styles may sound obvious, but defining how your app looks and feels so you can easily reuse relevant colors, fonts, padding, etc. ensures your app’s design is effortlessly consistent.

Bubble’s internal team of developers pull back the curtain on Bubble.io

Learning about modular principles and modular Bubble features is well and good, but actually seeing how these principles and features are applied is a totally different ballgame.

Maria, Andrew, and Sam each covered an example of how Bubble incorporates modularity into our own website. The result is a site that a small team can easily update and maintain while still supporting three million users.

You’ve probably seen user testimonials across Bubble at one point or another. As Maria explained, “On Bubble.io, we show carousels of testimonials in a few places. For example, you can see them on our Immerse and Careers pages.”

Maria’s team has built an internal admin page that allows even non-developers on the team to jump in and quickly add, edit, and update these testimonials. 

Andrew echoed Maria’s sentiments on building modularly with reusable elements and custom events when showcasing Bubble’s content admin system. “You might be tempted to copy and paste logic wherever it’s needed throughout your app,” he cautioned. “In general, centralizing and reusing existing logic leads to more organized and maintainable apps – and better data integrity.” 

Data integrity is one of the biggest reasons the internal Bubble Developer team embraces modularity to develop experiments at scale. Sam explained that modularity allows Bubble.io to continuously run A/B tests to help optimize the new user experience. “We use modular logic that can be called and re-arranged from any iteration on our UI, and still achieve consistent results despite the UI experiment.”

The demo app used in the Building Modular session is open and accessible for the community to explore and learn from. Delve into the editor and run mode to see Bubble’s modular practices in action.