Block coding

An easy and powerful way to develop software

Accessible and fast

How do we address the fact that programming is “hard and time-consuming”? How do we transform “hard and time-consuming” into “accessible and fast”? The answer lies in block-based and visual programming.

Block-based programming emerged as the best solution to the above problem. The idea is to create a code in a way that is both visual (simple) and similar to traditional text-based coding (powerful). All the developer has to do is to connect visual “building blocks” in a logical way.

This approach became predominant in introducing kids to programming and is used all over the world now. Today, over 40 million users actively use block coding with Scratch and 50 million children learned how to program with code.org.

Text-based coding is not easy

In the new economy, where software development is in high demand and every company is a software company, programming has become an essential skill. When you look at the programming languages, you will notice that they are designed by engineers, for engineers. This makes programming almost inaccessible to end-users who may want to make minor changes to the application without always consulting the developer or even build a simple app for personal use. For quite some time, many people have tried to address this problem and designed various programming languages and tools to make programming easier and accessible to business users or “citizen developers”.

Syntax-free programming

Yet another misconception is that block-based programming is not suitable for professional developers and diminishes their value. That is, in fact, not true. Block-based coding lessens the burden of using complex syntax and lets the developers focus on implementing the business logic in a fast and clear manner. While the code written in visual blocks is almost “syntax free”, it has strong expressive power and can be mixed with text-based code written in mainstream programming languages such as Java or JavaScript. It cuts development time and allows to produce the solutions that are easier to maintain than traditional software projects. Usage of block-based coding by professional software developers cuts development costs and benefits both development team and customers.

Visual programming

Block-based languages evolved as branch of visual programming. Most often our ideas are visual. We turn to draw a plan on a white-board because it makes us understand it better. However, the initial application of computer programming started with hardware-close languages and led us to the world text-based language like Java, C#, or Haskell. While the text-based programming language makes the developers to think a bit like a computer, some of them wanted to write and read the code in a more human-friendly manner. As a result, a number of visual programming languages has appeared.

The main goal of visual programming is to make programming more accessible at 3 different levels:

Syntax – the use of block/icons, diagrams, and forms to eliminate syntactic errors.
Semantics – usage of meta-information to document and explain the program.
Simulation – visual programming languages may include visual mechanism to bring the program in a particular state and check its behavior.

Advantages and disadvantages of visual programming

The typical claims made by visual programming are like “Advanced users or even novices can know how the program functions at a glance”, “Source code becomes more readable due to the use of colors and shapes involving person’s visual abilities”, “Visual programming language looks presentable and understandable even to non-programmers.”

While in some cases the claims hold true, the application of visual programming languages is more complicated than that. Graphical programming promised to provide better program overview and to allow the developer to see the big picture. However, the effect was exactly opposite. While simple programs were easy to create and maintain, complex software required complex relations which were difficult to represent and too bulky to manage in a visual way. Programs such as shown on the drawing caused mainstream developer audience to shun off visual programming and to apply it only for teaching and demonstrating single programming concepts to novice developers and non-developer users.

However, the idea of visual programming is very compelling and experiments continued. Block-based family of visual languages became the first to become widely popular, at least with children.

Visual programming language

The block-based approach of visual programming is by no means a new idea but initial implementations lacked technical means to make its usage in a correct way. It has just become popular in recent years due to the appearance of new generation tools like Scratch, Blockly, and Snap. These tools are a part of a larger group known as structured editors (Gouge et al. 1984). Block-based coding is a form of programming language where the developer issues instructions by dragging and dropping blocks. This helps to prevent syntax errors and developers do not have to memorize syntax to write code. For example, in text-based language, missing a semicolon will result in an error message or prevent the program from running at all. These types of errors are eliminated with block-based coding. Block coding is just as powerful and useful as text-based language, but easier to use and understand. Having to drag and drop commands is easier than typing it character-by-character with a keyboard.

Visual programming blocks

Over the years some best practices have been developed on how the users should be able to interact with the blocks:

Drag and drop manipulations are used to arrange the blocks into programs.
End-users should be able to edit the blocks – blocks are interactive and not just static entities. For example, if you want to change a color, you could just pick it from a palette instead of entering color values in an editable text field.
Blocks are arranged geometrically to define syntax. The block must touch or be connected to each other directly rather than link by lines or additional explicit graphical connectors. This gives the blocks a jigsaw puzzle appearance.
The block should be self-explanatory to the user. Code readability is important in all types of programming, but becomes essential with citizen developers or children who do not have much experience with programming.

Block-based coding for business users

Whenever people hear of visual programming, they tend to associate it with teaching of kids or beginners how to code. While block-based coding is immensely popular with students and teachers, it would be a mistake to narrow its application. What about the people who are not kids or do not plan to pursue a career in programming but need to solve daily business problems? What about professional programmers who are looking for a fun, creative, fast, and easy way to write complex code and implement business logic? Well, this is where Codejig App Builder comes into the picture. It provides a low-code app development platform to help build your app quicker. It relies on the rapid application development model and its drag-and-drop app builder creates impressive user interfaces.

Mission-critical block programming software

It does not really matter if you are a professional or end-user developer - you will be able to switch between visual and text-based code if the need should arise. In this way, citizen developers can build complex business logic on their own. Professional developers can make use of rich infrastructure and libraries provided by Java and JavaScript programming languages. App Builder has been used for creation of complete enterprise resource planning software which comes with fully open business logic which is easy to customize. Its business logic, including accounting, CRM and many other areas has completely been described in visual blocks! That’s certainly something for grown-up developers to consider. We are sure that it is only a beginning of wider usage of block-based programming for non-educational purposes.

Build app with blocks!