Blockly

Blockly
Name	Blockly
Developer	Google
Released	2012
Programming language	JavaScript
Platform	Web browsers
License	Apache License 2.0

Blockly

Blockly is a client-side library for creating visual block-based programming editors for web applications. It provides a drag-and-drop interface built in JavaScript that maps interlocking visual blocks to executable code, enabling non-textual programming for learners and developers. The project originated within a major technology company and has been adopted by diverse educational initiatives, research labs, and commercial platforms.

History

The project was developed at Google as part of internal efforts aligned with initiatives like Google Summer of Code and outreach programs similar to CS First. Early releases coincided with rising public interest following events such as the Hour of Code and the expansion of Scratch (programming language). Influences include block paradigms seen in systems from institutions like the MIT Media Lab and commercial products from companies such as Microsoft and Apple Inc.. Community contributions from organizations including the National Science Foundation-funded projects and university research groups accelerated adoption. Over time, major educational vendors and foundations such as the Khan Academy, Code.org, and the Raspberry Pi Foundation incorporated or interfaced with the library in their curricula and maker projects.

Design and Architecture

The architecture is centered on a visual rendering engine, an XML model for workspace serialization, and a generator layer that produces textual code. The core implementation in JavaScript interacts with browser engines like Blink and compatibility targets such as Gecko to support cross-platform deployment. A modular design separates the renderer, toolbox, and event system, enabling integration with frameworks like React (JavaScript library), AngularJS, and Vue.js. The runtime employs a tree-structured DOM approach and leverages standards from bodies such as the World Wide Web Consortium for SVG rendering. Packaging and distribution are managed through ecosystems like npm and build tools influenced by Closure Compiler workflows familiar to teams at Google.

Blocks and Toolbox

The block vocabulary uses visual metaphors similar to predecessors from the MIT Media Lab and block grammars used in projects at institutions like Carnegie Mellon University. Blocks are defined declaratively via JSON or programmatically using JavaScript APIs, and are grouped into categories that appear in a configurable toolbox. The visual system supports value sockets, statement sockets, mutators, and dynamic inputs, reflecting concepts used by researchers at institutions such as Harvard University and laboratories like MIT CSAIL. The toolbox layout can emulate structures seen in educational products developed by companies like LEGO Group and nonprofits such as Code Club. Accessibility concerns have driven support work involving standards bodies like the W3C and community efforts coordinated with organizations such as the Internet Society.

Programming Languages and Code Generation

The generator layer produces source in languages widely used in education and industry, including JavaScript, Python (programming language), and PHP. Backends have been extended to emit code for platforms and ecosystems like Arduino, MicroPython, and Node.js in projects associated with labs at the University of Cambridge and makerspaces linked to the Raspberry Pi Foundation. Toolchains map block semantics to language constructs, drawing on compiler techniques taught in courses at institutions like Stanford University and research from the ACM publication venues. Integrations often require transpilation or runtime libraries similar to those maintained by projects at Mozilla and other open-source foundations.

Integrations and Platforms

Adopters range from nonprofit curricula such as Code.org and Khan Academy to hardware ecosystems led by organizations like the Raspberry Pi Foundation and Arduino LLC. Commercial platforms in educational technology from companies including Tynker and vendors tied to the Chromebook ecosystem integrate the library for authoring and assessment. Cloud and deployment scenarios use services and APIs from providers like Google Cloud Platform and continuous integration systems influenced by practices at GitHub. Research deployments have appeared in collaborations with groups at MIT Media Lab, Carnegie Mellon University, and the University of Washington.

Educational Use and Community

Educators at institutions such as Stanford University, Harvard University, and community programs like Girls Who Code employ block-based editors to introduce algorithmic thinking, mirroring strategies promoted by agencies such as the U.S. Department of Education and nonprofit consortia like the Computer Science Teachers Association. Workshops and teacher-training initiatives organized around conferences like SIGCSE and ISTE feature implementations and lesson plans. A contributor community composed of volunteers, corporate engineers, and academics collaborates through platforms like GitHub and participates in events such as Google Summer of Code and community sprints at meetups organized by Mozilla and local makerspaces.

Reception and Impact

The visual paradigm influenced by earlier work at the MIT Media Lab and contemporary initiatives at Code.org has been credited with lowering barriers to programming for young learners and hobbyists. Educational studies published in venues such as ACM SIGCHI and presented at conferences like CHI evaluate block-based learning outcomes and inform curriculum design adopted by organizations like Khan Academy. Industry observers and open-source advocates at groups like the Linux Foundation note the role of such tools in broadening participation in computing. Adoption by hardware projects and classroom deployments in systems supported by entities like the Raspberry Pi Foundation and Arduino LLC demonstrates practical impact on maker culture and STEM outreach.

Category:Free software Category:Educational software