In this Bubble tutorial video, I'm going to demonstrate to you one way that you can make your app leaner. You can reduce your workload unit cost and you can cut back on the number of workflows that you have to have on a page or when you're thinking about wanting to display data on a page by default on page load.

ChatGPT clone demo

So I'm going to be using the ChatGPT clone app that we built in a previous video. And basically I have a list of conversations that I've started with ChatGPT and by clicking on one it displays the history of that conversation in this rather minimalist chat interface. And I can swap between them and I have set up the ability so that when the page loads, the first conversation is loaded in and I'll show you how I've done that because I think this is the leanest approach, which is that I've got a repeating group of conversations.

Using Data Source to reduce Workload Units (WU)

So that is one search that Bubble takes place and does when the page loads. And then I have a page body group here which contains a list of all my chat messages and my modular input and my button to interact with ChatGPT. And I say data source repeating groups conversation because that search is already taking place to populate this repeating group. And then I say list of conversations first item. And so when the page loads, this is the source of the data that's going to be put into here.

And then my messages are simply saying conversation equals parents groups conversation and it allows me to easily identify the conversation because the conversation is always page bodies conversation because I've set the title content to conversation.

So that's the leanest approach. I'm going to now demonstrate two ways, or at least two ways that I think you could overcomplicate this. You're going to end up using more workload units and if you don't need to use a workflow and you choose to, then I think that is clearly not a lean way of developing the Bubble.

So this is another way that you could do it, you could put a custom state anywhere on the page and we'll say viewing conversation. Okay? And then I will now say on page load, set state viewing conversation. And remember, these are the not so lean ways of going about it. This is deliberately adding in a workflow when there doesn't need one. And again, I could make this less lean by simply saying list the conversations first item and then in my here, instead of that being the data source, I make it index viewing conversations.

Okay, that's fine. I could make this even less lean because instead of referring to a repeating group where the search has already taken place, I can do a search here.

In fact, we would have modified descending yes, first item. Okay, so yes, Bubble has a number of different optimization steps when the page loads, but I am still repeating a process that's already taking place and I've had to add in another workflow.

So instead if we go back to what I started with, we can get rid of that. We can instead say here that the page source is sorry, the data source is not that we've got in the model. So this is what I want to appear when the page loads so I can say look at my repeating group conversations which is here list of conversations, first item.

And then the clever thing is as that loads in when I click on a new conversation. Here is my workflow, I just say display data in page body because page body is the element on my page which contains the conversation that I'm currently viewing and so even though the default is fetching the first one, when I click on a new conversation it simply toggles between them. So that's one way of ensuring that you develop your Bubble apps with lean development in mind where we've cut back on any unnecessary workflows. We've not had to even use a custom state in order to display data on page load. And so I think that that is just some small ways that you can reduce workload units being used in your app and you can develop your app more leanly.