Interacting with technology has come a long way.
Today, you can literally just talk to an Alexa or a Google Home and the cloud-based programs respond to you. But just a few decades ago, “talking” to your computer required knowing a whole new language — a programming language.
Most programming languages are text-based, allowing coders to give commands to a program to pull information from, or share information with their computers. As software development progressed, programmers developed easier, more accessible methods for people to interact with computers. Visual programming is one of these methods. With visual programming, you can “talk” to a computer and build software in a natural, visual way, without having to learn or write in a traditional programming language.
What is visual programming?
Visual programming is a method of web and software development that uses graphics and images, rather than purely text, to build out computing logic and communicate with computer programs. It represents another layer of machine language that our computers use when they talk with each other.
Visual programming has existed for decades, but it has evolved a lot during that time.
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. With GUIs, you’re able to interact with your computer in the ways we’re familiar with today — via images, icons, and gestures.
When it comes to building your own software, visual programming tools that let you build front-facing user interfaces are pretty commonplace. But for building computational logic — like the kind you might find in a complex web application — visual programming’s value has long been debated.
But today, “no-code” software development tools are taking visual programming to new levels. Bubble, at its core, is 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.
History of visual programming languages
Many people see Bubble and other no-code tools as relatively new and untested. That’s not quite true, though — no-code tools are really just the next step in a long history of increasingly visual programming.
Take a little trip with us through the history of visual programming and you’ll see what we mean:
Even in the 1960s and ‘70s, people were experimenting with graphical representations of logic in the form of flowchart-based systems like Pygmalion and GRaIL (Graphical Input Language). These early visual languages succeeded in 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 allowed people to build new apps by moving around code blocks and creating flowcharts or diagrams, and included tools like a debugger and source code editor.
But Visual Basic isn’t true visual programming as we know it today. More accurately, it’s an Integrated Development Environment (IDE), in which a text-based programming language (Basic) is combined with a visual programming environment to make it easier to work with code. Visual C and Visual Java are similar visual programming 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.”
Around the same time, frontend no-code development tools were starting to take off. Visual tools like Wordpress and Webflow allowed individuals and entrepreneurs to build their own websites with little technical knowledge using visual, drag-and-drop editors.
But still, these tools focused mostly on user interfaces. Complex logic and workflows aren’t really supported. Josh knew that Bubble could take things further.
He had been exploring the realm of “domain-specific” programming languages: the idea that a computer language should be purposefully created and tailored to the tasks its users are using it for. Bubble would be a true programming language specifically created for complex web application development.
From here, it’s clear to see how Bubble is simply the next inclusive step in an age-old question of technology: how to make incredibly complex things simpler and easier to use and interact with. Graphical interfaces took interacting with computers from a highly technical task to one anyone could do. Now, visual (graphics-based) programming is taking building software from a highly technical task to one anyone can do.
Visual vs. traditional programming
Visual and traditional programming aren’t opposites, as many assume. They’re simply two different ways of achieving the same goal: building cool software.
So, how does each method get you to the end goal?
Traditional programming is the most complex, customizable option. With traditional coding, everything — everything — is coded from scratch through a text-based programming language. The programmer needs to “speak” this language fluently to create complex programs, but with the right skills, you can create anything you want.
Visual programming is more intuitive, and it offers more speed without losing the option for flexibility. With visual programming, you communicate with the computer via images, not text. Developers use a visual, drag-and-drop editor to build their program, which speeds up development and makes it more accessible.
At the same time, you can still build anything you can imagine, without having to build everything from scratch.
Keep in mind that not all no-code tools are created equal. While Bubble is a visual programming language, not all no-code tools are.
For example, Glide and Webflow offer no-code development, but they aren’t true programming languages in themselves. As a result, they can only handle specific tasks, like designing web pages, and offer far less flexibility and the ability to build complex applications compared to Bubble.
Examples of visual programming languages
Today, visual programming tools that let you build front-facing user interfaces are pretty commonplace. Advanced visual frontend web development tools like Wix or Squarespace for creating websites, and design tools like Figma and Sketch for creating models and mockups are great examples.
But these aren’t the same as visual programming languages, which enable complex development, logic, and workflows.
Some visual programming languages include:
- Visual Basic: An IDE that uses a visual environment and English-like command structures to make programming more accessible. When you’re done, VB converts the commands into a machine language that computers can understand. It can be used to build web applications and other Windows-based programs.
- Hypercard: An early visual software development platform developed by Apple in 1987. It was based on “cards,” which could be inter-hyperlinked into “stacks” to create interactive applications.
- GRaIL: A very early visual programming tool that used a light pen and a flowchart-based programming language that the system recognized and converted into code. On-screen elements could be visually manipulated to adjust the code and workflows.
- Pygmalion: Another early programming environment that used icons and demonstrations to represent programming concepts. It aimed to move from abstract, text-based programming to “programming by demonstration,” and allowed users to manipulate and connect visual icons to code.
- Scratch: A well-known visual programming tool that’s mostly used to teach kids how to code, but is also great for learning to think programmatically. Users link blocks of code and commands together to control “sprites” (or characters) in the development stage to create animations, simple games, or stories.
- Bubble: Bubble is a software development platform that enables anyone to build and launch interactive, multi-user apps for desktop and mobile web browsers without writing code. Rather than specializing in one or two aspects of web development (like designing landing pages or building databases), Bubble’s full-stack visual programming interface does it all. You can customize your UX with a drag-and-drop editor, build out logic, manage databases, and more.
Benefits of visual programming
Visual programming offers a lot of benefits, especially for non-technical founders and builders. For starters:
More accessible
Visual programming offers a more accessible, intuitive way for everyone to bring their ideas to life — not just those who’ve had the privilege of a formal education in traditional engineering or the time to teach themselves to write code.
By creating a programming language that can be easily understood by humans and computers, we can reduce the barriers to entry for software development. We envision a future where you or anyone you know can build anything from a spreadsheets tool to manage your nephew’s Little League team to the next major FAANG-level tech company without having to raise major funding rounds or living in a major tech hub.
Faster development
Visual programming is much faster than traditional programming. That’s because visual programming relies on things that traditional coding can’t support, such as:
- Pre-built items and templates
- Reusable components
- Drag-and-drop interfaces that convert simple on-screen interactions to code
With traditional coding, even the most basic elements have to be coded from scratch. With a visual development platform, you don’t have to reinvent the wheel each time, allowing you to move a lot faster.
This makes rapid prototyping and iteration possible, supporting quick-to-market minimum viable products (MVPs) or scaling your startup. Iteration is also faster, giving you the advantage of speed, flexibility, and agility to meet users’ needs in a fast-paced world.
Easier debugging
Instead of evaluating lines of code, you can test and iterate on your program visually. This makes it much easier to isolate the problem and iterate until your software looks, feels, and behaves exactly as you want it to.
Bubble’s WYSIWYG editor allows you to build, iterate, and test all in one place. A “what you see is what you get” (WYSIWG) editor means that when you’re working in the visual editor, what you see on your screen mirrors what the actual product will look like.
This makes it so much easier to evaluate your program based on exactly how the user will see it. As a result, you can find issues and bugs faster, fix them more easily, and ship user-friendly and intuitive software quickly.
Human-first
Traditional programming languages are based on how computers work. They’re machine languages that developers have to learn how to “speak” to communicate to the computer and program.
With visual programming, the language is based on what’s easier for humans to understand, and then translated to machine languages. A human-first programming language underlies many of the other benefits of visual programming: faster development, more accessibility, easier iterating and debugging, faster to learn, and so on.
Aside from all of that, a human-first programming language helps you stay in your user’s shoes the entire time by working with a visual-first interface that mirrors the user’s experience. This often makes it easier to develop intuitive, easy-to-learn, human-first UI and UX.
Effective teaching
Visual programming languages are also great tools for teaching new coders how to think programmatically. At Bubble, we see “coding” and “programming” as two separate skills. Coding is just one way to program, just like you can send a message via text or use a handwritten letter. Coding requires you to learn a language computers can speak, while programming is the skill of being able to think logically through the structure of an app and its workflows.
For example, coding learning tools like Scratch use visual components to teach programming skills — with great success. But visual programming doesn’t just have to be a teaching tool. Learning — and using — a visual programming language makes programming more accessible for developers who don’t speak English (since most programming languages are built on English) and can bridge the gaps between envisioning the end product and making it a reality.
Bubble’s approach to visual programming
As mentioned, not all no-code tools are created equal. On one end of the spectrum, you have tools like Scratch, which are more or less only used for teaching before “graduating” to more complex programming languages. Or you have visual, drag-and-drop editors for completing certain tasks (like building a landing page) that have strict boundaries and limited flexibility. In these tools, most of the “programming” is already set.
On the other end of the spectrum is a tool like Bubble, which is a complete visual programming language that offers full customizability and control. Here’s how we approach visual programming:
What you see is what you get (WYSIWYG) design approach
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’s visual editor takes a “what you see is what you get” approach to web development.
Dragging and dropping visually-displayed elements — like containers, groups, text, images, buttons, and more — into the editor on Bubble will display them just as they will in your live app.
This makes it so much easier to map out your design and bring it to life. Just as you can visualize it in your mind’s eye, you can design that visually through Bubble’s editor without having to translate it into a text-based language.
Logic built from plain, human sentences
But Bubble’s real value goes beyond WYSIWYG design for UI. It’s the way Bubble handles logic and workflows that many other programs lack.
When Josh started working on Bubble’s workflow and logic system, he wanted to create a simple system that would avoid the messiness of older flowchart and block-based languages like GRaIL and Pygmalion.
Instead, Bubble’s workflow design helps you build logic by using plain sentences — for example, “When a user does x, then send an email.” While you can get pretty complex with advanced techniques later on, the programming language makes assumptions based on more conversational input about basic things you’ll want to simplify actions and workflows.
The only no-code platform with the power of code
Most programming languages like Python or React are designed for general purposes — you can use them to do pretty much anything. That makes them more flexible, but also harder to learn and much harder to master.
No-code tools, like Webflow or Glide, are much easier to use, but they’re often designed for specific purposes, like making websites or designing internal apps.
Bubble brings you the best of both worlds in one tool.
Yes, Bubble is no-code. But it’s also programming. With Bubble, you can build anything you could build with traditional programming languages, without having to learn Python or React.
Bubble gives people the visual tools to explain the concepts they want to build — a button, an input, a search bar — with familiar vocabulary. 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.
Open-ended possibilities
But don’t think that using a domain-specific language means you have fewer options. Some no-code tools are built for specific use cases, like native mobile apps, landing pages and simple websites, or marketplaces with pre-made templates.
Not Bubble, though. 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.
In short: If you can dream it, you can build it on Bubble.
Community and collaboration
At Bubble, we believe strongly in the power of community and collaboration to make software better and bring our ideas to life. That’s why we’ve invested heavily in our community — in hopes of making Bubble not just a product or a programming language, but a supportive network of developers, dreamers, and doers.
When you build on Bubble, you also get access to a highly-engaged network of other developers via our forum. Get help troubleshooting, find someone to walk you through a sticky problem, or make suggestions directly to our team. We also host regular in-person events to get you connected to other Bubblers and support your learning and growth.
And that’s not to mention the dozens of community-led Bubble groups hosted on Facebook, Slack, Reddit, Discord, WhatsApp, and more.
With a strong community behind you, you don’t have to build alone. Whenever you need it, you can find support in scaling your startup, building your first app, finding (or creating) a just-right plugin, and more.
Build natively on web and mobile
Bubble was originally designed for building web apps — and that’s always going to be a key component of the Bubble ecosystem. But now, we’re working to expand Bubble to also support native mobile app development as well.
Native mobile apps built on Bubble will share the same databases, backend APIs, and logic Bubble has today, and will integrate with your existing web apps. We’re taking the best parts of Bubble’s visual programming language, and remixing it for native mobile development.
You’ll have the ability to define gestures, native components, device functionality, layers, and more, all in the same intuitive canvas and drag-and-drop editor Bubble uses for web apps. Plus, you’ll be able to preview your app on your phone while you build. We’ll even help you submit to Android and iOS App Stores.
We know that visual programming languages can support any type of web or mobile app development. And Bubble will be one of the first to make it possible.
Learn visual programming with Bubble
Visual programming isn’t just an easier, faster solution: It’s a full-stack programming language that can be used to build absolutely anything. Web apps, mobile apps, simple forms, complex marketplaces, CRMs, or SaaS tools — the sky’s the limit.
With a visual programming language, you get the benefits of customization and flexibility alongside faster development and a human-first approach to programming that makes it much more accessible.
If you’re a founder or have a big idea for an app, why not try building it yourself on Bubble? Visual programming still requires some dedicated learning and trial-and-error — but we have plenty of resources, from our detailed manual to how-to-build guides, to video courses and tutorials — to set you up for success.
