Blockly is what?

Blockly’s creator, Google, provides detailed explanations, documentation, and use case presentations on its website

developers.google.com/blockly

The translation of wikipedia’s Chinese entry is so poor that I have modified the Chinese entry of Wikipedia Blockly. Here, in order to maintain the original meaning, I will summarize it in English like this:

A JavaScript library for building visual programming editors.
Copy the code

A more complete definition:

Blockly is a library that adds a visual code editor to web and mobile apps.
The Blockly editor uses interlocking, graphical blocks to represent code concepts like variables, logical expressions, loops, and more. 
It allows users to apply programming principles without having to worry about syntax or the intimidation of a blinking cursor on the command line.
Copy the code

In short, Blockly is a javascript-based visual program development editor that at first glance looks a lot like Scratch, and in fact, Scratch3.0 is built on Blockly, That said, Blockly is included in Scratch3.0, but both feature visual module programming but have very different design philosophies

As for the similarities and differences between Blockly and Scratch, I recommend that you check out this blog: blog.just4fun.site/post/ kids programming /s…

What can blockly be used for children’s programming?

In recent years, the concept of children’s programming has been hotly debated. It seems that the computer from childhood has been achieved. In China’s first and second tier cities and even my hometown, a county city in Shanxi Province, we can see various brands of children’s programming training institutions. They work with local education departments to teach informatics in schools. Or as a franchisee of the head of entrepreneurial institutions, looking for the right leek customers in the anxious parents. To be honest, considering the practical programming ability of many students in the university, I don’t think that the children’s programming training institutions in the current market can play the role that parents imagine in terms of the intelligence development and programming ability of most ordinary teenagers at this stage. Software development has moved on from the days when it required programmers to dance on registers, but for many disinterested teenagers and college students, the drive is not that strong. Can you imagine how many undergraduate computer science majors I’ve seen who haven’t written a single line of code except in class and for necessary assignments? Learning real programming will undoubtedly have a profound impact on teenagers, but in Today’s China, it seems to be a bubble being marketed by capital. It is highly recommended that parents with high expectations of programming for children write a few hundred lines of code themselves before deciding whether or not to enroll their children

However, THERE is one point that I fully agree with: it is not harmful for teenagers to be properly exposed to the basic concepts and basic practice of programming, which helps them to establish rigorous logical thinking ability and lay a good foundation for their future development. However, there is an unavoidable problem: How to teach programming when many teenagers do not master English and basic computer skills? They may not even be familiar with the keyboard, how can they be expected to configure the IDE, type and debug high-level language code written in English? There’s a good answer to this unavoidable conundrum: Use Blockly for learning

As visual programming editor, we with blockly integrated environment, from the left side of the limited options for building block drag and drop, in the order we had planned to permutations and combinations of these building block, click the run button to see the results, the entire don’t need to use other computer peripherals, mouse and monitor It’s all too teen-friendly, so Blockly is a good answer

The Developer’s Mission

First of all, we should clarify a point of view :Blockly is for developers. Blockly apps are for students. The mission of developers is not to drag and drop blocks to design programs, but to develop the editor reasonably and adapt it to different needs

At present, there are numerous Chinese tutorials about various languages, frameworks and libraries on the Internet, and some of them are excellent. However, there are few tutorials about Blockly, and only some blogs introduce some experience scattered. I encountered great difficulties when I took over the development of Blockly at the beginning. But this was actually a good thing, because it gave me the option of just reading the official documentation and running the official examples from the start

Clone official example

git clone https://github.com/google/blockly.git
Copy the code

Open the folder, found in VScode blockly/demos/toolbox/index. The HTML in the browser open this index. The HTML file, here we can easily see the blockly editor structure, You can also modify the index.html file here

In the source code reading we are easy to know: add and remove blocks in the graphical interface, in the index.html file by adding and removing

tags, as for more content, in reading the official documentation and practice to get real knowledge!

Two source code issues I encountered during development:

The problem with the rollback operation

In a project I took over, the editor area with blockly introduced would generate an undeletable [start] block as the only entry for the program to run after initialization. The [Start] block would be deleted by right-clicking and selecting “Withdraw” without any operation, which was not allowed

More uncomfortable is! Blockly source file is not official file, it is reconstructed main_compressed. Js so how do I solve this bug?

Very simple, here we need to calm down and look carefully, in VScode search undo, we found the module responsible for translation, follow the lead, found in main_compressed

undoOption.text = Blockly.Msg['UNDO'];
Copy the code

The name of the function it is in is:

Blockly.WorkspaceSvg.prototype.showContextMenu_

This makes it clear that this function is responsible for the logic of the right click option, so for undo and redo, I found code like this:

  var undoOption = {};
  undoOption.text = Blockly.Msg['UNDO'];
  undoOption.enabled = this.undoStack_.length > 0;
  undoOption.callback = this.undo.bind(this.false);
  menuOptions.push(undoOption);
  var redoOption = {};
  redoOption.text = Blockly.Msg['REDO'];
  redoOption.enabled = this.redoStack_.length > 0;
  redoOption.callback = this.undo.bind(this.true);
  menuOptions.push(redoOption);

Copy the code

As you can see, undoStack_ is the stack where all the operations in the workspace are stored, and the undoop. enabled property is related to its length, so the initial stack length is printed

console.log(this.undoStach_.length);
Copy the code

Run the program, console output 2

Sure enough! The next step is to simply change the condition of whether this option is available to greater than 2

undoOption.enabled = this.undoStack_.length > 2;
Copy the code

Run the program again, problem solved

Garbage cans and banned blocks

This is an interesting bug: when you disable a block in the editing area and delete it, you find that clicking on the block in the deleted list of the trash can does not restore it, but dragging does

Blockly-demo.appspot.com/static/demo…

The processing in Google Blockly source code is: After the blocks are in the trash, the node.removeAttribute() function will remove the current location attribute and disable attribute, so clicking the blocks in the trash will not appear in the original location, but in the workspace trash. In addition, the disable attribute is changed to Enable when the disabled blocks enter the trash bin. Examples given in blockly’s official website are all the same: the display of the disabled blocks in the trash can becomes available after deletion

After the blockly source code I modified was modified, the method of removing the disabled attribute was deleted, which led to the current bug. Here, I think it is better to follow the official logic of Google if there is no special case