How can I build apps that feel fast?

Questions
1

Hey guys I’m really excited to get into bubble so that I can build apps fast but I’ve run into an issue.

Let’s say I want to build an app like the Ez Marketplace template. The template is nice but it’s too sluggish for my needs. I need user interaction to trigger immediate UI changes so that it feels snappy.

I tried to use custom state to solve this problem. I think it’s possible in theory, but often complex and time-consuming in practice (as evidence I submit to you this thread where other users struggle with custom state). At that point, building my app in a more traditional tech stack seems easier.

I looked into autobinding but unlike custom state, autobinding isn’t flexible enough for many designs.

Thank you for taking the time to read this. What are your thoughts?

2

What I do is create a custom state with a option set. That has the group name I want to show. Then I have all the groups on the same page with the components in it and it shows instantly.

1 Like
3

It all depends on exactly how you want your site to work of course. You have lots of tools to create fast interactions, including conditions and worklows to show/hide groups on the page rather than having to go to a new page.

I highly recommend the ebook by @petter on Bubble performance. It’s a quick read and will show you how to get the most out of the platform.

PS: in general with Bubble, I found the initial learning period on Bubble requires some work because the platform is so open ended and provides so many methods and tools. I spent a lot of time experimenting with different approaches to see how they worked. If you keep at it, it will all come together and then your speed of development will take off.

1 Like
4

Thank you @gaimed that is a nice tip.

Thank you @ed727 that was a good book I learnt a lot. I think you’re right about Bubble requiring lots of experimentation.

I did eventually get the hang of making the UI update instantly.

I ran into a tricky problem and I’m going to document it here, just in case someone else runs into the same situation.

I needed to make an input which lets the user click buttons to add/remove items to their order, kind of like Uber Eats. The app then automatically creates, updates, or deletes order items in the database. I also needed the UI to update instantly when buttons are clicked.

The end result is this: Foddr | Bubble Editor.

To make this work, I had to:

  1. Store the the input value in custom state.
  2. Update the custom state when the user clicks on the input.
  3. Store the order item in a group.
  4. Run workflows every second which check when the custom state has deviated from the group’s order item and update the order item accordingly.

However, one of the workflows was triggering a database query every second which can cause scaling issues, so I had to:

  1. Make another custom state which is set to Yes whenever the user changes the input.
  2. Only run the workflow when the custom state is Yes.
  3. Make the workflow set the custom state to No.

That was tricky to figure out but it’s clear that Bubble is very flexible.

1 Like
5

Glad you have it working better! There must be a way however to avoid entirely the workflow that has to check every second, even though you don’t have it active that long. Perhaps there’s an approach buried in the forum somewhere. Like maybe the plus and minus signs kick off a workflow that updates the custom state that shows the # of items and it also triggers a backend workflow to update the database.

6

I tried the approach you mentioned but I couldn’t figure out how to stop bugs that happen when the user clicks an input a bunch of times in quick succession. I think your approach might be optimal if I added in some debounce logic but but for now I’m just going to roll with my current approach because that’s the path of least resistance.