Top 10 Bubble Tips that every Bubble Developer needs

What is Bubble good at?

Bubble is good at building dashboards in particular. You could easily build something like a CRM app in Bubble with all the features that you see here such as messaging, tracking, inventory. You can build really amazing internal tools and if you're building an internal tool for your industry you might well find that there's other people who are really in demand and want to use that same tool. So you could end up building something for your own business and discover that is something that you could sell and turn into a SaaS application for your industry.

What are Bubble.io's main limitations?

Since the introduction of workload units some apps have become less viable or maybe not completely viable and so I would include analytics based apps in that simply because the way that computing power is now calculated in Bubble and the way that your Bubble app would scale based on cost and through the different plans that they offer. I would say that building a clone of like Google Analytics or say plausible or fathom analytics based software is going to become less viable on Bubble because of the cost. That's simply because if you're sending a workflow or running a workflow basically for every time the page is loaded and you're spreading that out across hundreds of client websites because you're doing analytics then it's really going to count up those workload units quickly.

Limitations for native mobile apps

The other group of apps that I'd say are not great to build with Bubble, and this will become a bit of a downer for some people, is native apps like iOS apps or Android apps. Yes, there are many people who have successfully built a web app first and then they've used a process known as wrapping or using a software wrapper to deploy their app to the Apple App Store or the Google Play Store but I think that is just risky. People have done it successfully, you can find plenty of examples of it, however there's always a chance that that app will get rejected. In my opinion I'm really holding out for Bubble to release a proper internal tool baked into their software for creating an iOS and an Android app. Until then maybe it's fine for an internal project or a side project but I wouldn't count on building the basis of your business around trying to transform a Bubble app into a native app.

Using Bubble as a foundation

Now Bubble can serve as a really good beginner foundation for your web app and your database and your workflows but then I'd recommend finding some other development platform in order to link in with your Bubble database so that the UI and what the client sees for your app that's built elsewhere but you can easily integrate that in with what you build with Bubble for web.

Design tip: Use rows and columns

My third Bubble tip is about design and that is a plea: please please please don't use fixed layout as the layout for your groups or your pages if you're doing anything more than a quick mock-up or a test page or an experimentation. Please always use rows and columns and that's simply because when it comes to making your app responsive or it comes to trying to debug why is something looking a bit weird, why doesn't it quite fit in that space, why is it not presenting how I see it in the editor, 99% of the time when I'm coaching Bubble clients and working as a Bubble coach I find it's because they've built their whole app or the majority of their app using fixed layouts.

The benefits of using rows and columns

Fixed can be really tempting because I think "right I want a button in the middle of the page" there it is it's in the middle of the page but when you come to making it responsive when you come to putting other items around it let's put in another group for example search for group so I want the group to come up right to the edge of the button and then I want to make it responsive so if it looks great on desktop tablet and mobile it's just gonna cause you a real headache. There is a learning curve but it just means that when your page is rendered for your users the building blocks of your page if you open up the browser developer tools you'll see that Bubble is now using a much more standard CSS ways of laying out the page. The code that's written is the way it should be and you only get that if you're using rows and columns.

Using paddings and margins effectively

Following on from rows and columns my next tip is about how to use paddings and margins. So I've got my green block here it looks a little bit like a hero's a navigation section on a website and what do I want to indent it in from my group A? Well it could be really tempting to use margins so I'm on my group B which is green and I say take it in by 20 there I take it in by 20 there but the trouble is now the width of my green has added 20 pixels to either side. A better way to do it is to reverse your approach and instead think I'm going to add in a padding to the parent element and then I can set my width to 100% and then it's just going to sit more nicely in there and it's going to make it much more easily to make it responsive in the future.

Understanding development vs live versions

Every Bubble app has got at least two versions and here's where you can find them by clicking on the branches or the main depending on where you are in the app this button up here and this app has got two versions which is the main which is under the subheading of development and then the live version. When you're making changes to your app you'll be making them to a development version in this case main and then when I'm happy that those changes have got no bugs I would deploy to live. Here are some things to consider about the live and the dev version: when you deploy to live you aren't going to send any database entries any lines in your database but you will be sending everything else such as design workflows plugins you've added data types that sort of thing that gets deployed to your live version when you click deploy to live.

User signup considerations

It's also worth considering who you get to sign up for each one. I would say that development is strictly for internal testing or maybe family and friends and you need to understand the differences between users signing up to your development version compared to signing up to your live version. If you think you'll ever need to convert them into paid customers you'll need to sign them up to your live version because only your live version will use your live Stripe API keys and make actual charges rather than test demo not real money charges.

Privacy and security settings

Tip six is short but essential which is what value do you have in here? I'm in a Bubble up I'm in general I'm in settings I'm under privacy and security and we've got these different options here. You might think "oh I don't want my app to private I want other people to use it" but look what this is actually attached to. This is define who can see and modify the app. 99% of the time you want this to be set to private because otherwise that means people can view your editor they can view bits of your database especially if you've got everyone can edit that basically means if someone visits this URL they can make changes to your app whether they've got you know they can just they can change it they could wreak havoc in your account. So make sure you've got private app selected.

Protecting your development app

You'll also notice that I've got and I'll be changing these once I've finished stop on this recording that this is our demo app and there are some bits of here that we don't want to be public or for people to stumble across so I've made it that my dev app can only be accessed by using this username and password. This is not a username and password for a user in my database this will be used when I visit my app for the first time in the new browser and the browser shows an alert like a pop-up and that's where I put in my username and password and I would share the same username and password amongst my team if I am protecting my dev version in this way.

Understanding autobinding

My next tip is about autobinding. What is autobinding you may ask? Well it's basically autosave. So I've got a list of products where products is a data type in my database and that this is my repeating group and you can see that I've got a label it's just ordinary text and then I have an input and at the moment I have the initial content set to be the value label. So what if I wanted to rename this to red trainers? I'd have to add on the button and that can be appropriate on many occasions but what if I wanted to give my user a slightly quicker experience? I basically auto saved it. Well that's where autobinding comes in.

Setting up autobinding

So I go onto my field and I say enable autobinding and I select the label field. I then have to go into my privacy rules which will explore more in only a few seconds time for my products and I'll just define the rule when I say user and say this products creator is current user just so I can demonstrate this autobinding bit label that should cover it. I'm gonna refresh the page and so let's change this to red. I don't have permission to do it I'm signing this the wrong user but you get the idea. In fact I'm just say anyone can auto bind very unlikely you're going to want to set this up but look I can change it to red and it's now updated to red trainers on autobinding.

Providing user feedback for autobinding

You may want to consider giving your user some sort of feedback. You can trigger an alert after an autobinding operation is completed. Let me show you how we can say show alert and so you can add in a bubbles core alert element into that and so you could show the alert in the top right corner saying "save" something like that because some people maybe they've never used Google Docs before they're gonna ask "well how do I say this is it safe?" It always helps to give your users a bit official feedback that indeed the change they made has been saved. So that's autobinding.

Understanding privacy rules

As promised privacy rules I'd say one of the key things that I see people misunderstanding or neglecting altogether. So let's set up a simple privacy rule for order. So imagine I was setting up a marketplace or an e-commerce store with Bubble and I want to set up the appropriate rule for order. So I'll say user there's gonna be any label that you like and it's very unlikely that you want anyone absolutely anyone viewing your site to view all the history for anyone so we're gonna lock it down and we'll simply say that when this orders creator is current user that then they can access all the fields.

Setting up basic privacy rules

This is really simple this is what you will need most of the time for all of your data data types. You will need to expand upon this and make it much more complex if you've got different roles of in a team or an organization that you want to restrict who can see what. This will work fine if the user creates it but what if you're creating a dashboard for your sales manager or your operations manager for your shop? Well you'll need to create a rule for that person. So you would add in a rule and we would say shop manager okay and then you'd need to find some sort of expression that works there you could have something like current user and then you'd have a field called role and you could use an option set for that current users role is shop manager and then again you're saying that they can do everything but this is what you'll need to get started and it's the simplest one I use it a lot you simply say this data types creator is current user.

The importance of transactional emails

For my ninth Bubble tip I sometimes think to myself "won't somebody think of transactional emails?" What are transactional emails? Well they tend to be emails that your app sends because your user has taken an action so you're welcome email or email confirmation email password reset email these are all quite essential aspects but I see a lot of people not considering them and leaving them to last and then realizing that actually there's quite a big task to think about all the different transactional emails you'll need.

Setting up SendGrid for transactional emails

Two things I want to point out though on this one is that Bubble has got a built-in integration with a transactional email provider called SendGrid and that's what SendGrid is used whenever you use the workflow action send email or if you just use the default password reset email that sort of thing it goes through SendGrid. Now you'll want to set up your own domain name and get your own SendGrid API key and enter this in to the email settings here which are exposed when you add in your own domain name and that is so that you are sending emails under your own identity rather than them being sent from some Bubble pulled email address that is much more likely to end up in someone spam and far more it just doesn't look as professional you want your emails coming from your identity and to do that you would set up a SendGrid account and enter your SendGrid API key in here.

Alternative transactional email providers

Now SendGrid and the integration that Bubble has created with SendGrid is a little bit out of date in fact you can't make use of some of SendGrid's newer features such as their newer template designs so it can be a little bit frustrating and a little bit limiting. So I would recommend that you get to groups with the Bubble API connector and you check out some of our own videos on transactional emails but very quickly you can set up a very quick integration in with postmark. I love postmark I've been a page user postmark for many years now I've used them on WordPress sites I use them on Bubble sites but there's a new arrival too and we've got a video we just released on them called loops and loops is position themselves as the all-in-one solution in a very simple way for modern SaaS you've got marketing and transactional emails combined in one tool.

Using the "run as" feature

I've kept my favorite Bubble tip till last because it's something that when I'm running a Bubble coaching session with someone helping them develop their Bubble up live over soon this is something that time and time again I get the response of "I just wish I knew that". What's this final tip? Well it's run as. So I'm logged in as a user here I've put this label up here to say current users name is Adam if I go into my database and go on to users I've got two users set up in my dev version of my Bubble app and I'm currently logged in this Adam. Now I'm though I don't have a registration workflow I don't even have a sign-in workflow set up in my Bubble app here so what if I wanted to quickly test the app as Matt instead? Well it's so simple I just click run as and opens in the new tab but now I'm logged in as Matt watch I can go back let's run as Adam again I'm now logged in as Adam.

Benefits of using "run as"

Okay saves so much time if you want to test your app and you should be testing especially if you've got different levels of access who can see what or like two different types of users like you get in the marketplace you've got buyers you've got sellers you'll be testing and testing and testing and you'll want to be testing as your different test users and you can quickly swap between them using the run as command in the row of your Bubble database under your data type of users.

Conclusion

So that's it those are my top 10 tips that I think everyone should know and everyone would benefit from before they set out and creating their Bubble no code app whether you're a beginner or advanced. I mean even if you've been using Bubble for years I hope you picked up something. Maybe you've got a Bubble top tip and it's something that you think "oh this was amazing when I learned it" and you would love to share it. Well I encourage you to leave a comment down below I'm gonna read every single comment it's great that the Bubble community is so supportive of each other so leave your Bubble tip down below and if it's a great one I'll even make a video about it too.