Canvas Documentation
Bubble Best Practices
v3.7
v3.7
  • Introduction
  • Key Features
  • What's New
  • For Designers
  • CANVAS FUNCTIONALITY
    • Getting Started
    • Branding & Design
    • Marketing Pages
    • Bubble Pages & Blocks
    • Roles & Permissions
    • Menus & Navigation
    • Data & Workflows
    • Emails & Alerts
    • Miscellaneous
      • Setting up two factor authentication
      • Cookie and consent banner
      • Setting your password policy
      • Set up Payment info on Account page
      • Loading screen
      • Configuring multiple languages
      • Customizing your app's portal page colors
    • Reference
      • Pages
        • Index
        • Admin Portal
        • Account
        • Login
        • Legal
        • Reset Password
        • 404
      • Reusable elements
        • Header
        • Footer
        • Signup & Login
        • Cookies Permission
        • Widgets
          • App security
          • Header Widgets
          • Workflow Widgets
        • Admin Portal
          • Admin analytics
          • Admin email & templates
          • Admin header & footer
          • Admin legal popups
          • Admin branding, launch, and settings
          • Admin marketing pages
          • Admin portal canvas logic
          • Admin options settings
        • Menu Focus Elements
      • Data types
      • Option Sets
      • Backend Workflows
      • Design standards
        • Manually Building UI
  • Bubble Best Practices
    • Learning Bubble Basics
    • Principles
    • Database
    • Design
    • Security
    • SEO
    • Speed
    • Modularity
      • Data triggers
  • Canvas library
    • Page templates
      • Free Bubble Marketing Page
      • Premium Bubble Marketing Page
      • Centered Profile Page
      • Left-Justified Profile Page
      • Standard page
      • Toggle Tabs Page
      • Menu Page
      • Mobile Menu Page
      • Video List Page
      • Standard Portal / Dashboard Page
      • Simple Portal / Dashboard Page with Icons
      • Double Sidebar Portal Page Template
      • Search Page
      • Map Search Page with Toggle and Filters
      • Floating Map Search Page
      • Search Bar Page
      • Multi-Step Page With Progress Bar
      • Standard Multi-Step Process Page
      • Multi-Step Process Page with Sidebar
      • Gallery Profile or Product Page
      • Sidebar Profile Page
      • 2-Column Menu Tabs Page
      • 2-Column Checkout Page
      • 2-Column Video Chat Page
      • Vertical Multi-Step Page Template
    • Blocks
      • Monthly Calendar Scheduling Widget
      • No Reply Comments Thread
      • Nested Comments Thread (with Like and Reply)
      • Placeholder Group
      • List with Circular Progress Bar Repeating Group
      • Top Input Chat Widget
      • Bottom Input Chat Widget
      • Toggle Tabs Group
      • Single-Select or Multi-Select Pill Tabs Group
      • Settings group
      • To-Do List Repeating Group
      • Title Group with Button and Filters
      • Product Details Group With Progress Bar
      • Listing details with Icons and Menu Focus Group
      • Week Daily Availability Group
      • Frequently Asked Questions (FAQ) Repeating Group
      • Dismissible Module
      • Video Group
      • About Group
      • Add to Cart Group
      • Full Width Map with Directions Link
      • Location Module (Map and Directions)
      • Drag and Drop Repeating Group
    • Popups
      • Confirmation Popup
      • Message Popup
      • Image Popup
      • Video Popup
      • Vertical Scroll Popup
      • Edit Popup
      • Standard Form Popup
      • Subscribe Popup
      • Feedback / Contact Popup
      • Details Popup
      • Add List Popup
      • Advanced Form Popup
      • Rating Popup
      • Toggle Tabs Popup
      • Share Popup
      • Multi-Step Popup
      • Invoice Popup
      • Stripe Credit Card Purchase Popup
      • View Profile Popup
      • Send Message Popup
      • Multi-Select Pill Tabs Popup
      • Pricing Plans Popup
Powered by GitBook
On this page
  • What is modularity?
  • When to convert a workflow to an API workflow or custom workflow
  • When to use an API workflow instead of a custom workflow
  • When to use a custom workflow instead of an API workflow
  • When to use a reusable element
  • When to create a plugin
  • App Templates
  • AirDev Canvas

Was this helpful?

  1. Bubble Best Practices

Modularity

Don't repeat yourself: how to build once and reuse whatever it is that you make.

What is modularity?

When building functionality that is used in multiple places throughout the application, you should build in small chunks (modules) that can be replicated or used in other parts of the app. AirDev recommends splitting app logic and UI into modular pieces when Bubble complexity reaches a point where it causes confusion.

An example:

You have a complex sign-up flow where users' personal information has to pass through multiple steps of verification. Users must be able to access this sign-up flow from multiple pages of the app, and from different types of buttons for desktop and mobile users.

In order to set up this example, we can build this functionality in a Reusable Element (like Bubble's signup/login reusable) with a Custom Workflow for signing up users.

Before reading through this information, make sure you're familiar with how to use Reusable Elements, API Workflows, Custom Workflows and Plugins. This page covers when/why to use them.

When to convert a workflow to an API workflow or custom workflow

The easiest ways to introduce modularity to your workflows (WFs)are through custom workflows and API workflows. Situations in which you might want to use one of these include:

  • There are >10 steps in a WF (too long for readability/ease of development)

  • Parts of a WF are reused in different places throughout a page

  • A WF in a reusable element needs to be triggered from outside the reusable element

  • An entire WF is copied and reused elsewhere (sometimes with minor changes to conditions)

  • A workflow is slow and sometimes times out (takes >30 seconds and throws an error), causing poor UX

When to use an API workflow instead of a custom workflow

API workflows offer the benefit of being accessible from anywhere in the application, or even from outside of the application via API, and they don't have the same timeout limits as normal workflows. Note, however, that if your application hits capacity, API workflows will be slowed down.

Some times to use API workflows:

  • Action doesn’t need to be completed immediately (e.g. exporting data where the export file is uploaded to the Bubble DB or sent to a user’s email)

  • User WFs keep timing out on the page (take >30 seconds) or users have very poor internet

  • WF is used in multiple pages, and the custom workflow isn’t in a reusable element that is present on each of those pages

  • WFs are triggered from outside the application

If a workflow is timing out, try to speed it up before creating an API workflow. Only move it if you are unable to prevent timeouts from happening.

When to use a custom workflow instead of an API workflow

Custom workflows can be faster than API workflows for the types of actions that a user would expect a near-immediate response from, or actions that a user must wait for before continuing (e.g. signing up for an app). Here are some situations where it is better to use a custom WF:

  • Actions make changes to elements on the page (showing/hiding elements, displaying data in groups, element-type plugins)

    • Alternative strategy: Use an API WF and set a listener to detect when the API WF is done (usually through checking for when changes are made to some object in the DB)

    • This is not ideal, but it is an ok way to get around the 30 second WF timeout

  • The WF is only used on one page, and none of the above API WF reasons are true

  • If the WF is in a reusable element and needs to be triggered from outside the reusable element

Sometimes, the trade-offs between a custom WF and API WF aren't clear until you actually attempt the implementation. In that case, you can try one of the two and see if it performs well enough in terms of execution speed and reliability.

When to use a reusable element

Departing from workflows, reusable elements are useful when you want to make your app's visual design more modular. Here are some situations to use them in:

  • Your app needs to do the same thing (or nearly the same thing) on more than one page

  • Your page is a Single Page Application and a group has complex, but isolated functionality

    • Faster editor loading b.c. of less elements

    • Cleaner WF view

  • The group will likely be reused in other applications or on other pages, and it has some complex functionality

    • E.g. chat, comments, to-do list, menu, instagram-style display, or search filters

When to create a plugin

Users who know how to use the API Connector or who have some Javascript experience should consider creating plugins. This is more useful for creating modularity across applications rather than within the same application - you (or other users) can reuse the same functionality in multiple apps, and update it once in order to update it for everyone.

Situations where it is a good idea to build a plugin include:

  • You create an API through the API Connector and you think other people would find it useful, or you want to use the same API in another Bubble app

App Templates

App Templates are a more unique and labor-intensive way of working modularly, and are more relevant to Bubble developers who will build many apps. This is what our AirDev Canvas template is meant to do - it makes it so that builders can more quickly make fully-featured applications, without having to waste time on setup that you will do with every app you create.

AirDev Canvas

AirDev Canvas allows you to build apps more quickly in a way that creates a visually consistent user experience across mobile and desktop. You can add modules that we have designed and build functionality on top of them, making it a breeze to create pages that look and work great.

PreviousSpeedNextData triggers

Last updated 5 years ago

Was this helpful?

A page uses a lot of custom code through the or you need to create an element with code

Run javascript action