Hi, my name is Sam El-Husseini and I'm a software engineer here at Google. I work
on the kids coding team and today I'll be giving you an overview of Blockly's new developer tools.
The Blockly dev tools package is an npm package that contains a set of developer tools that are
useful when developing and debugging Blockly. These devtools are used by the Blockly team in the
development of both Blockly core and Blockly's new first party plugins. Be sure to check out one of
my other talks on Blockly plugins for more details on that. Today the devtools package consists of a
playground, a number of toolboxes, helper methods for testing fields and stress tests, as well as
test helper methods. The playground is an essential part of Blockly's development and
testing. The new playground includes a graphical interface for changing Blockly options on the fly;
it supports auto import, export, and generation of code using built-in generators; the playground
includes a set of actions that can be taken on the workspace such as formatting and clearing blocks;
and it also includes a number of stress tests, a debug renderer, and a console logger.
Here we see the playground. We can use the options on the side to change the workspace to RTL;
switch the renderer to the zelos renderer; change the theme;
select a different toolbox;
and the position of the toolbox;
we can enable and disable the trashcan, the scroll bars, and the zoom controls;
we can change the starting zoom scale and make
adjustments to the grid such as its spacing, length, and color.
You can always click the reset button to reset all the options to the default options. Playground
also features automatic generation on the fly. As we move blocks around the XML is generated.
We can click on any of the other generator tabs to instead generate code
from the blocks on the workspace.
The auto checkbox is used to enable and disable this feature.
The playground state is saved between page reloads and when the auto checkbox is checked the XML
is used to import blocks into the workspace. The playground also features a set of actions
that can be taken on the workspace such as showing and hiding the workspace; formatting
and clearing blocks; undoing and redoing; and a zoom actions such as zoom center. It also has a
number of stress tests such as "populate random" which randomly adds blocks to the workspace,
and "spaghetti" which adds a nested set of if-statements to the workspace.
Let's take a look at how to create playground.
We can do so by importing the createPlayground method from @blockly/dev-tools.
We then call the createPlayground method with a container div that we want to use to create the
playground, and a createWorkspace method. The createWorkspace method is called every time
the workspace is changed through the playground options. This method is called with a DOM element
for Blockly to be injected into, and the set of options to pass - to pass the Blockly inject.
If you have custom workspace initialization logic, this is an opportunity to add that, such
as configuring the workspace context menu. The method expects a returned workspace. Default
options can be passed to the playground and are set every time the reset button is clicked.
The playground also saves the current state of the XML as well as selection options between reloads.
The dev-tools includes a number of toolboxes. Toolbox categories is Blockly's default built-in
category toolbox. toolboxSimple represents a simple no-flyout toolbox. toolboxTestBlocks
represents a number of Blockly's test blocks. These are actually re-exported by the dev-tools
package but actually live in @blockly/block-test. The dev tools
also includes a number of helper methods. generateFieldTestBlocks is used to automatically define
a number of field test blocks and generates a toolbox to access them - access these blocks.
Each property in the args object correlates to a property in the json definition of the field.
In this case its value, but fields may use various properties in the json definition.
The "populate random" function adds random blocks to a workspace. Blocks are selected
from the full set of defined blocks. Pass in a workspace and how many blocks should be created.
The spaghetti function is a renderer stress test that populates the workspace with nested
if-statements. Pass in a workspace and how deep the nesting should be. The dev-tools also includes
a number of test helpers this will be covered in further detail in Monica's Block Test Helpers talk.
Thank you for your attention and I hope you enjoy Blockly's virtual summit.