Making your Bubble app faster with Process Spreading

Making your Bubble app faster with Process Spreading

Process Spreading is the method of improving your Bubble app’s performance by taking a process that adds a delay to your app and spreading it out over several steps to make each of them less noticeable for the user. In other words, you’re not actually speeding up the process itself, but simply tweaking your user interface in a way that makes it seem faster. 

This line of thinking is a central part of app design, and one that is frequently repeated in the Bubble speed guide. Performance is as much, or more, about how fast your app is perceived to be, as how fast it actually is. Process Spreading is one out of many tools you can use to strengthen that illusion.

To understand process spreading, let’s take a look at a few examples:

The multi-step form

Everybody knows the multi-step form. It’s a common tool used in SaaS app onboarding for example, and can be a sensible way to not overload your user with a huge form that requires scrolling through. But multi-step forms can also make sense from a performance standpoint – instead of placing a time-consuming big workflow at the end of the last step, you create smaller workflows for each step that is finished. The time that has passed and the job that has been completed is the same, but your user is more forgiving when it’s separated into smaller packages.

Does that mean every form should be multi-step, or that you should never place all your actions at the last step? No. Remember, performance is one feature among many. A typical challenge is that multi-step forms can leave ghost records in your database, where a Thing is created in the first step, and then the User abandons the form. Use multi-step process spreading as an available tool, like everything else.

The multi-step form is of course an example of a potentially broadly applied philosophy: by splitting up your processes in chunks instead of performing everything in one big operation hides from your user how time-consuming it really is.

Outsourcing expressions

Have you ever noticed that a workflow with an Only when condition is slowing down the entire process? The reason is of course that you’re adding an extra step that Bubble has to work through before the action can be run – indeed even if the action doesn’t run because the condition’s result is negative.

Bubble editor showing a condition with a demanding expression.

In this example, we have an app that only allows for 500 registered Users. You might think that the workflow will simply not run if there are more than 500 Users, since the condition would give a negative result. But what is the condition? Well, you’re asking Bubble to tell the server to search through all the Users in your app, count them and send the result back to your browser. Now that’s not a huge operation by any means, but it’s not instant: even the distance between your computer and the server adds a slight delay to this, and the actual processing time comes on top of that.

So if that condition is necessary, how can we avoid that delay? By what I call outsourcing the expression. Just like we did in the last example of multi-step forms, we’re still performing the same actions, but we’re spreading it out over time while the User is looking at something else.

Bubble editor with a Group that is performing a condition as its data source.

Take a look at the image below. A Group can contain every kind of content. A User. A custom Thing, and yes, even a Yes/No. In the example below, I’m performing the search on that group, and the content of the Group is simply a yes or no response to the result of that search. The Group in this case is blue for you to see it, but would of course be hidden in a real app. Why would we do this? Because this allows you to perform the search before the result of it is needed in the workflow. Going back to the action and condition we set up earlier, it can now look like this:

Screenshot of editor showing a lighter version of the same condition.

Just like in the multi-step form, we’re still performing the same search, but because it’s already finished when the workflow is executed, the final result will finish faster.

I hope this can help you improve your app’s performance, and let us know in the comments if you have any questions! This, and many other performance tips and tricks are available in The Ultimate Guide to Bubble Performance, available on Gumroad!


More Posts

Custom states VS URL parameters for navigation in Bubble

A lot of Bubble tutorials and guides describing page navigation default to using custom states for hiding and showing Groups. While states will work just fine in many cases, it has its limitations and shouldn’t be used simply because it’s

How to add keyboard shortcuts to your Bubble App

Keyboard shortcuts have been a natural part of desktop applications since… well, forever. For web applications it’s really in the last few years that they’ve started to become commonplace enough for users to actually remember to use them. Not to

Bubble vs WordPress – what’s the difference?

When people first hear about Bubble, they often quickly draw the comparison to WordPress. It’s not that far-fetched – after all, they’re both platforms that allow non-coders to set up a website, create content and publish it for the world

How to do complex calculations in Bubble

The Bubble expression editor – you know… this one: … is pretty good! But if you’re trying to do more complex mathematical expressions, you’ll find that the built-in editor has its limits. You can easily set up basic arithmetic like

Leave A Reply

Your email address will not be published. Required fields are marked *


Useful articles and tips

Useful articles and tips

Join the mailing list to get guides, opinions and articles on Bubble, no-code, automation and the tech industry.

You have Successfully Subscribed!

Share This