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. 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). - Accessible Blockly becomes
blockly_accessible_compressed.js
andblockly_accessible_uncompressed.js
. - The contents of the
blocks/
directory becomesblocks_compressed.js
. - The contents of the
generators/
directory becomesjavascript_compressed.js
,python_compressed.js
,php_compressed.js
,lua_compressed
anddart_compressed.js
. - Any changes to
messages.js
file are mapped onto themsg/json
files, after which themsg/js
files are regenerated.
Build Script Arguments
You may not want to build all of Blockly for your development process. You may use 0 or more of the optional arguments to change which files are built:
build.py
with no arguments builds everything.build.py accessible
buildsblockly_accessible_compressed
,blockly_accessible_uncompressed
, andblocks_compressed
.build.py core
buildsblockly_compressed
,blockly_uncompressed
, andblocks_compressed
.build.py generators
builds every<language>_compressed.js
file.build.py langfiles
builds everymsg/js/<LANG>.js
file.
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", "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.