Visual Programming. How to Create a Digital Product Without Touching the Keyboard

A quick dive into what visual programming is and how it compares to traditional coding.

Visual Programming. How to Create a Digital Product Without Touching the Keyboard

The heart of a digital product is a program – a sequence of instructions for the device's operating system. The program tells the system what to do in response to external influences: clicks and taps, keystrokes and scrolling. Programming is usually represented as writing code in a special language such as Python, JavaScript or C++. However, text is not the only way to create a program.

The development of information representation technologies led to the emergence of non-textual programming methods. In the early 70's J. Paul Morrison proposed flow-based programming. Within this paradigm, a program is a method of describing how a grid of interconnected nodes transfers and manipualutes input data. One implementation of Morrison's ideas is visual programming. Instead of textual manipulation, programmers are able to connect ready-made nodes, depicted as simple blocks and icons, into apps.

Basic capabilities of visual programming languages are not inferior to their classical analogues: there are data typing, loops, conditional operators, functions and libraries. At the same time, the elements of visual languages are usually more difficult to modify, and the program execution depends on the environment. As a result, visual programming languages are not universal and usually used only within one industry.

Where graphical programming is used

Education. Graphical programming relies on vivid images, which pupils and students perceive more easily than verbal abstractions. Therefore, the concept of graphical code is especially popular in teaching the development and creation of games.

Science and engineering face the same type of simulation tasks, the difference is usually reduced to changing a small number of parameters, the order of elements interaction or subprograms code. So it is convenient to represent the accumulated knowledge in the form of interlinked blocks. Visual programming environments facilitate not only the process of creating the program code, but also the app interface – the program face is created simultaneously with the internal content.

Multimedia and 3D. Transforming graphical and audio content also involves applying sequences of the same type of actions. For example, in the Blender environment, by connecting special nodes, you can specify changes in the geometry, color, texture, and shading of objects. The same program can be used simultaneously for different characters, scenes, and materials.

A sequence of Blender filter nodes (manual)

App development. Although a considerable part of time in program development is spent on reading and writing code, it is convenient to use high-level abstractions for large-scale solutions. A graphically designed set of subroutines is easier to grasp at a glance than thousands of codelines. Appropriate NoCode development environments are available for mobile development as well as for desktop and web apps.

Data Science deals with tasks at the intersection of science and programming. Although DS-researchers are developing new algorithmic approaches, most routine problems are solved using a limited range of predictive models. For example, random forest type models or neural networks.

Below we look at the features of several NoCode environments to show how the key ideas of visual programming can vary from app to app.

Education: Scratch and Blockly

Many visual programming environments owe their emergence to the success of Scratch. It is a visual development environment created for children by MIT team.

Programs in Scratch consist of two areas: 1) a board with graphic blocks of program code that control sprite objects, and 2) a field with sprites. It resembles a theater: a script and a stage where the characters move according to the script.

Visual programming frees users from control over the correctness of the program syntax, which significantly lowers the entry threshold and accelerates studies. As a result, children quickly start writing games and programs in Scratch that interact with the outside world through a microcontroller, such as Arduino.

Visual programming environments use one of two approaches to connect elements:

  1. Blocks. A well-known example is Scratch educational environment with unified blocks. To realize the necessary sequence, the user defines constants and puts blocks into each other. The shape and color of the blocks prompt the user for elements compatibility. The result is like the code of a classical program – it can be read from top to bottom.

  2. Flow. Each subprogram corresponds to a certain icon or block. It is left to the user to connect the icons to each other with thread links in the desired sequence of information conversion. An element usually can form many different links. Constants and variables are defined either within subprograms or as individual icons. An example of industrial use of the approach is NI LabVIEW automation environment.

Programming blocks of visual language correspond to structures in textual programming languages. The example shows how a program in Blockly automatically translates to JavaScript. It is also possible to generate code in Python for backend and Dart for cross-platform applications

The adult analogue of Scratch is Blockly. It is an environment and library from Google team for developers who want to use visual programming in their own applications, including those with unique program blocks. Blockly code is easy to embed into real-world applications due to the fact that the graphical code automatically translates to multiple text-based programming languages. An example of integration is verge 3d, a framework for creating browser-based 3D applications.

Science and engineering: LabVIEW

LabVIEW is one of the most common software development environments for controlling engineering and scientific equipment. To build programs, users use G language, which refers to the flow architecture of visual languages. The developer places program elements on the board and connects them to each other. Data is distributed from the regulator nodes, where the information can be entered, to the indicator nodes, where the result of processing can be read. Special drivers add nodes corresponding to real-world devices, so scientific instruments or robot joysticks also can be included in programs.

Example of a program in LabVIEW environment (source). Just as in the block approach, processing and transfer elements of different data types have different colors. To describe cycles, gray rectangular contour are used that stop when a certain event occurs – in this example, when the "Stop" button at interface panel is pressed. The graphic code of the program can be supplemented with explanations in the form of text comments

As in many other visual development environments, the app interface is created simultaneously with the program, which significantly reduces the cost of getting an application up and running.

Application Development: Node-RED and Thunkable

Node-RED is a streaming programming tool developed by IBM team. It is currently a part of OpenJS Foundation and runs in the Node.js environment. Applications for the smart home and the Internet of things are developed in this environment. Node-RED also allows you to use thousands of ready-made libraries of the Node.js software platform.

Building an app in Node-RED environment


The program code in Thunkable resembles Scratch and Blockly. However, you can see the specifics of mobile application interfaces in the variable names.

Another example of the NoCode approach is Thunkable mobile development environment. It uses a block-based approach similar to education systems. Teenagers familiar with Scratch will see analogical programming structures, so the transition to mobile apps will be painless. An app created in Thunkable is automatically ported to 3 platforms: iOS, Android, and a web app.

Data Science: Enso and Orange

Structure in graphical programming is usually governed by a set of rules provided by the programming environment. The simplicity of the rules used limits their flexibility. Enso is a tool that allows an app in choice situations to be guided by information obtained from real users. In doing so, among the predictive models, the environment uses interpretable ones, those whose behavior can be explained to the client.

Enso's flexibility is evident in the fact that the environment allows code from the world's most popular Data Science languages R and Python, as well as the inclusion of Java and JavaScript libraries. The Enso team has also taken care of performance – the desktop uses the processing power of GPU.

Enso is a hybrid visual and textual functional programming tool. ​​Due to the strict environment structure and color hints, you can not be afraid to make mistakes (source)
Example of plotting when analyzing a dataset with Orange (source)

If you need a higher level of abstraction when working with data, the graphical tool Orange is a good help in learning and applying machine learning models. Statistics and Data Science specialists will find many familiar terms in the list of tools: cross validation, classification, clustering and others. Creation of a computational program is done by combining several round icons into a flow.

Conclusion

Visual programming has obvious drawbacks:

  • since programs require eye contact, they cannot be handled in environments without graphical windows, e.g. you cannot run code in a terminal on a remote server;
  • high level of abstraction blocks optimization of the final product: convenience of universal elements often comes into conflict with the requirement of economical consumption of computational resources;
  • compared to textual languages, there are far fewer helper tools: version control systems or autocompletion are not applicable.

At the same time, graphical approach in comparison to traditional programming creates conditions for quick start and writing programs "with broad strokes". This is especially important in the areas where programming is intended to reduce routine workload. Learning the process of coding should not be perceived as an additional difficulty.

High development speed, intuitiveness and fast output keeps the users of visual languages motivated. As a result, visual programming appears to be one of the most effective approaches for rapid product prototyping in education, science, engineering, and high-level development.