Bubble.io - Complete review of the No Code Tool

No-code tools are revolutionizing the way software is built and developed. With no-code tools, you can create fully functional web applications without any knowledge of coding! These tools offer many advantages in terms of speed, cost-effectiveness, and accessibility, making them an attractive choice for startups, small businesses, and individuals.

About Bubble

One of the most popular no-code tools in the market currently is the US-based tool called "Bubble". It features an intuitive visual editor, drag-and-drop functionality, pre-built elements, and an extensive library of plugins! Therefore, despite being a no-code tool, it is a popular choice not only for non-developers but also for developers. It is a no-code tool that can handle complex data structures, making it possible to create complex web applications.

Bubble's visual editor is designed to be intuitive and easy to use even for those without coding experience. With the editor, you can simply drag and drop pre-built elements onto your page to design your app's user interface. Then, using the element property editor, which allows you to control every aspect of the app design in detail, you can directly control the style and behavior of these elements.

As mentioned earlier, Bubble's biggest advantage is the large number of pre-built elements and the high degree of freedom in modifying them, as well as offering a wide range of plugins. For example, you can use plugins to easily integrate social media platforms like Facebook or add payment systems like Stripe and Toss to your app.

There are really a lot of plugins available!

Compared to other no-code tools, Bubble also has the advantage of being able to handle complex data structures. Using Bubble's data editor, you can define an app's data structure, including the type of data you'll be working with and the relationships between them. This makes it suitable for apps that need to establish organic relationships between multiple data sources. However, setting up such complex data structures does require some knowledge of relational data structures, which can be a bit overwhelming. 😵

Let's Bubble!

When you first log in to Bubble, a dashboard where you can create an app is displayed. To create an app, please click the 'Create an app' button!

The first component is the visual editor (#1) where you can create the user interface of your app. To put it simply, this is where the front-end and back-end meet. In the visual editor, you can mainly modify the design aspect of the app, while in the workflow (#2), you can define the behavior of each element.

In the data tab (#3), you can define the data structure of your app. Here, you can create data types, add fields to each type, and set relationships between different data types.

With Bubble, you can easily create a user interface for your app without coding by using pre-made elements such as buttons, text boxes, images, and input fields. To add these elements to each page, simply drag and drop them onto the page. You can then change the properties to set the size, color, and other styles for these elements.

In today's world, where mobile device usage accounts for about half of the total access rate, it is very important to make sure that apps are displayed well not only on PCs but also on all devices! With Bubble, you can easily create a responsive design that works smoothly on both desktop and mobile devices. You can adjust Bubble's layout system like this and check how the app is displayed on various screens in the Responsive Design section to change the design layout.

One of Bubble's most powerful features is the ability to define custom data types and add fields to them. With this data management feature, you can create complex web applications that can handle a wide range of data types and structures.

To create a data type in Bubble, you can click on "create" here, specify a name, and click "create a new field" to define the properties of each data that will be included in this type, such as whether it is in text or image form.

With Bubble's visual programming interface, you can easily create customized workflows that automate complex business processes and interactions.

In the Workflow tab, you can set up actions in the form of "when a specific action is triggered (condition/trigger), do something (result)." For example, you can set it up so that an email with specific content is sent only when a certain button is clicked.

You can also extend Bubble's functionality through custom plugins that allow you to interact with external systems and services! These plugins are particularly useful when integrating with third-party APIs or services that are not directly supported by Bubble.

If you already have development knowledge, you can even create your own Bubble plugins! And it is also possible to download the self-made plugins into the Bubble app you created and use them.

Bubble provides various elements in many aspects, but there are times when they may not be enough. In such cases, you can use HTML, CSS, and JavaScript to create additional elements.

This involves adding HTML elements to the page and using CSS to style them. Bubble's HTML elements support various HTML tags and attributes, so you can use standard HTML and CSS techniques to increase design and functionality flexibility. Additionally, in terms of functionality, you can add JavaScript to add richer actions and features.

What are some advanced features of Bubble?

Do you remember that you can connect to external APIs and services to retrieve data or perform actions when building a Bubble app? For example, instead of adding separate weather data, you can connect to California's air pollution API to retrieve the air quality information.

First, obtain an API key from the service you want to connect to. Then, you can create a new API in Bubble using the API connector and add the API endpoint and required parameters. After that, you can retrieve data from the API and display it in your app. For example, you can use "get data from external API" in the element's property section to retrieve weather information from a weather API and display the current temperature in your app. 😝

If you have finished building your Bubble app and want to launch it, you can deploy the app to a web server or a cloud service. In the paid plans, you can deploy your Bubble app as a live version. When you frequently use the "Preview" mode during your work, you can click the button on the left side of the screen to access the deployment screen. From there, you can deploy the app as a live version.

Additionally, as mentioned above, with Bubble's data capabilities, it is possible to build complex data-driven apps. For example, if you have a customer order database and want to display a list of the best-selling products, you can use Bubble's data actions to display only the desired information through filtering, sorting, grouping, and more. You can use the "Search" action to retrieve all customer order-related data, then use "filter" to retrieve only completed orders, "sort by" to sort the data by the number of sales, and group the data by the type of product.

Furthermore, by leveraging Bubble's workflow features, even more complex applications are possible! For example, let's say you have a survey form where users can submit feedback. You want to send an email to the user every time they submit the form, but only if they check the "send a copy" checkbox. Using Bubble's conditional statements, you can check whether the checkbox is checked and only send the email if it is.

In addition, in the backend workflow, it is possible to perform repetitive actions such as "execute every X seconds." Using this feature, it is possible, for example, to check for new messages in a chat app every 10 seconds.

Finally, with Bubble's "custom event trigger," you can also set your own conditions. For example, you can set up a complex logic structure that redirects users to a dashboard and logs them in when they click on a message.

Features

Here's what we've learned about some of Bubble's features. If we summarize Bubble's characteristics compared to other no-code tools, what are some of the key points?

High Degree of Freedom

Bubble provides many customizable options for users, including workflows, data structure design, and a variety of visual programming tools. This allows developers to create more advanced apps and have greater control over their own apps. Other no-code tools are easier to use, but have greater limitations when it comes to customizing apps.

Complexity

Bubble can be more complex compared to other no-code tools due to the many features and customizable options it provides. However, becoming familiar with Bubble can allow users to design apps with advanced features and greater flexibility. On the other hand, it can take longer to learn and master than other no-code tools. Some of the author's acquaintances have found Bubble to be too difficult, and have opted to learn React or Python instead within the same timeframe.

Scalability

Bubble is designed with cloud-based infrastructure to handle larger and more complex apps, making it more suitable for individuals and businesses who may need to expand their apps over time.

Cost

Bubble offers a range of plans, from a free plan for small projects to an enterprise plan for large businesses. It is also relatively inexpensive compared to other no-code tools. Although even with the free plan, it can be disappointing to know that users have to pay per app instead of per account.

Steep Learning Curve

As mentioned, Bubble generally has a steeper learning curve compared to other no-code tools due to its many features and high degree of freedom. However, Bubble provides a variety of educational resources, including tutorials and community support, to help users overcome these challenges. Compared to other no-code tools, it provides much more resources for learning and development.

Community Support

Bubble has a developer community that provides support and resources for building and expanding apps. This includes forums, webinars, and other resources that can help users solve problems and learn new skills.

Bubble is a no-code tool that provides various functions and customizable options. It has a steep learning curve and appears to be more developer-oriented as it offers high tool flexibility, making it recommended for those who want to create more sophisticated apps. If you are considering using Bubble or other no-code tools, I hope you judge the practical benefits of each tool depending on your app building purpose.

Use Cases and Examples

Bubble is a no-code platform that is useful for creating sophisticated data-based apps. What specific types of apps is it good for making?

MVP Development

Bubble is often used to create initial versions of a product because it allows users to test and validate the product without coding skills or a large development team.

Internal Enterprise Tools

Bubble's sophisticated data structure and workflows make it easy to create project management software or CRM systems tailored to the specific needs of an enterprise or team. For example, a marketing team could use Bubble to create a dashboard that tracks campaign performance, social media metrics, and website traffic all in one place!

Early-Stage Startup Products

As a no-code tool, Bubble can be used to create sophisticated data-based products without a large development team, making it suitable for startups. For example, a startup launching a new social networking app could use Bubble's excellent data features to develop an algorithm that recommends friends based on preferences or location.

Now, let's take a look at some companies that have successfully used Bubble to create their products!

Codemap

CodeMap is a platform that connects no-code experts, SaaS experts, entrepreneurs, startups, and SMEs worldwide, making it the first platform of its kind to offer an on-demand approach that simplifies the learning, automation, and development process without requiring expert knowledge of coding. CodeMap has already successfully completed over 5,000 projects worldwide in countries such as the United States and Europe. Currently, there are over 1,000 no-code experts/teams on this platform.

GoodCourse

GoodCourse's founders who received investment from YCombinator and had an 18-month development period have identified two major characteristics of business education today.
First, due to our constant attachment to our phones, we live in an endless stream of information that can lead to decreased adult attention span.
Second, the Millennial and Gen Z generations have high expectations for their educational experiences. Therefore, these founders said, "Important topics can sometimes be boring for learners. We will solve the current adult education problem by creating TikTok-style content." One of them also said, "We considered creating it in a programming language, but Bubble was the only platform that could host web applications end-to-end instead of temporarily connecting various tools."

Bubble is a platform with flexibility, scalability, and the ability to handle complex data structures. Although the learning curve is steep, the community is active and there are plenty of resources available to make learning easy with just effort. Moreover, it is cost-competitive compared to other no-code platforms, and has the advantage of being able to easily deploy apps through its built-in hosting service.

If you want to see more examples, please refer to Bubble's App of the Day or Showcase page!

What you can make/cannot make with bubble?

Things you can make

Social Network App

Add user profiles, news feeds, chat features, and more to create your own social network app!

E-commerce Platform

You can create an e-commerce platform using Bubble where users can purchase products, track orders, and manage their account information.

Marketplace Platform

Build a marketplace platform where users can not only make purchases, but also sell their own goods and manage their transactions.

Productivity Management Tool

Use Bubble to create your own team collaboration tool, project management tool, or management tool!

Hardware-based App Development

By connecting Bubble to external API connectors, you can create hardware-based apps. For example, you can connect an AI engine to classify images or control the Internet of Things (IoT) devices.

Things you cannot make

High-performance games

While Bubble can be used to create simple games with basic graphics and animation, it is not suitable for developing complex games that require high-performance graphics and dynamic animations. Bubble was designed for creating data-driven web applications rather than games.

Complex algorithms and calculations

While Bubble provides extensive data-related functionality, it may not be the best choice for complex algorithms or data processing. Bubble is designed to quickly create data-based apps with simple workflows.

Real-time apps

Bubble is not suitable for real-time apps that require immediate updates, such as financial trading platforms. Bubble operates on an event-based platform that works through polling mechanisms. Updates occur at regular intervals, rather than in real-time, making it unsuitable for apps that require real-time updates and processing.

However, these limitations do not mean that Bubble lacks the ability to develop web apps. Bubble is simply a no-code development platform optimized for building data-centric web apps. Therefore, it is essential to understand the strengths and limitations of a no-code platform before deciding whether it is suitable for your project.

Bubble is a no-code tool optimized for web app development. It features a drag-and-drop interface, rich UI elements and plugins, a database system capable of handling complex data processing, and external API integration. While offering advanced features for creating complex data-based apps, Bubble is designed to be easy to use for users without technical experience. These elements have made Bubble a unique no-code tool in the rapidly growing no-code development market.

No-code tools like Bubble are revolutionizing the software development industry by making it easier for non-developers to create their own web apps. By using no-code tools, users can focus on improving the quality of the user experience of the app rather than getting bogged down in technical details like coding or infrastructure. This can ultimately shorten development time and allow for more innovative and creative apps to be created at a lower cost.

However, even with no-code tools like Bubble, traditional coding skills and developers cannot be completely replaced. While no-code tools like Bubble are designed to replace many development tasks, there are still certain types of apps, especially those requiring high levels of technical expertise, for which no-code tools have clear limitations. Furthermore, the no-code tool industry is relatively new and there are still many challenges to be faced before it matures. The question of whether to increase difficulty to raise the degree of freedom in app development or to create a platform that is more user-friendly for non-developers is also a major concern for many no-code tool developers. In particular, while Bubble has almost no functional limitations, it can be a little difficult for people without any development knowledge to learn.

Despite these limitations, no-code tools like Bubble enable users to create their own web apps quickly and easily without having to possess extensive technical knowledge. As these tools continue to develop, we look forward to the day when they will contribute to the popularization of software development and to the power of countless innovators! That concludes today's post 😝

If you're looking for a Korean no-code tool due to language barriers, try WaveOn!