SandCastleIcon.png This article has links to websites or programs outside of Scratch and Wikipedia. Remember to stay safe while using the internet, as we cannot guarantee the safety of other websites.

Blockly is one of the libraries used to create the blocks of Scratch 3.0. It was developed by Google and MIT to replace OpenBlocks, the library made by MIT that was used in App Inventor.

A screenshot depicting the Blockly workspace with blocks placed around it.

About

Blockly is a JavaScript library that allows developers to add a visual code editor to websites and mobile apps. It is also what Scratch Blocks is based on.

“ 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. ”

– Blockly Website[1]

Blockly can be installed from NPM using npm install blockly. You can also install the beta version of Blockly by running the npm install blockly@beta command.[2] Blockly has the ability to generate JavaScript, Python, PHP, Lua, and Dart code.[3]

History

Blockly development began in Summer 2011. The first public release was in May 2012 at Maker Faire. Blockly was originally designed as a replacement for OpenBlocks in App Inventor.[4] Blockly has released many versions since its inital release, with the latest release being Blockly v9.3.1, released on March 30, 2023.[5] In addition, version 9.3.0 was released on March 29, 2023, version 9.2.1 was released on January 20, 2023, and version 9.2.0 was released on December 15, 2022.[5] On June 13, 2022, the Q1 2022 Patch 4 was released to fix a bug in the localization system.[5]

Features

  • Web-based using Scalable Vector Graphics (SVG)
  • Does not rely on Flash[2]
  • Completely client-side JavaScript[2]
  • Compatible with all major browsers: Chrome, Firefox, Safari, Opera, and Edge.[2]
  • Highly customizable and extensible[6][7][2]
  • Can export blocks to many programming languages[2]
  • Mobile support on Android and iOS
  • Support for variables, functions, and arrays
  • Minimal type checking supported, designed for weakly typed languages
  • Easy to extend with custom blocks. Use the Block Factory to make new blocks[8]
  • Clean code generation
  • Step-by-step code execution for tracing and debugging code
  • Localized into 50+ languages[4]
  • Support for left-to-right and right-to-left languages
  • Change color of blocks and block categories to any hue or hexadecimal color code
  • Themes allow changing the color and style of blocks and categories[6]
  • Blockly Plugins allow extending Blockly's features [2]

Code Exporting

Blockly can export text-based code generated from the blocks in 5 programming languages by default: JavaScript, Python, Lua, Dart, and PHP.[2] You can also create a custom language generator to handle other programming languages.[9]

Blockly Themes

Themes are a feature of Blockly that allows developers to customize the colors and styles of categories of the Blockly blocks, workspace, categories, scrollbars, and other UI elements in Blockly.[6] Blocky Themes can be used to change the primary, secondary, and tertiary colors as a block, as well as add a hat to the top of event blocks.[10]

Custom Renderers

Blockly supports custom renderers to customize the shape of blocks and advanced appearance properties of the workspace.[7] There are many built-in renderers, such as zelos, which is the built-in renderer that is the most similar to Scratch Blocks.[7] Other built-in renderers are geras (default renderer), thrasos, and minimalist.

Blockly Plugins

Blockly Plugins are plguins which extend Blockly's functionality.[2] Blockly Plugins can be found on NPM under the @blockly scope, or under the Blockly Plugins directory.[11] Some of the plugins in the directory are color pickers with HSV sliders, calendar date pickers, dropdown menus, dark mode themes, and tools for migrating apps to newer versions of Blockly without breaking.[11]

Uses

As Blockly is open-source, many other programs such as App Inventor 2 and Code.org uses it.[2] Scratch and ScratchJr use a fork of Blockly called Scratch Blocks.[12] The Microsoft MakeCode editor, a programming editor for microcomputers such as the Micro:bit, also uses Blockly to power its blocks.[13]

External Links

References

  1. ↑ https://developers.google.com/blockly/guides/overview
  2. ↑ a b c d e f g h i j https://github.com/google/blockly
  3. ↑ https://developers.google.com/blockly/
  4. ↑ a b Blockly
  5. ↑ a b c https://github.com/google/blockly/releases
  6. ↑ a b c https://developers.google.com/blockly/guides/configure/web/appearance/themes
  7. ↑ a b c https://developers.google.com/blockly/guides/configure/web/appearance/renderers
  8. ↑ https://blockly-demo.appspot.com/static/demos/blockfactory/index.html
  9. ↑ https://developers.google.com/blockly/guides/create-custom-blocks/generating-code#adding_a_new_language_generator
  10. ↑ https://developers.google.com/blockly/guides/create-custom-blocks/block-paradigms#event_driven_program
  11. ↑ a b https://github.com/google/blockly-samples/tree/master/plugins
  12. ↑ https://github.com/LLK/scratch-blocks
  13. ↑ https://github.com/Microsoft/pxt
Retrieved from "https://en.scratch-wiki.info/w/index.php?title=Blockly&oldid=332410"
Cookies help us deliver our services. By using our services, you agree to our use of cookies.
More information (in German)