My 9 Bubble best practices as a developer

I believe it is important to understand how I turned to Bubble as a developer and entrepreneur.

My Background

  • Master in CS - 2011
  • Ruby on Rails and Javascript since 2008
  • Worked for Startups (TaskRabbit) in San Francisco and Paris (Dimelo)
  • Growth Hacking / Entrepreneurship at Koudetat from TheFamily

https://fr.linkedin.com/in/stephanebounmy

How it started

Before I discovered Bubble I was using different tools to bootstraps ideas : Squarespace, Instapage or WIX.

HackerHouse have been bootstrapped with

2015 – Squarespace

2016 – React + ROR for the backend : payments, invoice and sign-in with linkedin to import user's image + bio

Need a capture...

2019 – Bubble

Problem

One day, it didn't worked anymore : people couldn't signup. We were loosing signups = money.

I realised that it was too time consuming to run a solo founded marketplace and while writing the code, I could barely handle the growth.

I was asking myself : API is only about CRUD - there might be someone who though about solving this no ?

Solution

Over the week-end, I stumbled on two things: Webflow and Bubble.

I decided to give a shot on Bubble and never looked back since.

It took me 4 hours to do all the lessons : easy and hard mode


Then it was time for me to migrate my existing Squarespace + React/Ruby to Bubble

My Aha moments :

  1. App Data
    Creating a new field, renaming it, deleting have never been so easy... !
  2. Geographic address
    For someone who have worked with storing addresses in databases it is a killing feature !
  3. API Connector
    "Hey why don't we connect to X and fetch ...?" "Okay let's try" 15 min later it is live in bubbe 🙄

Now let's dive into the lessons I've learned as a Bubble developer

1. Too many plugins can be bad

Plugins are so easy : click and install. But then when you try it make sure it is worth any tweaks.

Bad about plugins :

  • Slower apps
  • Can have side effects
    We had this with Wonderful slider : it was automacally sliding our slider and turning our website to dark mode... So we removed it
  • We also moved back from air date time picker to native bubble date picker because of bugs and side effects

Must have plugins

  • Javascript ToolBox
    Pretty advanced plugin but essential if you need more flexiblity. We use it to store some extra current variable such as Current House or even calculation Price Total
  • Classify
    Can add id and class so you can have more clean css/js interaction

2. App Search Tool

Life saving

Useful when you :

  • Look if a plugin/field/element/API is used before deleting it
  • Redesign your app so you can find styles which are used

3. Stripe API

I use indirect charges from Stripe :

Buyer = User. Platform = HackerHouse. Seller = Hotels. Read more there

Destination charges allows you to control the transfer timing so Hotels gets paid once the User checks-in or at the end of the month.

In our case : User pays a down payment when he book then we transfer the money at the end of the month.

At the time I was using  Stripe, the official bubble plugin is not complete enough. So we just used API connector to connect to Stripe API.

4. Use Data URL than states or workflows

We heavily rely on Data URL than States for this reason :

https://hackerhouse.world/all?place=station-f shows the correct results but if you were using states / input it would not.

5. Styles

We use bootstrap's naming for our styles.

Buttons

  • Primary Button
  • Secondary Button

Texts

  • H1, H2, H3
  • Extra Large, Large, Medium and Small

We happened to have some variant such as H3 Border Bottom when a style becomes repetitive :)

6. Responsive and Mobile

We use a 1366px width responsive

Then we have a group Section with 80% minimum and 100% maximum

Our real secret is that we have Mihaja, our "responsive guy" who is an expert to make it mobile friendly :)

7. Remote pair-programming

8. Missing bubble features - be patient

Happens many times where something is missing in bubble such as :

  • Responsive Repeating Group height
  • Send multiple parameters to reusable elements
  • expose synchronizable states from reusable elements (create a plugin is better for this)

Don't always fight. think differently about your feature and keep it simple.
The reason is that you will introduce bug as you try to fix bubble or on a new update your code won't work anymore and you will spend time investigating.
Less is more :)

9. Continuous Integrations tests your bubble app

You can use QAWolf to write tests for your bubble app.

We've done a few videos there

Long conversation in French sorry

https://www.twitch.tv/videos/970058486

Conclusion

  • Deploy every week :_)
  • If you don't have bugs in live it means you are not deploying enough
  • Always be responsive
  • Keep in mind SEO - Bubble is doing pretty OK for an SPA
  • Always be iterating on your product with data's and user feedback

If you have any questions you can find me on twitter or take my bubble advanced bootcamp at HackerHouse