What is Blockly?

Creating a website that responds to user inputs requires an understanding of programming languages. And anyone who develops an app typically needs to work with a higher-level programming language. Although there are good learning resources for Python, JavaScript, and similar languages, it still takes a huge amount of effort to internalise the complex commands and routines. Those who just want to try their hand at programming or only need a short script, will usually find conventional tools too difficult to grasp quickly.

This is where Blockly comes in: Blockly is a project developed by Google which presents long, text-based code strings in visual blocks. These blocks can be assembled using drag and drop. This allows you to create a complex syntax in a matter of minutes. Blockly is a library that provides a visual code editor. The syntax of the programs created in this way remains in the background. Anyone working with Blockly can easily create complex processes without thinking about the exact commands of the individual programming languages.

There are many reasons to use Blockly. For instance, creating a responsive website without in-depth programming knowledge is a piece of cake with this library. But the visual code editor can also be used by professional software developers to quickly build small programs.

What’s more, the playful approach allows you to quickly grasp relationships when programming. It’s easier to understand the statement “repeat 5 times” than “for int i = 0, i < 5, i++;” – even though they both mean the same thing. That’s why Blockly is often used in learning environments. Blockly can be a great way for children to take their first steps in software development if they are interested in learning programming. Achieving impressive results is quick and easy thanks to the visual presentation of code sets.

The visual interface makes the code clear and easy to understand. Blocks are placed together like puzzle pieces and can then be transformed into code. Although Blockly itself is a JavaScript library, the source text can be output directly into different languages. The code is available as standard in JavaScript, Python, PHP, Lua, Dart, and XML. The editor can be conveniently accessed in a browser.

Visual programming is no longer a novelty. Many users already use it to create websites. Like Blockly, the intuitive website kits excel with their easy and intuitive interface. The written code runs completely in the background, allowing beginners and non-techies to achieve success fast.

The Blockly app – the visual code editor – offers eight categories with different functions:

• Logic describes actions.
• Loops are control structures and repeat until a certain action occurs.
• Math handles various types of calculations and can also issue random numbers.
• Text can access inputs and generate individual outputs.
• Lists create lists in combination with text or math elements.
• Colour can be applied to the colour of text or the background.
• Variables can be used in calculations or functions.
• Functions describe the page behaviour when a certain input is detected.

There are different combination options between the blocks. Loops and functions can be combined with logic and variables, while logic and variables can embed math, text, lists, and colour. This range of combinations covers many essential basics of various programming languages.

Using the blocks is really intuitive. Simply open a category and drag the desired code block to the working area using the mouse. The individual blocks can also be adjusted and combined with others. If a combination isn’t possible, the block will not snap into place and will also not be included in the source text. Individual puzzle pieces or groups of associated blocks can easily be deleted from the working area again. In that case, the corresponding lines of code are removed in the source text.

To combine a pop-up with a counter, for example, you can proceed as follows:

The generated code can now be translated into different programming languages. In JavaScript, the source text would look like this:

Of course, this is just a very simple code example. But the output “Hello, World!” is always the first lesson when learning a programming language.

While the application is aimed at students and newcomers, the actual library is directed towards developers. With little effort, developers can create their own blocks with functions to create their own apps using the library.

There are two ways to develop your own blocks within Blockly. First, JavaScript API is available which is primarily used for web applications. Second, a JSON interface is provided that works on Android and iOS. Only the most popular blocks are available in JSON format. Moreover, comprehensive documentation can be viewed on GitHub. And Google offers an extensive guide for developing and using Blockly.

Countless tutorials and documents can now be found on YouTube, Stack Overflow, and GitHub, explaining how to use the library efficiently. Programming various switches and receivers for smart home management is just one of many possibilities. Since the program can be connected with a wide range of languages, there are virtually no limits to your creativity.

Those who want to learn programming languages will love the fact that the Blockly program always writes the correct syntax and never forgets to add a semicolon or a quotation mark. The playful approach makes getting started on projects easy – even for beginners – allowing them to gain hands-on programming experience. You quickly learn the possibilities of the language and can instinctively design prototypes and mock-ups.

Blockly might be a simple tool, but it can streamline the development workflow considerably. It’s easy to integrate the library into existing projects and even easier to realise big projects. However, it’s important to become familiar with the different functions. The source text created by Blockly can be integrated into many projects, thanks to the wide range of languages. Therefore, the open-source solution is not just relevant for beginners.