0 to 1 Series 3: A Quick look at Low-code and no-code programming

Low code, no code, originated with programmers’ hatred of code, flourished with highly instructured “kid programming,” and is now seen by companies as a great way to simplify operating costs. Yes, it’s exciting to think that you can create a piece of computer logic without typing code. In this article, I’m going to tell you what low code is, and I’m going to introduce you to a low-code martial art from Google: Blockly. With low code, Coding is too simple!! (Just kidding)

What is low code and what is no code?

Obviously, the point of low code is to be low. In other words, the computational logic of the original code can be accomplished while reducing the amount of code and simplifying the structure of the code. Without code, a piece of computational logic is described by something other than code, such as an apple or, of course, a pear.

What is Blockly, and how does it do it without code?

Blockly is a visual programming tool published by Google, built on Web technologies. With Blockly, users can drag and drop modules to build code logic, which is like building blocks

From the user’s perspective, Blockly is a simple and easy-to-use visual tool, which can generate code with actual computational logic by dragging and dropping a module to form a specific context sequence. The process of code generation is the process of users dragging modules into the Blockly container to form a context.

From a developer’s perspective, Blockly is a three-in-one integration tool that integrates an object collection, an interface processor, and a compiler. The integration functions are as follows:

  • Set of objects: The objects in the set of objects are modules with computation logic;
  • Interactive processing containers: Interactive processing containers provide the ability to contextualized user drag-and-drop operations;
  • Compiler: A compiler compiles a combination of modules to produce code that the computer can recognize and compile.

3. A low-code product you must have heard of

Let’s take a look at one of the most well-known low-code products, Programcat:

Compare this to Blockly’s editing interface:

You must have noticed the similarities and differences.

That’s right, the most important low coding ability of programcat actually comes from Blockly. On the editor side, even the appearance of the programmer has changed very little, except that the language, style, and description have been changed on top of Blockly, which is still clearly Blockly.

Using the ability of the native Blockly, children can move their fingers and drag small squares according to the instructions and prompts to form a set of invisible logic code to manipulate the cat in the view to explore the green grassland. If I were a little friend, I should like this simple rough game process, although it is not intelligent, but to some extent, he completed the automation of the game process, referred to as: hang up.

Here’s a question: if it were your child, would you be willing to pay for a cat programming course?

Build simple blocks of code in JavaScript

4.1. Define the shape, content, and compilation logic of the code block

/ / import library
import * as Blockly from 'blockly/core'

// Define the shape and content of the code block:
Blockly.Blocks['test'] = {
  init: function () {
    this.appendValueInput('questionNumber')
      .setCheck(null)
      .appendField('Popover prompt:')
    this.setInputsInline(true)
    this.setPreviousStatement(true.null)
    this.setNextStatement(true.null)
    this.setColour(60)
    this.setTooltip(' ')
    this.setHelpUrl(' ')}},// Define the compilation logic of the code block:
Blockly.JavaScript['test'] = function (block) {
  var value_number = Blockly.JavaScript.valueToCode(
    block,
    'questionNumber',
    Blockly.JavaScript.ORDER_ATOMIC,
  )
  var code = `window.alert(${value_number}); \n`
  return code
}
Copy the code

4.2. VUE page introduces code block

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <BlocklyComponent id="blockly2" :options="options" ref="foo"></BlocklyComponent>
    <p id="code">
      <button v-on:click="showCode()">View the generated logical code</button>
      <pre v-html="code"></pre>
    </p>
  </div>
</template>
import BlocklyComponent from "./components/BlocklyComponent.vue";
import "./blocks/stocks";
import "./prompt";
import BlocklyJS from "blockly/javascript";
import Blockly from "blockly";
// Introduce the language you want to convert, which is PHP, Python, Dart, Lua, javascript
import "blockly/javascript";
// Import the language pack and use it
import * as hans from "blockly/msg/zh-hans";
Blockly.setLocale(hans);
export default {
  name: "app".components: {
    BlocklyComponent,
  },
  data() {
    return {
      code: "".options: {
        media: "media/".grid: {
          spacing: 25.length: 3.colour: "#ccc".snap: true,},toolbox: '< XML >< category name=" try "colour="%{BKY_LOOPS_HUE}"> 
        `,}}; },methods: {
    showCode() {
      this.code = BlocklyJS.workspaceToCode(this.$refs["foo"].workspace); ,}}}; </script>Copy the code

4.3 Generated interactive interface and compilation results

Simple! This way, you only need to define the shape, content, and compilation logic of the block of code, and you don’t need to worry about the interface of the block of code. Blockly solves this process perfectly!

But in fact, Blockly is not a perfect fit for all product interaction needs. In many scenarios, when product interaction has more stringent design rules, it is necessary to write a processing container similar to Blockly.

The following is an official introduction to the Blockly application building process

  1. Integrate the Blockly editor. The simplest Blockly editor consists of a toolbox for storing block types and a workspace for arranging blocks. Learn more about integrating Blockly in the Getting Started documentation.
  2. Create your application block. Once Blockly is installed in your application, you need to create blocks for your users to encode and then add them to your Blockly toolbox. Learn how to do this in the Overview of Creating custom blocks.
  3. Build the rest of the application. On its own, Blockly is just a way to generate code. At the heart of your application is deciding what to do with that code.
  4. Give the attribution of Blockly. If you want people to know you’re using Blockly to build your application, you can get a Built on Blockly badge from the Attribution page.

Here are some other visual compilers

  • Scratch Blocks: Designed by the folks behind Scratch at MIT and built on top of the Blockly code base, Scratch Blocks provide a simplified programming model ideal for young learners.
  • PXT: Visual and text-based programming environment that supports the Microsoft MakeCode editor. PXT bundles Blocks, TypeScript, emulators, and compilers into one library.
  • Droplet: Graphic programming editor that supports Pencil Code and features prominently the ability to convert Code into blocks.
  • Snap: A Scratch inspired graphic programming language that is not a library but a complete application with an integrated execution environment.