Visual programming – the easy path to the digital world

Virtually everyone uses the internet, and many would also like to make their own mark. Everyday life comes with many challenges that can be solved with programmed applications (or apps) and corresponding end devices. But the obstacles to programming are often great. A functioning program comprises a range of components in the form of a programming language with a huge amount of “vocabulary”: variables, constants, looped processes, conditions, formulas, actions, and regular expressions.

Working with such text-based programming languages takes extensive knowledge, a strong ability to abstract, and the ability to maintain a high concentration for long periods of time. Learning a text-based programming language can be put on equal footing with learning a foreign language. To overcome these hurdles, visual development environments have been created since the 1960s. Here, programmers don’t use tediously composed text codes but instead make use of graphical elements.

With visual programming, the elements of a programming language are provided in the form of graphical building blocks. That’s why the approach is also called graphical programming. Based on the appearance and labels of these elements, you can tell which tasks in programming can be solved using which components. The pictograms help provide reference points and avoid highly complex structures or great abstractions.

The descriptions of the individual elements and the underlying processes represent human expressions or actions, such as “do...”, “say...”, “press the key...” or “wait until...” The elements of the program are assembled using drag and drop. You can tell whether graphical elements can be connected based on the recesses and protrusions, which have to fit together like puzzle pieces. This makes assembly processes easy and intuitive, without having to know a text-based programming language.

Just like learning a foreign language, when programming you need to first learn the most important “vocabulary” to “get by”. Each new programming task requires you to learn new terms. The scope of modern, text-based programming languages has expanded massively over the years, in order to keep pace with the needs of the modern internet. Programming sections can be placed in separate files and integrated in the programming process. Although this simplifies text-based programming, it requires a comprehensive overview, well-annotated code, and careful documentation.

Visual programming breaks down technical barriers and makes programming more accessible. This way, for example, children can benefit from the playful approach to programming. Programmers can focus on the logical processes in their program, free from distraction. Usable results are quickly achieved, providing motivation for new and bigger projects.

Advantages of visual programming

Only a small amount of learning is required. Essentially, an idea can be “written” as a program straight away. Illustrative symbols ensure easy comprehension. Since there’s no syntax, no typos can creep in. This helps programmers understand the basic concept of a programming language.

Visual programming languages enable a process known as explorative programming. Simply begin and build a program step by step, before an exact solution has been fully thought through. Existing programming steps can be tested for their functionality time and again. Programmers mainly work with browser-based solutions that work regardless of the computer operating system. The results can normally be exported to other, text-based programming languages.

Disadvantages of visual programming

Part of graphical programming is tied to special applications or certain systems, hardware or end devices. In general, it’s not possible to create individual elements or add comments for project team members to review. This makes it hard to maintain an overview even with only slightly more complex programs. Moreover, visually programmed projects can only be scaled to a limited extent. Adjusting them to large or rapidly growing projects is therefore difficult. In the case of big projects, the advantage of explorative programming can quickly become a disadvantage in the form of unstructured code. Programs like these are awkward to maintain and expand.

A wide range of visual programming languages is available. Here’s just a selection:

Blockly is a type of library. It offers a visual programming editor that is added to Android, iOS and web applications. Blockly also uses interlinked, graphical blocks. The programmed algorithms can be exported as JavaScript or Python code, for example.

NEPO is based on Scratch and uses the freely available library Blockly. It has been expanded with its own functionalities. An advantage of NEPO includes the open interfaces that can also control other hardware or robotic systems.

Grape is a graphical development environment. It allows even programming novices to code microcontrollers in simple steps.

App Inventor originally comes from Google. The graphical interface enables applications for Android phones to be programmed with graphical blocks.

This graphical programming language is especially suited to programming the microcontroller Arduino without text entries.

This visual programming language is based on data flows and is also a development environment. Pure Data is used to produce interactive multimedia software – such as for synthesizers.

A product line from the toy manufacturer Lego, it revolves around programmable Lego blocks: Using electric motors, sensors, and Lego technology pieces, it’s possible to build and program robots and other interactive systems.