Blockly is a client-side

library A library is a collection of Book, books, and possibly other Document, materials and Media (communication), media, that is accessible for use by its members and members of allied institutions. Libraries provide physical (hard copies) or electron ...

for the programming language

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

for creating block-based

visual programming language In computing, a visual programming language (visual programming system, VPL, or, VPS), also known as diagrammatic programming, graphical programming or block coding, is a programming language that lets users create computer program, programs by ...

s (VPLs) and editors. A project of

Google Google LLC (, ) is an American multinational corporation and technology company focusing on online advertising, search engine technology, cloud computing, computer software, quantum computing, e-commerce, consumer electronics, and artificial ...

, it is

free and open-source software Free and open-source software (FOSS) is software available under a license that grants users the right to use, modify, and distribute the software modified or not to everyone free of charge. FOSS is an inclusive umbrella term encompassing free ...

released under the Apache License 2.0. It typically runs in a

web browser A web browser, often shortened to browser, is an application for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's scr ...

, and visually resembles the language Scratch. Blockly uses visual blocks that link together to make writing code easier, and can generate code in

, Lua, Dart, Python, or

PHP PHP is a general-purpose scripting language geared towards web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1993 and released in 1995. The PHP reference implementation is now produced by the PHP Group. ...

. It can also be customized to generate code in any textual

programming language A programming language is a system of notation for writing computer programs. Programming languages are described in terms of their Syntax (programming languages), syntax (form) and semantics (computer science), semantics (meaning), usually def ...

History

Blockly development began in summer 2011. The first public release was in May 2012 at

Maker Faire Maker Faire is a convention of do it yourself (DIY) enthusiasts established by '' Make'' magazine in 2006. Participants come from a wide variety of interests, such as robotics, 3D printing, computers, arts and crafts, and hacker culture. Hist ...

. Blockly was originally designed as a replacement for ''OpenBlocks'' in App Inventor. Neil Fraser began the project with Quynh Neutron, Ellen Spertus, and Mark Friedman as contributors.

User interface

The default

graphical user interface A graphical user interface, or GUI, is a form of user interface that allows user (computing), users to human–computer interaction, interact with electronic devices through Graphics, graphical icon (computing), icons and visual indicators such ...

(GUI) of the Blockly editor consists of a toolbox, which holds available blocks, and where a user can select blocks, and a workspace, where a user can

drag and drop In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user (computing), user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object. In general, i ...

and rearrange blocks. The workspace also includes, by default, zoom icons, and a trashcan to delete blocks. The editor can be modified easily to customize and limit the available editing features and blocks.

Customization

Blockly includes a set of visual blocks for common operations, and can be customized by adding more blocks. New blocks require a block definition and a generator. The definition describes the block's appearance (user interface) and the generator describes the block's translation to executable code. Definitions and generators can be written in JavaScript, or using a visual set of blocks, the ''Block Factory'', which allows new blocks to be described using extant visual blocks; the intent is to make creating new blocks easier.

Applications

Blockly is used in several notable projects, including: * MIT's Scratch (since version 3.0), visual programming environment for education * MIT's App Inventor, to create applications for Android. * MIT'
CoCo
visual collaborative programming website for education. * Code.org, to teach introductory programing to millions of students in their Hour of Code program * Microsoft's MakeCode, "a free online learn-to-code platform where anyone can build games, code devices, and mod Minecraft" * RoboBlockly, a web-based robot simulation environment for learning coding and math *

PICAXE PICAXE is a microcontroller system based on a range of Microchip Technology, Microchip PIC microcontroller, PIC microcontrollers. PICAXE devices are Microchip PIC devices with pre-programmed firmware that enables bootloading of code directly from a ...

, to control their educational microchips * SAM Labs, in

STEAM Steam is water vapor, often mixed with air or an aerosol of liquid water droplets. This may occur due to evaporation or due to boiling, where heat is applied until water reaches the enthalpy of vaporization. Saturated or superheated steam is inv ...

learn-to-code "education solutions"

Features

* Web-based using

Scalable Vector Graphics Scalable Vector Graphics (SVG) is an XML-based vector graphics format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium sin ...

(SVG) * Completely client-side JavaScript * Support of major web browsers including: Chrome,

Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements curr ...

Safari A safari (; originally ) is an overland journey to observe wildlife, wild animals, especially in East Africa. The so-called big five game, "Big Five" game animals of Africa – lion, African leopard, leopard, rhinoceros, African elephant, elep ...

Opera Opera is a form of History of theatre#European theatre, Western theatre in which music is a fundamental component and dramatic roles are taken by Singing, singers. Such a "work" (the literal translation of the Italian word "opera") is typically ...

Edge Edge or EDGE may refer to: Technology Computing * Edge computing, a network load-balancing system * Edge device, an entry point to a computer network * Adobe Edge, a graphical development application * Microsoft Edge, a web browser developed by ...

* Support for many programmatic constructs including variables, functions,

arrays An array is a systematic arrangement of similar objects, usually in rows and columns. Things called an array include: {{TOC right Music * In twelve-tone and serial composition, the presentation of simultaneous twelve-tone sets such that the ...

* Minimal type checking supported, designed for dynamically typed languages * Easy to extend with custom blocks * Clean code generation * Step-by-step code execution for tracing and debugging code * Localised into 100+ languages * Support for

left-to-right A writing system comprises a set of symbols, called a ''script'', as well as the rules by which the script represents a particular language. The earliest writing appeared during the late 4th millennium BC. Throughout history, each independen ...

and

right-to-left A writing system comprises a set of symbols, called a ''script'', as well as the rules by which the script represents a particular language. The earliest writing appeared during the late 4th millennium BC. Throughout history, each independen ...

languages

References

External links

* {{Google FOSS Visual programming languages Google software Free software programmed in JavaScript JavaScript libraries