Creating a website that responds to user inputs requires an un­der­stand­ing of pro­gram­ming languages. And anyone who develops an app typically needs to work with a higher-level pro­gram­ming language. Although there are good learning resources for Python, JavaS­cript, and similar languages, it still takes a huge amount of effort to in­ter­n­al­ise the complex commands and routines. Those who just want to try their hand at pro­gram­ming or only need a short script, will usually find con­ven­tion­al 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 back­ground. Anyone working with Blockly can easily create complex processes without thinking about the exact commands of the in­di­vidu­al pro­gram­ming languages.

Why use Blockly?

There are many reasons to use Blockly. For instance, creating a re­spons­ive website without in-depth pro­gram­ming knowledge is a piece of cake with this library. But the visual code editor can also be used by pro­fes­sion­al software de­velopers to quickly build small programs.

What’s more, the playful approach allows you to quickly grasp re­la­tion­ships when pro­gram­ming. It’s easier to un­der­stand 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 en­vir­on­ments. Blockly can be a great way for children to take their first steps in software de­vel­op­ment if they are in­ter­ested in learning pro­gram­ming. Achieving im­press­ive results is quick and easy thanks to the visual present­a­tion of code sets.

The visual interface makes the code clear and easy to un­der­stand. Blocks are placed together like puzzle pieces and can then be trans­formed into code. Although Blockly itself is a JavaS­cript library, the source text can be output directly into different languages. The code is available as standard in JavaS­cript, Python, PHP, Lua, Dart, and XML. The editor can be con­veni­ently accessed in a browser.

Visual pro­gram­ming 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 com­pletely in the back­ground, allowing beginners and non-techies to achieve success fast.

Note

Blockly is very similar to Scratch. While Blockly is aimed more at pro­fes­sion­al de­velopers in a business context, Scratch is primarily intended as a teaching resource.

What functions does Blockly offer?

The Blockly app – the visual code editor – offers eight cat­egor­ies with different functions:

  • Logic describes actions.
  • Loops are control struc­tures and repeat until a certain action occurs.
  • Math handles various types of cal­cu­la­tions and can also issue random numbers.
  • Text can access inputs and generate in­di­vidu­al outputs.
  • Lists create lists in com­bin­a­tion with text or math elements.
  • Colour can be applied to the colour of text or the back­ground.
  • Variables can be used in cal­cu­la­tions or functions.
  • Functions describe the page behaviour when a certain input is detected.

There are different com­bin­a­tion 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 com­bin­a­tions covers many essential basics of various pro­gram­ming languages.

Blockly example

Using the blocks is really intuitive. Simply open a category and drag the desired code block to the working area using the mouse. The in­di­vidu­al blocks can also be adjusted and combined with others. If a com­bin­a­tion isn’t possible, the block will not snap into place and will also not be included in the source text. In­di­vidu­al puzzle pieces or groups of as­so­ci­ated blocks can easily be deleted from the working area again. In that case, the cor­res­pond­ing 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 trans­lated into different pro­gram­ming languages. In JavaS­cript, the source text would look like this: 

var count;
count = 1;
while (count <= 3) {
	window.alert(‘Hello, World!');
	count = count + 1;
}

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

Where is Blockly used?

While the ap­plic­a­tion is aimed at students and newcomers, the actual library is directed towards de­velopers. With little effort, de­velopers 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, JavaS­cript API is available which is primarily used for web ap­plic­a­tions. Second, a JSON interface is provided that works on Android and iOS. Only the most popular blocks are available in JSON format. Moreover, com­pre­hens­ive doc­u­ment­a­tion can be viewed on GitHub. And Google offers an extensive guide for de­vel­op­ing and using Blockly.

Countless tutorials and documents can now be found on YouTube, Stack Overflow, and GitHub, ex­plain­ing how to use the library ef­fi­ciently. Pro­gram­ming various switches and receivers for smart home man­age­ment is just one of many pos­sib­il­it­ies. Since the program can be connected with a wide range of languages, there are virtually no limits to your cre­ativ­ity.

Con­clu­sion: a good al­tern­at­ive to complex pro­gram­ming languages

Those who want to learn pro­gram­ming 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 pro­gram­ming ex­per­i­ence. You quickly learn the pos­sib­il­it­ies of the language and can in­stinct­ively design pro­to­types and mock-ups.

Blockly might be a simple tool, but it can stream­line the de­vel­op­ment workflow con­sid­er­ably. 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 in­teg­rated into many projects, thanks to the wide range of languages. Therefore, the open-source solution is not just relevant for beginners.

Go to Main Menu