The Bubbles of No-Code Development: A Journey Through Bubble.io
Tags: nocode, development, bubble, webdev
Published: 2023-10-05 12:39:47

## Introduction

In the early stages of my software development journey, I was tasked with a project that utilized “Power Apps,” Microsoft’s low/no-code platform. The experience with the low/no-code tech could have been more impressive and filled with shortcomings. As a result, I chose to stay away from low/no code development for the past few years. However, a recent opportunity within the company led me to the low/no-code ecosystem again, prompting me to explore a platform called [Bubble.io](https://bubble.io/).

## What is Bubble.io?


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dxsi2phcgrjfyxxqvmu.png)

Bubble.io is one of the more popular no-code development frameworks. The platform follows the “drag & drop” design approach using its visual editor, which allows anyone with or without a coding background to start immediately.

With the simple UI, it is easy to navigate, and with the search functionality, you can find what you are looking for without feeling overwhelmed.

Nevertheless, its primary appeal lies with individuals lacking technical expertise who wish to create & design web applications, all without needing familiarity with the conventional tools of the industry.

## Visual Editor & UI Elements

By utilizing the visual editor, designing and building responsive apps can be done quickly and previewed immediately.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo7tneyi8wf9zkjl3rnf.png)

Inside the editor, you have access to various built-in UI elements. You can install new elements, or if you have knowledge of HTML & CSS, you can create your custom elements. Also, you can preview & deploy your app.

## Workflow Editor & Actions

The workflow editor is where you handle the app state; it lets you create actions and add logic to every element built inside the UI Builder.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pb83mlvhvfhch4wqsicd.png)


Inside the editor, you can assign dynamic or static variables during the different states of the page or when the input value is changed.

## Built-in Database

Bubble.io, the no-code development platform, creates a customizable & scalable database to meet all your needs and comes with privacy settings where you can set rules for what content is available for which user and so on.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl67g6negdtz0qbgbv00.png)

## Styles and Re-usable components

In tradition, web development must have clean and reusable UI elements to maintain and scale applications. I am impressed that Bubble.io gives you the ability to have the same level of maintainability and scalability as traditional Javascript libraries such as React.js.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khru3i23zb03cz9imh40.png)


Inside the style editor, you can apply and define the application layout theme and colours and design the templates for buttons, inputs, and so on. When the time comes to update/change any UI element, Bubble.io allows you to change the templates, which, as a result, will change all instances of that element.

## Plugins and Third-Party Integrations

Bubble.io has many pre-built and ready-to-be-used plugins, making third-party integrations such as Stripe and Google easy to set up and use. Of course, the no-code development platform provides the tools to create custom plugins, so any limitations on that front are covered.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evkfiv2v8ixo5ghtkh3x.png)

What Bubble.io does well from a developer’s point of view
With little prior experience with low/no-code development platforms, it was easy to start building a web application. When you create an account, you’re led straight to the main dashboard; I read through the documentation to see how to work with plugins & workflows and was ready to go. The Bubble.io UI is intuitive and easy to navigate. I liked how the workflows work, and with the containers in the UI builder, it is easy to set element hierarchy and groups and have a responsive design. I could have a working MVP in a matter of hours, and I was impressed by how effortless it was.

## What Bubble.io doesn’t do so well?

After a few days of working with Bubble.io, and as my project grew in pages/elements/events, I started to experience different issues, mundane tasks to solve in traditional web programming but annoying and sometimes hard to solve in Bubble.io. After having hundreds of visual elements, it was challenging to make changes. When workflows grew in size and complexity, maintaining them and making changes became much more complicated.

## Conclusion

Overall, Bubble.io is one of the better low/no-code development platforms. It has reached a point worth considering as an alternative to traditional web development. Just like React.js and Angular.js, both libraries have their use cases. Strong and weak points, so for a simple application that may display information or is small in scale and with a simplistic UI, Bubble.io is an excellent option. For larger, more complex applications, I wouldn’t use Bubble.io. However, this may change in the future as the platform keeps on improving.

**Ivan Todorov — Software Developer at [Lexis Solutions](https://www.lexis.solutions/)**