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 (
<div className = {classname} >
);
}
}
- 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 (
<WrappedComponent
{...componentProps}
/>
);
};
}
}
- playground: 示例，有block-only（仅积木）、player（舞台）、render-gui（完整）三种示例
- reducers: 所有reducer以及initial state
- index.js: 打包入口
总结
这篇文章大多内容摘录自官方文档，旨在记录和督促自己，更进一步得学习。加油，打工人！
