Existen varios paradigmas para elegir cuando se diseña una aplicación que usa Blockly. Estas elecciones deben considerarse desde el principio, ya que afectan los bloques que necesitará el usuario.
Configuración
Muchas aplicaciones de Blockly se usan para describir configuraciones, en lugar de programas ejecutables. Por lo general, las aplicaciones de configuración comienzan inicializando un bloque de nivel raíz en el espacio de trabajo. Un buen ejemplo es la pestaña Block Factory de las herramientas para desarrolladores de Blockly:
Blockly.Blocks['factory_base'] = {
init: function() {
this.setDeletable(false);
this.setMovable(false);
this.setEditable(false);
// etc...
}
}
Blockly.serialization.blocks.append({'type': 'factory_base'}, workspace);
Esto crea un bloque que no se puede borrar ni mover, y que contiene toda la configuración del usuario. El espacio de trabajo se puede serializar en cualquier momento para determinar la configuración actual.
Es posible que estas aplicaciones deseen inhabilitar automáticamente cualquier bloque que no esté conectado al bloque raíz. Esto se puede lograr con una sola línea:
workspace.addChangeListener(Blockly.Events.disableOrphans);
Programa de serie
La mayoría de las aplicaciones de Blockly están diseñadas para crear programas secuenciales. Los usuarios apilan bloques que se ejecutan en orden.
Cada bloque (no inhabilitado) del espacio de trabajo formará parte del programa. Si hay varias pilas de bloques, primero se ejecutan las más altas. (Si dos pilas tienen aproximadamente la misma altura, se les da prioridad a las pilas de la izquierda [derecha en el modo RTL]).
El espacio de trabajo se puede exportar a código ejecutable en cualquier momento. Este código se puede ejecutar del lado del cliente en JavaScript (con eval o el intérprete de JS) o del lado del servidor en cualquier lenguaje.
import {javascriptGenerator} from 'blockly/javascript';
var code = javascriptGenerator.workspaceToCode(workspace);
Programa paralelo
Algunas aplicaciones de Blockly eligen ejecutar todas las pilas de bloques en paralelo, en lugar de hacerlo en serie. Un ejemplo sería una aplicación de música en la que un bucle de batería se ejecuta de forma simultánea con una melodía.
Una forma de implementar la ejecución paralela es generar el código para cada bloque de forma individual:
import {javascriptGenerator} from 'blockly/javascript';
var json = Blockly.serialization.workspaces.save(workspace);
// Store top blocks separately, and remove them from the JSON.
var blocks = json['blocks']['blocks'];
var topBlocks = blocks.slice(); // Create shallow copy.
blocks.length = 0;
// Load each block into the workspace individually and generate code.
var allCode = [];
var headless = new Blockly.Workspace();
for (var i = 0; block < topBlocks.length; i++) {
var block = topBlocks[i];
blocks.push(block);
Blockly.serialization.workspaces.load(json, headless);
allCode.push(javascriptGenerator.workspaceToCode(headless));
blocks.length = 0;
}
Si el lenguaje de destino es JavaScript, el array allCode se puede usar para crear varios intérpretes de JS para la ejecución simultánea. Si el lenguaje de destino es Python, el array allCode se puede ensamblar en un solo programa que use un módulo de subprocesos.
Al igual que con cualquier programa paralelo, se deben tomar decisiones cuidadosas con respecto a los recursos compartidos, como variables y funciones.
Programa basado en eventos
Los controladores de eventos son solo funciones que llama el sistema, en lugar del programa. Estos bloques pueden encerrar la pila de bloques que se ejecutará o pueden ser encabezados que se encuentran en la parte superior de una pila de bloques.
A algunos desarrolladores les gusta agregar un "sombrero" en la parte superior de los bloques de eventos para que se vean distintos de otros bloques. Este no es el aspecto predeterminado de Blockly, pero se puede agregar anulando la constante del renderizador ADD_START_HATS a true (Codelab de renderizadores personalizados: Anula constantes) o agregando un tema y configurando la opción de sombrero en el estilo del bloque. Para obtener más información sobre cómo establecer sombreros en bloques como parte de temas, consulta Estilo de bloque en la documentación de temas.
Dentro de un modelo controlado por eventos, también podría tener sentido crear un controlador para el inicio del programa. Según este modelo, se ignoraría cualquier bloque del espacio de trabajo que no esté conectado a un controlador de eventos y no se ejecutaría.
Cuando diseñes un sistema que use eventos, considera si es posible o deseable admitir varias instancias del mismo controlador de eventos.
Diseño del espacio de trabajo
Hay dos formas razonables de diseñar una pantalla de izquierda a derecha. Una forma comienza con la barra de herramientas a la izquierda, el espacio de trabajo en el medio y la visualización de salida a la derecha. Este diseño se usa en la versión 1 de Scratch y en Made with Code.
La otra forma comienza con la visualización de salida a la izquierda, la barra de herramientas en el medio y el espacio de trabajo a la derecha. Este diseño se usa en la versión 2 de Scratch, así como en la mayoría de las aplicaciones de Blockly.
En cualquier caso, el espacio de trabajo debe expandirse para ocupar el tamaño de pantalla disponible, ya que los usuarios necesitan tanto espacio para programar como sea posible. Como se puede ver en las capturas de pantalla anteriores, el primer diseño tiene un rendimiento deficiente en pantallas anchas, ya que el código del usuario y la visualización del resultado están separados. Mientras que el segundo diseño permite espacio adicional para programas más grandes y, al mismo tiempo, mantiene las tres secciones cerca.
También tiene sentido lógico que los usuarios primero consideren el problema que intentan resolver, luego miren las herramientas que se proporcionan y solo entonces comiencen a programar.
Por supuesto, todo el orden debe invertirse para las traducciones al árabe y al hebreo.
En algunos casos, como cuando se usa una pequeña cantidad de bloques simples, puede ser conveniente que la caja de herramientas esté arriba o abajo del espacio de trabajo. Blockly admite el desplazamiento horizontal en la caja de herramientas para estos casos, pero se debe usar con cuidado.
Recomendación: Coloca la visualización del programa junto a la barra de herramientas.