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 150kb.
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. Assuming you have Python 2.x
installed, just run build.py
in Blockly's root directory:
python build.py
This command takes about 20 seconds and uses Google's online Closure Compiler to rebuild several key files:
- The contents of the
core/
directory and the relevant bits ofclosure-library/
becomeblockly_compressed.js
. - An alternative file named
blockly_uncompressed.js
is generated (see below). - The contents of the
blocks/
directory becomesblocks_compressed.js
. - The contents of the
generators/
directory becomesjavascript_compressed.js
,python_compressed.js
, anddart_compressed.js
. - Any changes to
messages.js
file are mapped onto themsg/json
files, after which themsg/js
files are regenerated.
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/
and closure-library/
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", 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 and Dart).
- Import and export programs as XML.
- Switch between LTR and RTL layout.
- Airstrike for stress-testing the renderer.
At Google, virtually all of Blockly's development occurs using the playground. Builds are only done before pushing a new version to production.