Building Blockly

Blockly is made up of over a hundred JavaScript files. Loading these over the Internet is a sluggish experience for end users. To make Blockly load faster, it can be compressed down to half a dozen files totaling about 720kb.

Blockly comes with both the source code and compressed files, so there is no need to build Blockly unless you are hacking in the core, blocks, generators, or msg directories.

Compressing Blockly is extremely simple. Just run the following command:

npm run build

This command takes about 20 seconds and uses Google's Closure Compiler to rebuild several key files:

  • The contents of the core/ directory becomes blockly_compressed.js.
  • An alternative file named blockly_uncompressed.js is generated (see below).
  • The contents of the blocks/ directory becomes blocks_compressed.js.
  • The contents of the generators/ directory becomes javascript_compressed.js, python_compressed.js, php_compressed.js, lua_compressed.jsand dart_compressed.js.
  • Any changes to messages.js file are mapped onto the msg/json files, after which the msg/js files are regenerated.

Build Scripts

You may not want to build all of Blockly for your development process. You can use the following commands to build a subset of the files:

  • npm run build builds everything.
  • npm run build:blocks builds blocks_compressed.
  • npm run build:compressed builds blockly_compressed.
  • npm run build:core builds blockly_compressed, blockly_uncompressed, and blocks_compressed.
  • npm run build:generators builds every <language>_compressed.js file.
  • npm run build:langfiles builds every msg/js/<LANG>.js file.
  • npm run build:uncompressed builds blockly_uncompressed.

Compressed Mode

As a result of compression, Blockly can be loaded with a small number of HTTP requests:

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="msg/js/en.js"></script>

Remember that as a developer you probably have a better Internet connection than your users. Compressing the code makes a tremendous difference for users.

Uncompressed Mode

That said, compressed code is simply awful for developers. No JavaScript developer should tolerate a build step between editing code and seeing the result. And no JavaScript developer should have to debug compressed code. When developing Blockly, use uncompressed mode. Let's pull apart the four scripts listed above and find their uncompressed versions:

Core

<script src="blockly_compressed.js"></script>

This one is easy. Just change "compressed" to "uncompressed":

<script src="blockly_uncompressed.js"></script>

The blockly_uncompressed.js file is generated by the build script and loads all the required core/ files.

Blocks

<script src="blocks_compressed.js"></script>

If one is hacking the default blocks, replace the compressed blocks file with the original source files:

<script src="blocks/logic.js"></script>
<script src="blocks/loops.js"></script>
<script src="blocks/math.js"></script>
<script src="blocks/text.js"></script>
<script src="blocks/lists.js"></script>
<script src="blocks/colour.js"></script>
<script src="blocks/variables.js"></script>
<script src="blocks/procedures.js"></script>

Generators

<script src="javascript_compressed.js"></script>

If one is hacking the default blocks, replace the compressed blocks file with the original source files (change "javascript" to "python", "php", "lua", or "dart" as needed):

<script src="generators/javascript.js"></script>
<script src="generators/javascript/logic.js"></script>
<script src="generators/javascript/loops.js"></script>
<script src="generators/javascript/math.js"></script>
<script src="generators/javascript/text.js"></script>
<script src="generators/javascript/lists.js"></script>
<script src="generators/javascript/colour.js"></script>
<script src="generators/javascript/variables.js"></script>
<script src="generators/javascript/procedures.js"></script>

Language

<script src="msg/js/en.js"></script>

Replace the language file (en, ru, vi, etc) with messages.js:

<script src="msg/messages.js"></script>

Playground

When hacking in Blockly's core, the playground is a tremendously useful tool. Just point your browser at tests/playground.html. As a preview, here is the playground on the demo sever. The playground features:

  • All code is uncompressed for rapid development.
  • All the default blocks (except for some deprecated ones).
  • All the language generators (JavaScript, Python, PHP, Lua, and Dart).
  • Import and export programs as XML.
  • Switch between LTR and RTL layout.
  • Switch between toolbox layouts.
  • Stress tests for the renderer.
  • Log all events in the console.

At Google, virtually all of Blockly's development occurs using the playground. Builds are only done before pushing a new version to production.