Blockly 和 Scratch 介绍

Blockly

Blockly是一款由google开发的基于web的开源可视化编程编辑器，它的设计是为了解决编程的可视化在教育领域的应用问题。同类编辑器还有Microsoft MakeCode、Scratch Blocks、Droplet、Snap等。其中MakeCode是微软开发基于开源项目PXT的编辑器，Micro:bit就是MakeCode的用户之一。

特点

- 可导出、多语言，Blockly可编译输出多种语言，包括JavaScript、Python、PHP、Dart。

- 可拓展，你可以很轻易地自定义block。

- 强大的能力，使用Blockly可以制作复杂的程序。

- 国际化，Blockly支持40+门语言。

- 客户端化，不依赖远端或第三方资源。

Scratch

Blockly仅提供编程可视化的Foundation，ToolBox较简单，主要由主要变量、流程控制、数学计算、列表结构组成。

那么Scratch能做什么？

先看看Scratch的ToolBox提供了什么：

- Move 移动

- Display 外观

- Audio 声音

- Event (框架)事件

- SysEvent 系统事件

- Control 流程控制

- Math 数学计算

- Variables 自定义变量

- Custom Block 自定义积木

另外，Scratch还提供有图像、音频导入和编辑功能，以及实时预览界面。所以，Scratch可以理解为一款基于可视化积木编程的简单的游戏编辑器。

 Scratch功能强大，一应俱全，同时开源，通过二次开发 Scratch-GUI可快速构建自己的Scratch应用或集成到已有项目中。

Scratch Blocks 是基于Blockly开发的一个图形化js库。

Scratch VM 是一个运行 Scratch Blocks 代码块的引擎库。

Scratch Audio 是用来解析声音、播放声音的库。

Scratch Link 通过 WebSocket 使 Scratch 硬件扩展可以和硬件设备通讯。

scratch-gui

安装

git clone https://github.com/LLK/scratch-gui.git --depth=1

cd scratch-gui

npm install

构建运行

BUILD_MODE=dist npm run build

npm start

open "http://localhost:8601/" 或 start chrome http://localhost:8601/

技术栈

- react + redux

- webpack（打包工具）

src目录结构

- components: 所有基础react组件，包括相对应的jsx、css以及依赖的svg资源

>  jsx是react提供的文件格式，在js文件特性的基础上支持html标签的写法。举个栗子:

export default class JsxComponent extends React.Component {

    constructor(props) {

        super(props);

    }

    render() {

        return (

           

        );

    }

}

- containers: 高级组件，封装基础组件（component）的容器，并负责处理部分业务逻辑

- css: 全局样式配置

- lib: 依赖库，包括全局资源assets，js工具库，以及高级组件hoc（组件包裹器）

> hoc 全称 a higher-order component ，本质是一个方法，用来包裹（或者叫修饰）react组件。举个栗子:

export default CompHoc = function (WrappedComponent, localesOnly) {

    return class CompStateWrapper extends React.Component {

        render() {

            return (

               

                    {...componentProps}

                />

            );

        };

    }

}

- playground: 示例，有block-only（仅积木）、player（舞台）、render-gui（完整）三种示例

- reducers: 所有reducer以及initial state

- index.js: 打包入口

总结

    这篇文章大多内容摘录自官方文档，旨在记录和督促自己，更进一步得学习。加油，打工人！