Best practices building Bubble.io apps
Best practices about Data, Workflows, Elements and Backend workflows.
Standards provide a consistent set of guidelines and best practices that can be followed by developers. This helps ensure that all Bubble applications created by Airdev are high quality, reliable, secure, and easy to maintain.
If you build your Bubble applications using the techniques described here, they will benefit from the following:
- 1.Improved scalability: Applications are designed and built in a way that allows them to easily handle increased usage and workloads as they grow.
- 2.Enhanced security: By reducing the risk of security vulnerabilities and other issues that could compromise the safety and integrity of your application.
- 3.Increased efficiency: As a developer you can save time and effort, as you can rely on known patterns and practices, avoiding having to reinvent the wheel with every new project.
- 4.Better reliability: To guarantee that they are reliable and perform to their full potential.
In this article, you'll find tips and guidance on the best practices for building web apps in Bubble, covering topics such as Data, Workflows, Elements, and Backend workflows.
By following these best practices, you can create a professional and high-quality web app that meets the needs of our clients and stands out.
By following these best practices for working with data in Bubble, you will help your application be secure, scalable, and work well for all different users.
Data privacy is an important aspect of any web app, and it is crucial to ensure that:
- 1.All the Data types/fields are properly protected (review emails, invoices, private ids, personal information, etc.)
- 2.All the users have access to the relevant data for their role
- 3.Usually, the creator of an object should be able to access it
- 4.Usually, admins have access to all or nearly all the data in the application
- 5.If the Data API is enabled, setup carefully who can create/modify/delete data via the API
- 6.Sometimes data only needs to be visible for certain roles, but that doesn’t mean that it needs to be searchable
Database design mistakes that may cause the app to not be scalable or to have poor performance. Be sure not to have:
- Fields of type ‘list’ that could have more than 100 items (bad performance). Instead, create a data type that links to the original data type.
- Missing links between data types: think about links that may not seem necessary but could help set up privacy rules, so you don't end up with a "* Rules that use "This Object X's Y" can't grant search access right now" for example.
An Option Set is a type of element that allows you to create a list of predefined options that can be used in various parts of your application. It can be used to control user roles, set up page security, or create dropdown menus or radio buttons for user input.
They are created in the "Data" tab of your Bubble project. Once an Option Set is created, it can be referenced in various places in your app, such as workflow conditions, or UI elements such as dropdown menus or radio buttons. Option Sets are a powerful tool for organizing and controlling the data and functionality of your app, and they can be customized and updated as needed to meet the changing needs of your app.
Follow the next best practices:
- 1.Don't have unused Option sets: Option sets are downloaded to all pages, being in use or not, unused ones do nothing more than add their size to the page. And even though they are usually light, if they are not referenced anywhere in the app, they should be removed.
- 2.Make sure that all pages have their corresponding option in the ‘Bubble pages’ Option set and that it is correctly set up so pages are properly secured from unauthorized access.
- 3.If the app is not using Canvas, make sure that your pages are properly secured, meaning that only users of the adequate role can access them.
- 4.Do not store sensitive information (personal, financial, Keys, Secrets, etc.) that needs to be private on Option sets. All the application's Option sets are downloaded to the user browser and easily accessible.
Follow the next best practices to ensure a good performance / easier app maintenance:
- Do every x seconds: use cautiously or they can degrade your app performance. Use conditions so it only triggers when necessary. And always put the lighter to check condition first.
- Do when (every time / just one): same as above
- Don't repeat Workflows in a page that can be put on a custom workflow to avoid high-maintenance apps
- Workflows that are repeated in different pages should be put on a reusable element or backend workflow to be accessed from anywhere in the application
- Study Workflows that are slightly different and determine if they can be joined in a Custom Workflow (remember that you can now pass more than one parameter to a Custom Workflow).
- Workflows with too many actions, study:
- if they can be simplified to help performance
- or made modular using custom workflows to make their maintenance easier
- Workflows that take too long to complete and make a bad UX:
- Study if some actions can be moved to the backend or if the workflow can be simplified
- ‘Copy a list of things…’ actions won't work for more than 100 items: use recursive workflows
- 'Schedule API workflow on a list' are unreliable and can fail without giving any alert, instead use recursive workflows
- Be sure that your workflows have adequate and descriptive names to make their maintenance easier
- Use workflows folder to make maintenance easier
- 'Set state' actions to see if they can be replaced by variables or using several parameters in a Custom Workflow: to make their maintenance and debugging easier
Regarding your page elements, make sure that:
- The page responsiveness is correctly setup: You can use the Chrome inspector tools to test the app with different screen widths.
- Avoid having heavy pages where the editor struggles to manage. Instead convert sections into reusables to light up the page
- Elements that are repeated throughout the application should be converted into reusable elements to be used in several pages
- Be careful with Repeating Groups with Layout style set to ‘Full list’ as those might create a performance issue easily when the number of items grows exceeds a certain number. Use only those with lists that will hold less than 20-30 items at most
- You have to be extremely careful with Elements that load big pictures, as they add their size to the page size and can cause high load times. Pictures should be optimized so their size is the minimum to offer good quality.
- Searches (workflows, repeating groups, hidden variables) should be optimized. Avoid:
- advanced filters: they are performed on the page and are slower than search constraints and simple filters performed on the server. Also, they can cause poor performance due to the amount of data that has to be downloaded to the browser. Is it possible to simplify?
- Nested searches/repeating groups: same as above. Is it possible to simplify? are they really needed?
- Do not use the :count operator if it's not necessary. For example, if you want to check if a Search has results, don't use "Search:count > 0", use "Search:first item is not empty" instead, as the first Search has to be completely performed to check the condition, and the second Search will stop as soon as 1 result is retrieved.
- Review conditions that can be reordered to improve performance:
- Bubble still check conditions from left to right (as of Jun 2022), so always put the lighter condition on the left, because when a condition is not met Bubble doesn’t check the following condition/s, for example:
- OK: Group X is visible and Search:first item is not empty(if the group is not visible, the search is not performed)
- Not OK: Search::first item is not empty and Group X is visible (the search is performed even though the group may not be visible)
Spending a little extra time to give a descriptive name to a Group or Workflow folder will help you, or another developer, in the future. The cleaner and better structured our apps are, the more gain in the long run for all of us.
- When using variables (if the app is using Canvas, review the Hidden Variables popup) avoid:
- Unnamed or poorly named variables
- Unnecessary variables
- Redundant variables
- Also, to facilitate the app maintenance:
- Are variables properly organized?
- Are there deprecated variables that should be removed?
- If you have searches (or other types of data sources) repeated on the same page, they might be saved in a variable and referenced later where needed (this will help future maintenance if the search needs to be updated).
- Add comments on the following items to facilitate maintenance and/or debugging:
- Database objects that aren't self-explanatory
- Database fields that aren't self-explanatory
- Particularly complex workflows
- Carefully review the conditions for stopping recursive workflows and check that they are set up correctly so they don't run indefinitely
Review all your application API endpoints to make sure that they are correctly protected. Look for:
- If the endpoint is using Bubble API Token authentication
- If the endpoint is not using Bubble API Token authentication (some 3rd party services can’t use it), review that any other method has been built to protect the endpoint against attacks
For a more comprehensive guide on application security, please review our Bubble Apps Security Reference.