Visual pro­gram­ming – 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 chal­lenges that can be solved with pro­grammed ap­plic­a­tions (or apps) and cor­res­pond­ing end devices. But the obstacles to pro­gram­ming are often great. A func­tion­ing program comprises a range of com­pon­ents in the form of a pro­gram­ming language with a huge amount of “vocab­u­lary”: variables, constants, looped processes, con­di­tions, formulas, actions, and regular ex­pres­sions.

Working with such text-based pro­gram­ming languages takes extensive knowledge, a strong ability to abstract, and the ability to maintain a high con­cen­tra­tion for long periods of time. Learning a text-based pro­gram­ming language can be put on equal footing with learning a foreign language. To overcome these hurdles, visual de­vel­op­ment en­vir­on­ments have been created since the 1960s. Here, pro­gram­mers don’t use tediously composed text codes but instead make use of graphical elements.

With visual pro­gram­ming, the elements of a pro­gram­ming language are provided in the form of graphical building blocks. That’s why the approach is also called graphical pro­gram­ming. Based on the ap­pear­ance and labels of these elements, you can tell which tasks in pro­gram­ming can be solved using which com­pon­ents. The pic­to­grams help provide reference points and avoid highly complex struc­tures or great ab­strac­tions.

The de­scrip­tions of the in­di­vidu­al elements and the un­der­ly­ing processes represent human ex­pres­sions 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 pro­tru­sions, which have to fit together like puzzle pieces. This makes assembly processes easy and intuitive, without having to know a text-based pro­gram­ming language.

Just like learning a foreign language, when pro­gram­ming you need to first learn the most important “vocab­u­lary” to “get by”. Each new pro­gram­ming task requires you to learn new terms. The scope of modern, text-based pro­gram­ming languages has expanded massively over the years, in order to keep pace with the needs of the modern internet. Pro­gram­ming sections can be placed in separate files and in­teg­rated in the pro­gram­ming process. Although this sim­pli­fies text-based pro­gram­ming, it requires a com­pre­hens­ive overview, well-annotated code, and careful doc­u­ment­a­tion.

Visual pro­gram­ming breaks down technical barriers and makes pro­gram­ming more ac­cess­ible. This way, for example, children can benefit from the playful approach to pro­gram­ming. Pro­gram­mers can focus on the logical processes in their program, free from dis­trac­tion. Usable results are quickly achieved, providing mo­tiv­a­tion for new and bigger projects.

Ad­vant­ages of visual pro­gram­ming

Only a small amount of learning is required. Es­sen­tially, an idea can be “written” as a program straight away. Il­lus­trat­ive symbols ensure easy com­pre­hen­sion. Since there’s no syntax, no typos can creep in. This helps pro­gram­mers un­der­stand the basic concept of a pro­gram­ming language.

Visual pro­gram­ming languages enable a process known as ex­plor­at­ive pro­gram­ming. Simply begin and build a program step by step, before an exact solution has been fully thought through. Existing pro­gram­ming steps can be tested for their func­tion­al­ity time and again. Pro­gram­mers mainly work with browser-based solutions that work re­gard­less of the computer operating system. The results can normally be exported to other, text-based pro­gram­ming languages.

Dis­ad­vant­ages of visual pro­gram­ming

Part of graphical pro­gram­ming is tied to special ap­plic­a­tions or certain systems, hardware or end devices. In general, it’s not possible to create in­di­vidu­al 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 pro­grammed 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 ex­plor­at­ive pro­gram­ming can quickly become a dis­ad­vant­age in the form of un­struc­tured code. Programs like these are awkward to maintain and expand.

A wide range of visual pro­gram­ming languages is available. Here’s just a selection:

Blockly is a type of library. It offers a visual pro­gram­ming editor that is added to Android, iOS and web ap­plic­a­tions. Blockly also uses in­ter­linked, graphical blocks. The pro­grammed al­gorithms can be exported as JavaS­cript or Python code, for example.

NEPO is based on Scratch and uses the freely available library Blockly. It has been expanded with its own func­tion­al­it­ies. An advantage of NEPO includes the open in­ter­faces that can also control other hardware or robotic systems.

Grape is a graphical de­vel­op­ment en­vir­on­ment. It allows even pro­gram­ming novices to code mi­cro­con­trol­lers in simple steps.

App Inventor ori­gin­ally comes from Google. The graphical interface enables ap­plic­a­tions for Android phones to be pro­grammed with graphical blocks.

This graphical pro­gram­ming language is es­pe­cially suited to pro­gram­ming the mi­cro­con­trol­ler Arduino without text entries.

This visual pro­gram­ming language is based on data flows and is also a de­vel­op­ment en­vir­on­ment. Pure Data is used to produce in­ter­act­ive mul­ti­me­dia software – such as for syn­thes­izers.

A product line from the toy man­u­fac­turer Lego, it revolves around pro­gram­mable Lego blocks: Using electric motors, sensors, and Lego tech­no­logy pieces, it’s possible to build and program robots and other in­ter­act­ive systems.