Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Performance Tips for Structuring Your Bubble App

Here are my five performance tips for structuring your bubble app. We won't just be focusing on users, but also about you using the bubble editor. Now, before I launch into that, if you're learning bubble, you're watching this video. But we've got hundreds of other bubble tutorial videos just like this one, and you can find them at Planetnow code.

Tip 1: Structure in Regards to Page Content

When you create a new page in your bubble app, for some bizarre reason, perhaps so that it's backwards compatible in some way, the container layout for your page is fixed. And if you've watched any of my other videos, you would have heard me say that fixed layout is you should avoid it. You should avoid it unless you are really quickly mocking up something on a page to test a workflow or test an idea you've got like an experimental test page, fine, leave it as fixed. But every page that you really intend to work with in your bubble app, you want to ensure that you're using rows and columns. That simply means that when bubble is a no code tool, when bubble generates the website and the web page with the HTML, the JavaScript and the CSS that is displayed and rendered by your user's web browsers, rows and columns fit much more neatly into a more standardized kind of best protocol way of laying out content on the web.

Tip 2: Use Rows and Columns Instead of Fixed Width

Some things that I've noticed is if you leave it as fixed, you might find that some things don't appear on the page when you think they should, or things overlap, or most certainly a fixed layout will not help you achieve a responsive design. So end of my tip, one rows and columns. And if you want to learn more about rows and columns, you can go and check out some of our earlier videos on that content. That's moving me on to fixed width. So what I mean is let's turn this into a column and I'm going to add in a group.

Tip 3: Set Max Width Instead of Fixed Width

And again, it sets it up. The container layout for the group is fixed and so we can just see this group a bit more easily. Let's just change it to red, which limits our options. We want more options. So for example, if I change its column, bam.

Tip 4: Understand the Type of Content

Suddenly the layout option contains many more. And like I say, it contains many more of the standard web practices like margins and padding. But also it basically sets the width of that element to however big you drew it on the page to begin with. So let's say I'll set this to 800 and that looks really good. That's going to work for my desktop user.

But the problem is that I've set the width as 800, so that when I shrink the page down in a responsive mode, my element overspills the page when the page is less than 800 width. So a better way to do this and while making it still look the same on desktop would be to not have a fixed width but have a max width. So now it's not going to get bigger than I expect to see it, that I see it in the bubble editor as I'm building my app. But when the page shrinks down, it basically adopts 100% of the space, much more responsive. Okay, tip three is type of content.

Tip 5: Limit the Groups on a Page and Use Reusable Elements

So let me get back out of the responsibility. This is one that in the last week alone I've seen confuses a lot of people come to bubble, people that I've done one to one calls with, with bubble coaching. This confuses them, which is on a page you have this type of content and this will give you a list of all the data types you've got in your database. Now, I've got a lot here because this is an app that I've used for many, many bubble tutorial videos. But effectively, if this page is say a dashboard on my site, then I probably don't need to set a type of content because a dashboard pulls in many different data types and it's more of like a summary page.

It's like a dashboard could be thought of as a summary of lists shown on the page. We're not talking about a particular entry of a particular data type in the database. However, if we are talking about a particular entry of a particular database, for example, if I had on a different page a list of contacts, and then I had a repeating group, that's my list, and I click through and I want to view a page about one contact, then this is the perfect use case for type of content. Because now when I navigate this page, if I use a link or if I use a go to page workflow, action bubble is going to insist that I provide a single contact from the database to link through. Because this is like think about like a master slide in PowerPoint or it's a template, basically it's a template of my way of showing a single contact.

And I'm pointing it out because if you don't get that then, and this is a complete mess because once more, I've used this for many, many demo videos, but you might think that you have to create a page for each contact. No, you create a single page that's your template. And then, so for example, if I add in some text here, I can tap into current pages, contacts, first name. And so now whichever contact I send through to this page, I'm going to print the first name. And you're not limited to just showing things about this data type.

For example, if a contact had a field which was also a data type of like business or organization, I can of course fetch data from that business and organization and show it on this page. Right. Try to limit the groups on a page. So I've noticed the trend and I'm going to underline this because it's a personal preference, it's how I like to work. It is not like a black and white thing, but one page apps have become very popular.


And my main reason is I don't get that because I think that if you're building an MVP, if you're being a bit scrappy, if you're being a bit lean in your development, then it's great to look at the big players and basically copy how they approach that. That extends to someone like HubSpot is going to have a real a B tested really amazingly winning marketing, landing pages. You can take a lot of inspiration from the way that HubSpot designed their website. And I think the same applies for SAS apps. And in my experience, most SaaS apps, because you're accessing them through a web browser, I don't think there's an issue with people expecting that the app should load to a new screen because people click a link on the Internet and they expect there's going to be everything goes to white and then everything loads back in.

And Internet's of course got quicker and quicker over the last decades. So I don't think know thinking about the likes of Facebook, Intercom, not sure about it, but something like Salesforce, these apps that are used by hundreds of thousands of people, they've not concluded that that has to be a one page app for their user experience. And the reason that I'm bringing that up is that in bubble, if you keep adding in, you add in group after group after group. Yeah, you've got the element tree here and you can easily go down it. And then if you want to find a particular item in the element tree and you can't see it, let me just minimize this.

You can always do reveal in elementary and it pops it out in the elementary for you. It slows down the development. It makes it so much harder to find the things that you're working on. And it also, and I saw someone commenting about this on x earlier today. There can be a real issue with RAm and browser and using the bubble editor if you have too many elements on the page, that will depend on what device you're using, but it's just worth considering.

Now, my fifth point is going to be an exception to this, which is make good use of reusable elements. I've just done a video in the last few days about how reusable elements have been made more powerful because now you can pass data into a reusable element and you can pass data out of a reusable element. So a good example of a reusable element would be something like a nav bar, or you can have that across the top, or you can have it down the side. And if there are any workflows that you need to run on more than one page, and they're basically identical apart from the data that's going into them, then you could put that workflow in that nav bar as a custom event. Another great example of putting workflows in a nav bar is the let me show you here on the page is user is logged out and then you can say go to page and we can take them to index.

So you can have a nav bar that you put on every single page of your bubble app that is for your logged in users only. So if anyone tries to access that URL, you have the workflow in the reusable element. And so that way you just know it's going to fire, it's going to take effect on every page that you put that reusable element at Navbar. So there you go. There is my top five tips for structuring your bubble app for performance.

If you think I've missed anything, please leave a comment down below. As always, please like and subscribe this video. We're really encouraged and it's amazing everyone who has followed us on this journey the last few years and we love and appreciate your support.

Latest videos