I am posting it here before publishing it on my blog because there are no doubt inaccuracies!
A Test Drive of Bubble.io: A Visual Programming Tool
I heard about a visual programming tool named Bubble on Product Hunt. I decided to give it a try by building an approval workflow app.
A Bubble schema is built from things — basically tables. The scalar field types are text, number, numeric range, data, date range, date interval, boolean, file, image, geo address, and thing. A scalar type can have a default value. List is the only collection type. Encryption at rest isn’t supported. The App Data tab has CRUD, import, export, transformation, copy dev (production) to production (dev), and PIT recovery commands. The Privacy tab allows thing-specific access control entries termed Roles. I don’t see a distinction between read & write, or owner & not. Surely, I’m confused because it must be necessary to express that only the owner & a row-specific white list (decision makers in this app) can write.
I defined a DecisionStatus thing with 3 rows: undecided, approved, rejected. I set my Decision thing’s status field’s type to DecisionStatus. However, I couldn’t figure out how to make the UI set it. So I switched to a text field set by radio buttons. This is a problem for localization but Bubble doesn’t support that.
There’s a built-in User thing with fields email, Created, Modified, id — password is hidden. I chose the built-in, reusable element Signup/Login Popup. I don’t see how to generate a confirmation email. I don’t see any security info such as (IP, time) history. I don’t know if there’s login throttling. The UI is inconvenient because the default is Signup despite Login being a more frequent event.
I want to store the allowed decision makers. This could be a list of Users or emails. I could not determine how to populate and enforce this list.
Most of the programming time is spent designing the UI. The widgets are:
visual elements: text, button, icon, link, image, shape (?), alert, video, HTML, map, powered by Bubble
form elements: input, multiline input, checkbox, dropdown, search box, radio buttons, slider, date/time picker, picture uploader, file uploader. The lack of a multi-select, auto-complete element is a showstopper for me. There is a plugin architecture but I didn’t study it.
containers: group, repeating group (data bound grid), popup (a group that is invisible initially), floating group (pinned despite scrolling), group focus (I didn’t study).
reusable elements: footer, header, new element. There’s a tab group but I couldn’t determine how to use it.
A nice feature is the style selector shows a preview of the styles.
All app frameworks feature data binding so it is no surprise that Bubble containers and form elements can be bound to things (as a reminder, these are like tables).
The page becomes cluttered with groups playing the role of modal forms. There is no way to auto-center a group when shown so there’s no choice but to pile them on top of each other in the designer. I recommend a way to stash invisible groups somewhere — similar to Bubble workflow folders perhaps.
Programming is expressed through events in the workflow tab of the designer. Elements have the familiar event types like onClick and Page.onLoad. An interesting event type is reactive (Bubble doesn’t use this term), eg, when a radio group’s value is X. Another event type is a recurrence.
Each event has an action sequence such show group; bind data; set focus (this action isn’t reliable for me).
There is no textual language — not even JSON. Expressions are built by clicking. Events have conditions expressed by boolean expressions like X is clicked (in contrast to ev.type == “click” && ev.target == X) or Current User is logged in (in contrast to curUser.isLoggedIn()). Data bindings are paths like Current cell’s Decision’s Title. As a programmer, I find this harder to read than currentCell.decision.title. To avoid clutter, events can be grouped in folders.
Happily, there is a debugger and an element tree (like the DOM) inspector. The tool has video help and a manual (too terse & several omissions such as modifiers like :filtered). The tours step through using the real UI.
In summary, Bubble’s mission is noble and they have worked hard on this tool. Unfortunately, I could not program a simple approval workflow app.