Speaking with your modern technology has never been easier, now that you can literally talk to an Alexa or Google Home and have a cloud-based program recognize your speech. 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 that information with their computers. However, visual programming offers an alternative way to "talk" to our modern computers.
What is Visual Programming?
Visual programming is a way of representing computing logic through graphics and images, rather than through purely text. Visual programming has existed for decades and represents another layer of abstraction from the machine language that our computers use when they communicate with each other.
The main goal of early visual programming was to make it easier to interact with your computer. The first graphical user interfaces (GUIs) offered a massively easier experience over typing lines into a terminal window, to the extent that most people today buy a "Mac" or "PC" and don’t even think of their computers as distinct from their visual operating systems.
Early on, visual programming for user interface-building was an easy no-brainer. In 2022, there are many sophisticated visual front-end web development tools like Wix or Squarespace for creating websites and design tools like Figma and Sketch for creating prototypes.
But for building computational logic, like what you might find in a complex web application, visual programming’s value has been controversial. Skeptics will argue that it’s near impossible for visual programming logic to rival the power of a script-based language. Visual programming languages have not come close to the popularity of scripting languages for building back-end logic… until perhaps today.
Enter: Bubble. Bubble is a "no-code" web app development platform that began in 2012. At face value, Bubble shares many similarities with the visual UI-building tools for websites and prototypes listed above. But Bubble is, at its core, a true visual programming language – with all the power to create the logic for sophisticated web tools as text-based programming frameworks like React or Flask.
To understand how visual web development platforms like Bubble came about, we're taking a look into the history of visual-based programming – and how the next phase in the evolution of code might actually be "no code."
Early "Visual" Programming Language Examples: 1970s Graphical Languages and Basic
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 attempted 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 applications 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, drew inspiration from Visual Basic when he began creating Bubble in 2012. He describes the early development 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 are still working off text-based languages, the tools they used to make coding less painful are hugely important to the modern visual programming experience.
Visual Programming as an Educational Tool
Visual programming languages have shined as educational tools for teaching new coders how to think logically. Scratch, developed 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 have drawn inspiration from Scratch and other block-based designs.
Scratch is primarily aimed at kids learning to program, 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 obvious 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 recursive arrows and lines crossing a page that turn out to be more painful to look at than neat lines of script.
We're not going to wade too deeply into the psychology debate about whether text or visuals are more comprehensible to the human brain; that's largely subjective and personal. But there's an argument to be made that the popularity of text-based programming languages is largely as a result of tradition (Unix and Linux as foundational text-based paradigms) and convenience to the language creator, 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. Yet we expect them to do so for the purposes of creating technology.
Here, visual programming has an opportunity to bridge gaps and help people learn the language of technology in a different way. Scratch, for instance, has been translated into 70+ languages so that young people can program in their native tongue.
However, Scratch's relative success may also have saddled visual programming with a reputation as being a beginner's tool, a stepping stone to the world of "real programming," where you ditch the cute pictures and spend your time agonizing over parentheses and commas instead.
But making something "simpler" doesn’t have to make it less powerful. Why do we invest in having our children learn visually only to insist as they get older that they prioritize the world of verbal language? What if there were a visual programming language that strived to be simple enough to be understandable but powerful enough to be useful outside the classroom?
The Rise of Bubble & “No Code” Platforms: Visual Programming for Web Apps
Bubble is our answer to the question of how a modern visual programming language can fulfill the promise of making it easier to create and build sophisticated technology. Bubble allows people to build web applications, from marketplaces like Airbnb to social networks like Twitter, without needing to code. The result is that people are able to build real business ideas online in a fraction of the time and cost of development.
RELATED: See apps that users have built in Bubble with no code.
Bubble's visual editor takes inspiration from UI design and development tools, with a "what you see is what you get" approach to web development. But Bubble's real value is in its approach to logic that many other platforms lack. When Josh started working on Bubble’s Workflow system, he insisted on "aggressive simplicity" to avoid the complicated pitfalls of older flowchart languages and the messiness of block-based languages.
Bubble's workflow design is intended to help 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 statements and conditionals in the advanced bubbling techniques, the language makes certain assumptions about the basic things you will want in a web app (like: users, clicking around, login, sign-ups) 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 you want to build – a button, an input, a search bar – at the right level of vocabulary for your realm of expertise. If you're building an app for restaurants, you create data types for your restaurant, menu, food items, and/or 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 integrate 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 raise millions of dollars in venture capital funding, 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.
What can you do with Visual Programming now?
Bubble's mission is to make it easier for people to create digital businesses quickly and affordably, without needing to code. In our origin story, we talk about how we're addressing a very old problem in technology, a problem that early visual programming tried and failed to solve: how to make logic visual and erase the boundary between using technology and creating technology.
Bubble's approach to visual programming is not currently meant to be able to do everything that technology can do now or will be able to do in the future. Bubble is built for web applications. While we've discovered things like game design are increasingly possible in Bubble thanks to our incredibly talented users, we know there are other programs specifically created and better equipped for tasks like live streaming and audio processing (but that we will be enthusiastic to integrate with in the future).
What we have is the foundation for possibility. We have a community with an abundance of creativity, determination, and self-motivated curiosity, discovering new ways to build without code. We have a vision for the future where "no-code" platforms are not 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.
