On January 1st, 2023 I decided to deploy a working web app in two weeks. Two weeks later, Stash to Read was live and functional. It’s a proof of concept, but works.

Dusko 📷 @bajicdusko

How I started new year? ✅ Bought a new domain🙂 ✅ Started working on a product ➡️ Launch in two weeks

10:39 AM ∙ Jan 1, 2023

How did I do it? I built this web app with the no-code tool - bubble.io

Bubble is one of the most popular no-code solutions for building web applications (source: reddit).

Why should we use no-code solutions?

Proof-of-Concept and Minimum-Viable-Product type applications are a great fit for no-code solutions.

You have an idea and a very limited budget. Therefore you wanna push your product to market as fast as possible. You want to validate it and try to find a product-market fit. If so, then seriously consider a no-code tool like Bubble.

With it, you’ll be able to build a product in an extremely short period, with the minimal team required.

No-code by its definition means absolute technical debt.

You have to have this in mind, as the tool has its own limitations that might be hard to overcome. Once your product gains traction, your user base grows and you get the funds from investors, you’ll most probably have to rewrite everything from scratch.

Bubble core concepts

Bubble is relying on three major sections to help you define the look-alike and the logic of your app:

• design

• workflow

• data

This is exactly how they sorted options in their working environment.

Design

This is where we create a UI. A palette of fully functional elements is already at our disposal. Buttons, inputs, dropdowns ..everything.

All elements are organized into groups. A group can have an orientation, either as a column or a row. By stacking groups, we define the layout of the page.

80% of our time is spent inside the "Design" section. More specifically in the property editor of specific elements on the screen.

Property editor

With the property editor, we define the element style, element behavior in layout, and various conditionals.

Style - By adjusting the style, we affect how the element looks like.

Layout - By tackling layout properties, we define how the element should stack in its parent group.

Conditions - By setting up the conditionals for an element, we are able to affect element behavior when a certain state is changed (like page width for example).

Using a property editor was usually straightforward for me. There are some specific use cases that I found hard to overcome (more about these in the next posts).

Every element on the screen can be hooked up with the workflow and the data to connect it to the business logic.

Workflow

With workflow, we define a series of actions that needs to happen once a certain event is triggered.

The most powerful aspect of the workflows is the actions that you can chain one after another. While these actions can be as simple as "Reset input", they can be as complex as "Sign in with Google" or "Charge current user".

In the screenshot below, you can see multiple triggers defined. Trigger for the “Submit button” click as expanded. It shows the chain of actions necessary to complete when the user clicks a Submit button.

New actions can be added from the dropdown menu and are organized into logical groups, as shown below.

Data

This is the area where you'll spend less time, but it is the core of the whole app - the database.

In Bubble, the database is abstracted a bit.

• We have the possibility to create a data type (table), with fields (columns).

• It is possible to create joint tables, but you don't really define the foreign keys and similar stuff.

• We have no control over indexes and query optimizations at all.

• Data privacy is granular and is set for every data type and field.

• You can import and export your database.

• You have really no control over schema migration from one version to another.

How do elements, workflows, and data work together?

• Groups can set the data type they work with. What does this mean?
  Let’s say that a group contains text fields for displaying the user’s first name and last name. In this case, the data type assigned to a group will be 'User', and child elements can reference a parent data type and access its properties.

• The element usually loads specific data of its parent. If the group data type is 'User', then on the 'username' text element we would say 'Parent's User's username'

• Workflow is linked to one or more events that an element emits.

  For example, if a user clicks a button, a click event will be emitted and the workflow will be triggered.

• Workflow has access to elements and can read their values, and create or modify records in the database.

FAQ

Does Bubble support the development environment?

Yes, it does. By default, you can differentiate application versions and data between the development and live environment. In fact, on more expensive packages, you can create multiple environments.

How to manage user sessions?

You don’t, it is done by Bubble. You can always access “Current user” and inspect whether the user is logged in or not, to access its data, log the user out, etc.

Is it possible to query the data directly?

Let’s put it like this. You cannot query data in an SQL fashion. There are specific and quite limited options to load data into existing elements. There is a possibility to open the database through API. Still, complex SQL queries are not possible by default.
It suffices to say that you can install SQL plugins and run SQL queries against external databases.

How to control data privacy?

Bubble base privacy on data type level (database table), where you can specify multiple sets of rules with access rights for every field(column) in data type.

Who owns the code?

That’s not important. You own the intellectual rights and the Bubble cannot copy-paste your app as its own.

What’s the quality of generated code?

Who cares, it works.

Is it possible to create a top-level style and color scheme?

Absolutely.

How to reuse elements between pages?

You can create reusable elements and add them to multiple pages. The header is one example of the most common reusable element. Sign-up popup might be a good candidate as well.

How to connect to an external API?

Via plugin. There is a vast amount of plugins available and one of them is the External API plugin. With it, you can connect to API and consume its content.

Where is the app hosted?

On Bubble servers. Depending on the package you purchased, you have specific guarantees over availability.

Is Bubble GDPR compliant?

Yes.

What if need to load millions of records from the database?

You won’t. If you have this use case, think of whether Bubble is the right choice for your product. Bubble time-outs queries after 3 seconds.

Do you have some unanswered questions? Leave a comment below.

Leave a comment

Small disclaimer:

I am using Bubble for less than a month and my experience is limited. I wanna learn as well and improve my skills over time. It might be that what I wrote above is absolute nonsense. If so, please let me know, I’ll be grateful to learn from you!