Blockly makes it easier to learn to code

No readers like this yet.
Freer than free, opener than open: The fight for the learning management systems

Opensource.com

Blockly is the engine running underneath many of the online tutorials used today to introduce people of all ages to programming. In this article we interviewed Neil Fraser, from the Blockly developers team, and learned about the team’s perspective and vision.

Interview Q&A

Where have we seen Blockly?

In recent months we have seen a great number of activities directed at engaging people of all ages into computer programming. For example, The Hour of Code has organized more than 70 thousand events worldwide, and has been tried by over 95 million people, from elementary students to heads of state.

Code.org provides free online tutorials that anyone can try in a few minutes. Those who have tried any of them, for example Flappy Bird is my favorite, would have seen the canvas with little blocks of code that we can snap together just like LEGO pieces.

The platform that creates these visual blocks of code is Blockly, an open source library, mostly developed by Google engineers, with contributions from many others in the community, and hosted in this Github repository.

[caption: screenshot from Blockly home page]

Neil Fraser picture

Neil, tell us a bit about yourself, how Blockly got started, and how you got involved in the project.

App Inventor was a Google project that allowed novice programmers to create apps for Android phones. It used graphical programming that was easy to learn and fun to use. Unfortunately the UI was written in Java, which made it a nightmare for non-technical users to install and run. I had a reputation for building tricky things in JavaScript so the App Inventor team asked me to help. The goal was to simply port their UI to JavaScript so that it could run in a browser, thus eliminating the need for users to install anything.

A few months into the project, App Inventor was cancelled and the project's code transferred to MIT. I believed in my new UI's potential and refused to let it drop. So I took the only available option and expended all my accrued vacation. Every day I'd come into the office and work on it. After two months I was able to give a demo. My managers were impressed, launched the Blockly project, and retroactively gave me back my vacation. Yet another example of why I love Google.

The result of this history is that Blockly is not just a UI for one project; it is a library that may be dropped into any project. There are now hundreds of educational, corporate, and hobby projects that use Blockly.

It is very impressive to see the enormous impact that Blockly is having in computer programming informal education. Blockly is truly a Tutorial builder toolkit, and has made a lot easier for sites to create their own programming tutorials. Can you tell us more about the interplay between the Blockly community, and the organizations that use it to build their tutorials?

Blockly has a very active community on our developer newsgroup. There is a continuous stream of pull requests being offered and lots of people helping each other. Occasionally we catch glimpses of the unexpected directions that developers are taking Blockly. When we get bug reports regarding performance issues in programs with over 10,000 blocks, we can only scratch our heads and wonder what they are up to.

For the most part though, we rarely get to see what other developers are actually building. I normally find out about the release of new Blockly applications or that the US president used it when I read about it in the press.

The tutorials in Code.org are aimed at beginners, and therefore they present a simplified interface. Blockly can do a lot more, including type checking, code generation (for Javascript, Python, Dart and other languages), code editing and debugging, as illustrated in your demos. What are your thoughts on using Blockly for a full computer programming curriculum? For example at high school level, or a college-level introduction to programming?

New programmers are fighting two battles at once: the syntax battle and the logic battle. Blockly eliminates the syntax battle, it is impossible to make a syntax error in Blockly. Students can focus entirely on the logic behind conditionals, loops, variables and other core concepts without worrying about unbalanced parenthesis or missing semicolons.

However, it is our belief that once the basics of logic are understood, students should migrate to a conventional text-based language. An example is Blockly Games, which at the end of each level shows the generated code that the student created. Blockly Games also gently transitions students away from blocks and towards text-based programming towards the end of the course. We don't want students to use block-based programming longer than necessary. Nobody ever got a job because they have three years of experience in Blockly.

You are targeting a wide international audience. Can you tell us more about the efforts for translating Blockly to more than 40 languages, and how people in the community could help with these efforts?

The 94% of the world that does not speak English natively struggles to memorize that the letters 'R', 'E', 'P', 'E', 'A', 'T' in that order will cause something to happen more than once. Imagine learning to code and having to memorize 'كرر' or 'عودة' at the same time. Granted, there are only a few dozen words to memorize, but being forced to do so on top of the battle to understand the logic is an extra barrier.

Translating Blockly into native languages allows one to postpone the language barrier until after the programming concepts have been mastered. We are enormously appreciative of the help people have provided by submitting translations. It is amazing to watch grade five students in Vietnam jump into Blockly and start figuring it out without needing the teacher's guidance.

Many design decisions in Blockly seem to be driven by the desire to reach out to the largest possible audience. For example, running fully as a Javascript client (no need for server), being a small compact library, supporting tablets and touch screens, keeping accessibility in mind. At the same time, some hard choices have to be made, for example dropping old browsers version, to be able to focus your efforts. What’s the process for making these decisions?

Most new students have no particular interest in programming. We have about 20 seconds to engage them before they get bored and wander off to play video games. Every barrier to entry (installing Java, or a slow download, or learning English, or a messy UI) represents a significant loss of audience. We rely on metrics, user studies, and feedback from the developer community to identify and remove these barriers.

Blockly has been described as a gateway drug. It is easy to try out, it gets one hooked, and it pushes its users onto harder things. Possibly not the most flattering analogy, but somewhat accurate.

What is your vision for the future of Blockly, and how can the open source community help?

Google will continue to enhance the Blockly environment, adding new features such as realtime collaboration for multi-user projects, or Google Maps-style zooming for large projects, or keyboard controls for blind users. But Google's contributions are now secondary in importance. The future of Blockly has been taken over by outside developers. They are the ones who fork it, extend it, and use it in education, home automation, robotics, and data visualization. They are the ones who translate it into more than 40 languages (including Klingon). They are the ones who put Blockly-based applications into the hands of students around the world. I'm incredibly proud of the work that the developer community is engaged in.

Beginners to
Open Source

A collection of articles about how to get started in open source.

User profile image.
Luis Ibáñez works as Senior Software Engineer at Google Inc in Chicago.

4 Comments

I used Google App Inventor for a short time when I was first learning to code and I loved the simplicity of it. I was dissappointed when I found out they were dropping it, but I'm really excited to hear someone is continuing this work. I learned to fundamentals of OOP while I was using Max/MSP (another visual programming language) and App Inventor was a great way for me to bridge that knowledge into text-based languages.

Great article Luis! I loved reading this and have seen many students using sites that now I know are running Blockly.

This looks exactly like MITs scratch. It's rather disappointing that Google has seen fit to replicate Scatch without attribution.

Thanks for pointing out the similarity with Scratch.

This is indeed no accident.

The Visual Programming Paradigm [https://en.wikipedia.org/wiki/Visual_programming_language] has been around for several decades. We had visual programming in computer graphics systems since the mid 1980's. For example PICT and PROGRAPH in 1985, and BLOX in 1986. We also saw it in data processing and electronics with LabVIEW since the early 1980's.

In the early 1990's, we had IDL running in VAX and Sun Sparc workstations, and Open Inventor running in Silicon Graphics machines; as well as OpenDX by IBM for data analysis.

In the mid 1990's we had SIMULINK (Matlab) for data processing. In education, Alice and Etoys were providing visual block programming in the late 1990's.

By the early 2000's we also had visual block programming on the NXT LEGO Mindstorms for robotics, and in Blender for computer graphics.

Sprites characters for animation were already in use to the Vic 20 and Commodore 64 in the early 1980's. Controlling the movement of characters date back to Turtle Graphics and the Logo programming language in the late 1960's.

...and so it goes...

The similarity of appearance between multiple visual programming interfaces today is the natural outcome of what we have collectively learned that works well, from over 40 years of exploration in that space.

A full chain of attribution probably should go back to the "Mother of All Demos" in 1968 by Douglas Engelbart. [https://en.wikipedia.org/wiki/The_Mother_of_All_Demos]

This exercise reinforces a tenet of open source thinking:

"We build upon what has come before us."

Which is masterfully presented in the video series:

"Everything is a Remix"
http://everythingisaremix.info/watch-the-series/

This is probably the reason why Benjamin Franklin and Thomas Jefferson were keen on letting ideas flow unrestricted by ownership, so that they could evolve, mature and bear fruits to benefit everyone.

In reply to by Not Google's Product (not verified)

Creative Commons LicenseThis work is licensed under a Creative Commons Attribution-Share Alike 4.0 International License.