What is visual programming, and how can modern examples and tools help solve an age-old computing problem?

Interacting with modern technology is pretty easy these days, now that you can literally talk to an Alexa or Google Home and have a cloud-based program respond to you. But for the longest time, "talking" to your computer required you to learn its language — a programming language. Most programming languages are text-based, allowing coders to type commands to, pull information from, and share information with their computers.

Fortunately, visual programming offers an another way to "talk" to our modern computers — and a way for anyone to build software, regardless of whether they know how to write code.

Visual programming is a method of web and software development that uses graphics and images, rather than purely text, to build out computing logic. It’s been around for decades and represents another layer of machine language that our computers use when they talk with each other.

The main goal of early visual programming was to make it easier to use your computer. Before graphical user interfaces (GUIs) were invented, you had to type lines into a terminal window‌. ‌Today, most people buy a "Mac" or "PC" and don’t even think of their underlying computers as different from their visual operating systems.

Some examples of visual programming tools include:

Visual programming tools that let you build front-facing user interfaces are pretty commonplace, and it’s easy to see how they make technology more accessible. In 2023, there are a lot of advanced visual front-end web development tools like Wix or Squarespace for creating websites, and design tools like Figma and Sketch for creating models and mockups.

But for building computational logic — like the kind you might find in a complex web application — visual programming’s value has long been debated. Some argue that it’s near impossible for visual programming logic to be as good as the power of a script-based language (aka writing code). The problem is, scripting languages take a lot more expertise than visual programming languages, which in turn limits the technology’s potential.

That’s why more and more people are turning to “no-code” software development tools like Bubble. And we’re not talking about the visual UI-building tools for websites and prototypes listed above. Bubble is, at its core, a true visual programming language‌ — ‌with just as much power to create the logic for advanced software as text-based programming frameworks like React or Flask.

Early visual programming involved lots of flowcharts as seen in Pygmalion (1975) and GRaIL (1968).

In the 1960s and 70s, people were already experimenting with graphical representations of logic in the form of flowchart-based systems like Pygmalion and GRaIL (Graphical Input Language). These early visual languages made the important effort of getting machine actions to map onto a set of related images. But it wasn’t until the early 1990s, after computers had decent graphical interfaces, that visual programming began to take off. Apple released a visual abstraction tool for rapid application development called Hypercard in 1987.

Then in 1991, Microsoft launched the first version of Visual Basic. Visual Basic allows people to build new apps by moving around code blocks and creating flowcharts or diagrams, and includes tools like a debugger and source code editor. But Visual Basic is more accurately known as an Integrated Development Environment (IDE), in which a text-based programming language (Basic) is combined with other visual tools to make it easier to work with code. Visual C and Visual Java are similar visual development environments for their respective programming languages.

IDEs are an important stepping stone to understanding how programming can be made purely visual. One of Bubble's founders, Josh Haas, got the idea for Bubble in 2012 from Visual Basic. He describes the early days of Bubble as the result of "if you started with an IDE before building the programming language underneath it."

While at their core, IDEs like Visual Basic still work off text-based languages, the tools they use to make coding easier are a big part of the modern visual programming experience.

Visual programming languages are great tools for teaching new coders how to think logically. Scratch, created by the MIT Media Laboratory in 2002, is probably the best example of a visual programming language with "block"-based syntax. Scratch became fairly popular, with over 57 million users and applications. Some modern no-code app builders like Thunkable were inspired by Scratch and other block-based designs.

Scratch is mostly for kids, with its cute tiger and colorful blocks that link together to form logical sentences that execute actions. But if you were to dive deeper, block-based systems come with some flaws when representing complex logic; you often end up with messy diagrams that are even harder to understand than text-based code.

And flowchart-based logic systems like the early visual programming languages don’t fare much better, with arrows and lines crossing a page that turn out to be more painful to look at than neat lines of script.

Block-based and flowchart-based visual programming hit visual limitations when trying to program more complex workflows.

Block-based and flowchart-based visual programming hit visual limitations when trying to program more complex workflows.

We're not going to get too deeply into whether words or pictures are easier to understand for the human brain. But there's a case to be made that the wide use of text-based programming languages is largely a result of how long people have used these tools (Unix and Linux are some of the earliest text-based software) and how easy the language creator finds it to be, not the users of the programming language. After all, most programming languages are based on English, and there are billions of people around the world who don't speak or write in English at all.

Here, visual programming can bridge gaps and help people learn the language of computers in a different way. Scratch, for instance, comes in 70+ languages so that young programmers can learn in their own language.

Scratch's success may have made people think visual programming is just a beginner's tool‌ — ‌a stepping stone to the world of "real programming," where you ditch the cute pictures and spend your time dealing with parentheses and commas instead.

But making something "simpler" doesn’t make it less powerful. Why do we have our children learn with pictures only to tell them to focus on words as they get older? What if there were a visual programming language that tried to be simple enough to be easy to understand but powerful enough to be useful outside the classroom?

Bubble is our answer to the question of how a modern visual programming language can make it easier to create and build beyond simple tech. Bubble allows people to make web applications, from marketplaces like Airbnb to social networks like Twitter, without needing to code. That means people can build real businesses in less time and at a lower cost.

Bubble's visual editor takes a "what you see is what you get" approach to web development. But Bubble's real value is in the way it handles logic that many other platforms lack. When Josh started working on Bubble’s workflow system, he made sure to make everything as simple as possible to avoid the messiness of older flowchart languages and block-based languages.

Bubble's workflow design helps you build logic using plain sentences (for example, "When a user does x, send user an email"). And while you can get pretty complex with advanced techniques later on, the language makes certain assumptions about the basic things you'll want in a web app (users, clicking around, login, sign-ups, etc.) to simplify most basic actions.

Computing languages designed for a specific use‌ — ‌as opposed to a general purpose‌ — ‌are known as domain-specific languages. Bubble can be described as a domain-specific language for web design, at the right level of abstraction to make it easier to design an app's interface and build its logic behind the scenes. Bubble gives people the tools in web design to explain the concepts they want to build‌ — ‌a button, an input, a search bar — at the right level of vocabulary for their realm of expertise. If you're building an app for restaurants, you create data types for your restaurant, menu, food items, and customers. If you want to make a button do something, you simply create a button element and specify what it does.

"Bubble empowers people to create tech using their vocabulary, not the other way around," Josh explains.

Tools like Bubble have been classified under the term "no-code"or "low-code," representing a movement away from text-based frameworks for web design.

But not all of these tools are equal. Some no-code tools are better for native mobile apps, some are best for landing pages and simple websites, some are tailored specifically for marketplaces with pre-made templates or machine learning models.

Bubble, with its roots as a comprehensive visual programming language, is a more open-ended and powerful web app creation platform, with the ability to connect with thousands of other platforms through our API Connector.

People have used Bubble to solve their startups' problems and build the ideal version of their digital businesses. Some have gone on to be acquired by major companies, and others have created their own careers building templates for Bubble or teaching others how to use no-code tools. Bubblers with some technical backgrounds contribute to our plugin marketplace, and software companies looking for more users help us create new custom integrations that make it easier for users who already build with other tools.

Bubble's mission is to make it easier for people to create online businesses quickly and at a lower cost, without needing to code. In our origin story, we talk about how we're solving a very old problem in tech, a problem early visual programming tried and failed to solve: how to make logic visual and erase the line between using and creating great tech.

Right now, Bubble’s approach to visual programming means it’s best suited for building web applications. But in the near future, we’re expanding those possibilities. Soon you’ll be able to build native mobile apps on Bubble, too!

Bubble’s biggest advantage is the foundation for possibility. We have a community with an overflow of creativity, motivation, and curiosity discovering new ways to build without code. We have a vision for the future where "no-code" platforms aren't their own category of tools. Instead, programming visually will just be the way that web apps and other technologies are made, because it makes the most sense to make them that way.