Introducing Blockly
Last updated
Was this helpful?
Last updated
Was this helpful?
One of the goals of the Allcancode platform is to enable users to build applications using popular frameworks such as Next.js or libraries such as React without having to learn how to use them. We need an abstraction of their concepts and a programming language agnostic of how those concepts are expressed in the respective framework/technology. Our decision was to use a block-based language that allows users to focus on algorithms instead of syntactic sugar and intricacies. In particular, we chose .
Blockly offers fundamental tools such as variables, functions, loops, conditions, and math expressions, data structures such as text (strings of characters in other languages), and lists (arrays or tables in other languages). The following screenshot presents an example of filling a list with five random integers between 0 and 100.
There is a great free online course by Codecademy that will teach you the basics of Blockly:
Blockly imposes no limitations on expressing algorithms however it is too essential to help with frontend logic, complex data structures, etc. To overcome that, the Allcancode platform extends the language by adding different types of blocks, such as those for handling nested objects with data exchanged with backends (APIs). The following screenshot builds a complex data structure and then prints one of its fields (prints end up in the debug panel of the platform and the debug console of the browser (for web apps) or device (for mobile apps).
You can also define your blocks by creating a library of standard functions that can be used within your components' logic or other libraries. A good practice is to separate all calls to the backend into such a library so that you have one place to make changes if something changes in the backend's API.
