Deep Dive Into Bubble: The no code free application builder and cloud hosting service
Introduction
In today’s day and age, the internet has democratized many tools that used to require specialized training. Now more than ever the barrier to entry of different industries is much lower, and one industry that has seen this the most is tech. One of these many tools that has become widely available to everyone is application builders which has become known as the “no code movement”.
With many free options it can be hard to know which tool is best for you. One tool that has proved to be an incredible asset is Bubble. Bubble was created in 2012 by Josh Haas and Emmanual Staschnov (Vivienne Chen, 2020). Bubble has since gained one million users and became venture-backed in 2019 (Chen, 2020). According to Chen (2020) bubble was built to solve problems for everyday entrepreneurs. So, what exactly does Bubble do?
What is bubble?
At its core, Bubble is a free online tool that can be used to build complex web applications, all without the use of any code. Additionally Bubble also acts as a powerful cloud platform that hosts and runs the applications built on its platform (Bubble, 2022a, The basics section).
Applications that can be built with Bubble are limitless thanks to the fact that Bubbles editor is open-ended (Bubble, 2022b). Some examples of applications that can be built on Bubble are marketplaces, e-commerce sites, social networking sites, and much more (Bubble, 2020, 0:30–0:47).
Bubble is accessed from a web browser and does not require any software to be installed in order to start building applications — all users need to do is sign up for free.
Bubble consists of an application editor where users create their applications without the use of any code. Features in the application editor include a design tab, workflow tab, data tab, styles tab, plugins tab, settings tab, and logs tab. However, the main tabs I will focus on in this review will be the design tab, workflow tab, styles tab, and plugins tab.
Design tab
The design tab is where users go to visually design their applications (Bubble, 2022a). Designing applications is made extremely simple; users simply select the elements they want on the page from a list of elements located in the element palette on the left-hand side of the screen. Users can then click and drag the elements into existence in the UI builder. Users also have the freedom to edit these elements at anytime. They can resize the elements, adjust the properties and appearance of elements, and move the elements around to different areas of the page. This allows for the designing process to be a fun and creative experience for users. Moreover, the ability to edit elements, in addition to undo buttons, make the designing process non punishing for users who are new or have little experience with designing applications. The most important elements I used were visual elements, containers and groups, and input forms.
Visual elements
The most straight forward of the elements that can be added to the application builder are visual elements. Visual elements include text, images, buttons that can be clicked, and more. Focusing on text, text boxes can feature static text, or text boxes can use Bubbles dynamic text — text that is fetched from databases in Bubble or external APIs and other services (Bubble, 2022b).
Input Forms
Input forms are used to allow users to type responses that can then be saved (Bubble, 2022a, Input Forms section). Some examples of how input forms can be used in Bubble are creating fields for logging in to the application you are creating, collecting general information, making lists, and so on.
A unique feature of the input form is the ability to define the specific content format of the information being collected. What this means is that by defining the type of content being collected, Bubble can validate if what users type match’s the type of content being collected. The content format can be changed to text, email, integer, decimal, phone number, currency, and date. For example, if email is selected, then bubble will be validating for the @ symbol. Likewise, if integer were selected, bubble would validate for numeric values.
Containers and Groups
Containers and groups are used to hold specific content together. This can be useful for organizing elements within the application and is especially useful when lots of elements get added. Additional elements like the repeating groups allow unique displays of data. Repeating groups are excellent tools in Bubble for displaying lists created by users, whether it be from the application database or from APIs (Bubble, 2022a, Containers section).
Property editor
The property editor is one of Bubbles most fundamental tools. The Property editor is accessed when an element is added to a page and can be brought up at anytime by double clicking on any element on the page. The editor gives users access to customize events and actions on the spot (Bubble, 2022a, The Basics section).
I discovered that the property editor also provides a simple shortcut for creating workflows when editing clickable elements. To do this, users simply need to click ‘start/edit workflow’ to create a workflow for that specific element. I found this proves to be simpler and a faster method when compared to navigating to the workflow tab and creating a new workflow from there.
Workflow tab
The workflow tab is one of the most important and powerful features that bubble has to offer. Workflow is a sequence of tasks that processes a set of data (Bubble, 2022a, Workflow Tab section). Bubble (Bubble, 2022b) structures its workflow by using if-then logic — so if an element is clicked, then this action happens.
When users add an element like a text box or an input box to their application, users have the option to ‘Start/Edit a Workflow’. In Bubble, workflow “expresses what an application does” (Bubble, 2020a, 00:00–0:08) and is triggered by an event. An example of an event could be the clicking of a button on a page in the application; when the button is clicked, a series of actions defined by the creator are triggered and are executed.
Data tab
The data tab is where the information from input forms is stored (Bubble, 2022a, Data Tab section). Workflows connect input forms to data fields, allowing for information to be saved. The app data tab shows the actual data collected.
Styles tab
The styles tab is where users can go to define different styles for elements in the user’s interface (Bubble, 2022a, Styles Tab section). Bubble (2022a, Styles Tab section) explains that creating styles gives elements shared prosperities. Styles are essential for making elements in your application look consistent. Styles can be created in the style tab and easily applied to elements when using the property editor.
Plugins tab
The plugins tab is a unique feature that sets Bubble apart from other platform’s. Plugins allow creators access to actions, events, or data sources that are not part of Bubble — essentially allowing users to add new functionality to their applications (Bubble, 2022a Plugin Tab section). Having the ability of connecting to other services widens the scope of possibilities. Plugins can also be used to add API connections to creator’s applications. APIs, an application programming interface, is a connection between computers or computer programs (API, 2022). Bubble can utilize APIs through plugins, giving applications the power to fetch data from other platforms (Bubble, 2022b). Some connections that are supported through APIs on Bubble are iTunes, Spotify, Google services, GIFS and more. Thus Users can search their favorite songs or GIFs, and the API will retrieve the information. To install plugins, users need to navigate to the plugins tab on the left-hand side of the screen. From there, users can search or simply scroll through a list of options. There are lots of free plugins as well as plugins that users need to pay for. Plugins vastly expand the elements that creators can access, allowing for greater customizations of applications.
More Features
Another feature that makes Bubble easy to learn is the Bubble academy. The Bubble academy has a collection of tutorials to teach new users how to start creating applications. Additionally, Bubble also has a comprehensive help guide, where users can also go to learn about how different elements work. These resources help to reduce the barrier to entry for new/unexperienced users and ultimately make bubble a superior option to other no code platforms.
Hosting
Bubble operates on a cloud platform and hosts and runs the applications that users build. Users can launch their applications for free using Bubble, and their applications will be hosted using the application name followed by bubble.io. Or, if users have their own domain, they can setup their custom domain. However, setting up a custom domain requires a paid plan. (Bubble 2021, 0:17–0:21).
Bubble plans
Although Bubble is a free service, Bubble does offer plans that give users access to more powerful features. First, the personal plan costs $25/month and gives users access to the core platform, API, custom domain, email support, and more (Bubble, 2022c). This would be useful for people who already have a custom domain name. Next, the professional plan costs $115/month and gives users access to 3 units of server capacity, 2 application editors, 2 development versions, and more (Bubble, 2022c). Lastly, the production plan costs $475/month and gives users access to 10 units of server capacity, 15 application editors, 20 development versions, and more (Bubble, 2022c). Both the professional and production plans, as can be insinuated by their names, are better suited for larger organizations with teams of developers that would be working. Bubble also offers dedicated plans for users needing even more support.
It is important to note however that the free version still gives users access to the full application builder. Moreover, the free plan also comes with hosting services for your application, so anyone can design their application with no limitations. The free version even includes the ability to have secure payment processing and e-commerce (Bubble, 2022c, FAQ section). The only major drawbacks to the free plan would be the inability to have a custom domain name, and lack of access to the multiple development versions.
Should you use Bubble?
In conclusion, Bubble is more than just an application builder. With all its additional features, Bubble offers levels of customization and all kinds of options for functionality. There is nothing that Bubble cannot do. Moreover, Bubble’s application builder is completely free to everyone with no limitations. For that reason alone, I think that Bubble is a great tool for anybody looking for resources to build web based applications.
Feel free to check a video tutorial I recorded. In the video I go over how Bubble works, and I give an example of creating a workflow. Also If you would like to try an exercise with Bubble, check out the exercise I made down below. The exercise goes over making an application with a Sign up/Log in as well as an interface that users can order products from.
References
API (2022). In Wikipedia https://en.wikipedia.org/wiki/API
Bubble (2022a). Bubble Manual. Retrieved from https://manual.bubble.io/
Bubble (2022b). Features. Retrieved from https://bubble.io/features
Bubble (2022c). Pricing. Retrieved from https://bubble.io/pricing
Chen, V. (2020, June 26). Goodbye, Tech Founders: The Bubble Origin Story. Bubble. https://bubble.io/blog/about-bubble/
Bubble (2021, February 17). How to Setup Custom Domains Bubble Tutorial [Video] YouTube. https://www.youtube.com/watch?v=vGk6nfq41L4
Bubble (2020a, July 20) The Workflow Tab: Bubble Introduction Series [Video] YouTube. https://www.youtube.com/watch?v=jbzl8EaAk_g
Bubble (2020b, September 23). What You Can Build With No Code [Video]. YouTube. https://www.youtube.com/watch?v=IwiZC4dcLUk&list=PLoNVJrdvQQYmCRxMIlZnvOA9MamB6dvPh&index=1
