A Brief History of Visual Programming
Introduction
In today's world, our relationship with computers is completely symbiotic. The efficiency with which we can communicate with programming languages is one of the most advantageous skills to cultivate in the 21st century for success and productivity online. However, less than 1% of the world's population knows how to write code and manipulate software directly.
This is both a translation and an education problem.
Our computers speak a language of electrical signals, logic gates, and binary code that is eventually exposed through low-level programming languages. The learning curve to understand these languages can often be high, and our curriculum generally doesn’t prioritize introducing programming concepts until much later.
We all come into this world speaking a native language, but our interaction with the world starts much sooner. Our sense of touch begins to develop at only 8 weeks. By the time we reach grade school, our sense of interacting with our environment via touch is natural and intuitive, while our language comprehension continues to mature throughout our development.
Visual programming seeks to make programming more accessible by making the programming experience tactile and intuitive.
Code literacy is also on the rise. Computer science is entering the curriculum earlier than ever, and it has never been easier to teach yourself how to code, thanks to projects like Codecademy and Treehouse. What once required a highly specialized skill set is now much more accessible for anyone with an internet connection.
However, for many, the barrier to entry is still high. We are constantly developing new programming languages and tools to more directly interface with the language of machines. Since the invention of the GUI itself, visual programming has promised to unlock this potential and expose it to a much wider audience than text-based languages.
It is generally agreed that visual programming will never match the flexibility and capability of a full-fledged text-based programming language. However, the lower learning curve and stricter operating procedures have enabled visual programming to flourish in a few key areas, including education, multimedia programming, and automation.
Evolutionary Roots
Our neurological systems evolved after thousands of years of navigating physical space. While we have an astounding capacity to learn languages of all sorts, including programming languages, our brains primarily developed in response to a tangible three-dimensional environment and the physical manipulation of tools. Visual programming taps into this universal intuition, as it is intuitive, easy to learn, and appeals to a wider audience than learning how to manipulate programs via text.
What is Visual Programming?
Visual programming (VPL) refers to any programming environment that allows users to create programs by manipulating program elements graphically, rather than specifying them through text. Visual programming can be an entire language or a specific programming environment, such as an IDE, that uses strong visual elements to assist in the production of text-based code.
The key word here is language. Visual programming can be distinguished from a GUI by considering its syntax and general programability. A UI with a specific function in mind is generally considered an application, while a UI that allows users to manipulate programming primitives, such as variables, event handlers, loops, and classes, generally falls into the category of visual programming.
The general goal of VPL is to make programming more accessible to novices and to support programmers at three different levels:
- Syntax
- Semantics
- Prag
matics
The issue of what constitutes visual programming largely boils down to the ability to control the flow of logic within a program and manage data dependencies.
History
Our interaction with computers often activates multiple senses to varying degrees. This led to the invention of the graphical user interface (GUI), famously created at Xerox PARC in the 1970s. Human beings are, after all, tactile learners. Regardless of learning style, we learn by doing, and the GUI is an information-based interface that taps into our motor skills and evolutionary predispositions.
The history of visual programming is tightly coupled with the history of the GUI itself. It started with a program called Sketchpad in the early 1960s.
Sketchpad (1963)
Sketchpad was arguably the first program to utilize a complete graphical user interface. Users could manipulate concepts such as objects and instances, which eventually pointed towards the development of object-oriented programming. While it is well-known as the grandfather of the modern GUI, CAD, and graphics programs like Adobe Photoshop, it also introduced a data flow visual programming language on screen, as shown in this video:
GRaIL (1968)
GRaIL is considered the first example of a flowchart-based programming language. It featured a drawing box with resize capabilities, which served as an early predecessor to the Macintosh window control. GRaIL also had the ability to recognize handwriting and shapes. The graphics were analogical, designed by analogy. This was an early example of data flow programming.
First Block Programming (Logo Blocks)
The first block-based programming language called Logo Blocks was developed in 1996 at the MIT Media Lab. It targeted education for young children and later evolved into Scratch, another popular visual programming language.
Types of Visual Programming
While there is ongoing debate, visual programming can be broadly categorized into two main types: data flow (node-based) and block-based programming.
Data Flow (Node-Based) Programming
In a data flow language, there is a stream of data that is passed from one instruction to another for processing. Data flow programming allows for routing data into various streams and provides creative flexibility beyond block-based languages. This programming paradigm is common in audio applications, where the signal flow of audio or MIDI is essential, as well as in graphics programs.
Examples of data flow programming languages include vvvv, Quartz Composer, and MAX/MSP.
Block-Based Programming
Block-based programming provides visual blocks representing code elements such as events, controls, commands, loops, and conditionals. These blocks can be interlocked to illustrate logical rules and combine functionalities. The shapes or colors of the blocks often indicate their function and provide visual clues. This tactile approach to programming is particularly useful for beginners and visual learners.
Examples of block-based programming languages include Scratch and Blockly.
Pros and Cons
There is an ongoing debate about whether visual programming can ever replace traditional text-based programming. Here are some of the pros and cons associated with visual programming:
Pros:
- Easier learning curve: Visual programming is generally easier to grasp, making it more accessible to beginners.
- Intuitive visuals: Visual representations provide immediate understanding and feedback, making programming concepts easier to comprehend.
- Faster prototyping: Visual programming allows for quick experimentation and prototyping, facilitating rapid development.
