Product Perfect

Blockly is a visual programming language developed by Google in 2012, designed to make coding accessible and engaging for beginners. It uses graphical blocks to represent complex coding concepts, allowing users to drag-and-drop elements instead of writing code textually. Blockly is widely used in educational settings due to its user-friendly interface and ability to generate JavaScript, Python, PHP and Lua code. The software has been open-sourced by Google on GitHub since its inception for developers worldwide. Its influence can be seen in popular children's learning platforms like Scratch from the MIT Media Lab.

Ask the right questions secure the right Blockly talent among an increasingly shrinking pool of talent.

First 20 minutes

General Blockly app knowledge and experience

The first 20 minutes of the interview should seek to understand the candidate's general background in Blockly application development, including their experience with various programming languages, databases, and their approach to designing scalable and maintainable systems.

How would you explain the concept of visual coding?

Visual coding is a method of programming where you manipulate program elements graphically rather than by specifying them textually. Blockly is a perfect example of visual coding where you drag and drop blocks to create an application.

What are the main components of Blockly?

The main components of Blockly are Blocks, Workspace, Toolbox, and Code Generator. Blocks are the elements that are dragged and dropped to create applications. Workspace is the area where blocks are placed and manipulated. Toolbox is the container for blocks. Code Generator translates the blocks into syntactically correct code in a specified programming language.

Describe the difference between Blockly and traditional text-based coding.

Traditional text-based coding involves writing lines of code in a specific programming language. Blockly, on the other hand, uses visual blocks that represent coding concepts. This makes it easier and more intuitive, especially for beginners, as it eliminates the need to remember syntax.

How would you create a custom block in Blockly?

Creating a custom block in Blockly involves defining the block's structure and behavior. This is done using JavaScript. You need to specify the block's shape, color, fields, and connections. You also need to define what happens when the block is executed.

What are shadow blocks in Blockly?

Shadow blocks in Blockly are blocks that are pre-filled in inputs. They can't be deleted but can be replaced. They are used to give a default value to an input.

The hiring guide has been successfully sent to your email address.

Oops! Something went wrong while submitting the form.

What you’re looking for early on

Does the candidate exhibit a strong understanding of Blockly?

How well does the candidate communicate?

Is the candidate able to solve problems logically and efficiently?

Can the candidate work well within a team?

Next 20 minutes

Specific Blockly development questions

The next 20 minutes of the interview should focus on the candidate's expertise with specific backend frameworks, their understanding of RESTful APIs, and their experience in handling data storage and retrieval efficiently.

Describe the difference between a statement input and a value input in Blockly.

A statement input is used when a block is expected to contain a stack of blocks beneath it. A value input is used when a block is expected to attach another block that returns a value.

How would you use variables in Blockly?

Variables in Blockly are created by dragging the 'create variable' block to the workspace. Once created, variables can be used in other blocks to store and manipulate data.

What are mutators in Blockly and how would you use them?

Mutators are a Blockly feature that allows blocks to change their structure, typically by adding, removing, or rearranging value inputs or statement inputs. Mutators are used by creating a custom block with a mutator method.

How would you translate Blockly code into another programming language?

Blockly has built-in functions to translate the blocks into JavaScript, Python, Lua, Dart, PHP, and other languages. This is done using the Blockly.Generator object.

What are the steps to integrate Blockly into a web application?

To integrate Blockly into a web application, you need to include the Blockly JavaScript file in your HTML, create a div to hold the Blockly workspace, and initialize Blockly with a toolbox and workspace.

The hiring guide has been successfully sent to your email address.

Oops! Something went wrong while submitting the form.

At this point, a skilled Blockly engineer should demonstrate strong problem-solving abilities, proficiency in Blockly programming language, and knowledge of software development methodologies. Red flags include lack of hands-on experience, inability to articulate complex concepts, or unfamiliarity with standard coding practices.

Digging deeper

Code questions

These will help you see the candidate's real-world development capabilities with Blockly.

What does the following code do?
{
  "type": "controls_if",
  "message0": "%1 then %2",
  "args0": [
    {
      "type": "input_value",
      "name": "IF0",
      "check": "Boolean"
    },
    {
      "type": "input_statement",
      "name": "DO0"
    }
  ]
}
This code defines a conditional 'if' block in Blockly. It takes a boolean input and executes a set of statements if the boolean is true.
What will be the output of this code?
{
  "type": "math_number",
  "message0": "%1",
  "args0": [
    {
      "type": "field_number",
      "name": "NUM",
      "value": 123
    }
  ]
}
This code defines a number block in Blockly with a default value of 123. The output will be the number 123.
What does this Blockly code do?
{
  "type": "lists_create_with",
  "message0": "create list with %1",
  "args0": [
    {
      "type": "input_value",
      "name": "ADD0",
      "check": "Array"
    }
  ]
}
This code defines a block that creates a list with the input values. The input should be an array.
What is the purpose of this code?
{
  "type": "controls_whileUntil",
  "message0": "repeat %1 %2",
  "args0": [
    {
      "type": "field_dropdown",
      "name": "MODE",
      "options": [
        [
          "while",
          "WHILE"
        ],
        [
          "until",
          "UNTIL"
        ]
      ]
    },
    {
      "type": "input_value",
      "name": "BOOL",
      "check": "Boolean"
    }
  ]
}
This code defines a 'while' or 'until' loop block in Blockly. It repeats a set of statements either while a condition is true or until a condition becomes true.

Wrap-up questions

Final candidate for Blockly Developer role questions

The final few questions should evaluate the candidate's teamwork, communication, and problem-solving skills. Additionally, assess their knowledge of microservices architecture, serverless computing, and how they handle Blockly application deployments. Inquire about their experience in handling system failures and their approach to debugging and troubleshooting.

How would you handle errors in Blockly?

Error handling in Blockly is done by checking the validity of the blocks. This can be done using the onchange function which is triggered whenever a change is made to the workspace.

What are the best practices for optimizing performance in Blockly?

Performance in Blockly can be optimized by minimizing the number of blocks in the workspace, disabling rendering during bulk operations, and using simple block shapes and colors.

Describe how you would implement a complex algorithm using Blockly.

Implementing a complex algorithm in Blockly involves breaking down the algorithm into smaller parts, creating custom blocks for each part, and then combining these blocks in the correct order in the workspace.

Blockly application related

Product Perfect's Blockly development capabilities

Beyond hiring for your Blockly engineering team, you may be in the market for additional help. Product Perfect provides seasoned expertise in Blockly projects, and can engage in multiple capacities.

Blockly Consultive assessments

Blockly Application Conversion Assessment Blockly Application Integration Assessment Blockly Data & Database Integration Assessment

Custom Blockly development projects

Custom Blockly App Conversion Blockly Custom App Development Process App UI Design for Blockly Facelifts

Hiring guide for Blockly Engineers

Blockly Developer Hiring Guide

What you’re looking for early on

The ideal back-end app developer

What you’re looking to see on the Blockly engineer at this point.

Blockly Consultive assessments

Custom Blockly development projects