Blockly是Google于2012年6月发布的完全可视化的编程语言，类似MIT的儿童编程语言Scratch， 你可以通过类似玩乐高玩具的方式用一块块图形对象构建出应用程序。
每个图形对象都是代码块，你可以将它们拼接起来，创造出简单功能，然后将一个个简单功能 组合起来，构建出一个程序。整个过程只需要鼠标的拖曳，不需要键盘敲击。
在开发者视角下，blockly是一个文本框，里边包含了用户输入好的代码。代码生成到文本框的过程，就是用户在blockly里拖曳的过程。
下载地址：https://github.com/google/blockly
特性
-
完全是JavaScript，可离线使用
-
可生成6门语言：
-
JavaScript
-
Python
-
PHP
-
Dart
-
Lua
-
XML(XML有时也被视为语言，实际上它更像语法树)
-
支持主流的浏览器，如：Chrome, Firefox, Safari, Opera, IE
-
支持移动设备
-
支持许多编程的基本元素，如：变量、函数、数组
-
易于扩展自定义的块
-
支持多国语言（40+）
作为编辑器的blockly
blockly将自己定位为一个编辑器
The web-based visual programming editor
上边这句话是blockly源码库的自描述
这个定位十分符合unix哲学：Do one thing。
而且它确实是实诚的编辑器，而不是那种伪装成编辑器的操作系统。
blockly作为编辑器，它的输入为用户的拖曳（拖曳作为一种输入，可以类比为普通编辑器的键盘输入），输出为生成的代码。使用blockly可以快速打造一个特定领域的可视化 块编程 编辑器
至于每个积木（block）如何生成代码，代码用于什么用途，blockly则通通不关心，用户自己掌控。
由于设计上遵循unix哲学，他也将获得unix哲学带来的好处，小而美带来的强大的组合能力。于是围绕blockly的生态十分广阔。涵盖硬件、软件，领域涵盖科研、教育、游戏、玩具等等
使用场景
随便列举几个典型的
-
以拖曳的方式生成代码，控制硬件
-
作为软件的输入（demo中的拖曳出函数并生成图像）
-
作为软件的的实时控制界面
-
...
构建一个Blockly app的步骤
按照官方文档overview的说法，有以下三步：
-
集成blockly编辑器
-
定义你的app里的功能块（block）
-
构建app的其余部分，blockly仅充当代码生成器，你需要决定这些用户生成的代码用于做什么，这也是你的app的核心功能所在
Blockly的强大之处
这部分翻译自官方文档
Blockly作为一个可视化编程环境，正逐渐流行，那么你如何利用它呢，下边的优势举例可能对你有启发：
-
可导出的代码: 可以将基于block程序转化为基于普通文本的常规代码（多语言）
-
开源： 可以以任何方式定制/使用它，甚至入侵修改它的内核
-
可拓展： 通过添加定制化的
block关联到你的api上（将提供服务的部分视为下位机，对外提供api/指令集） -
生产可用：blockly不是一个玩具，你可以用它完成复杂的编程任务，例如写一个可以计算标准差的block
-
国际化：blockly支持40多门语言
衍生项目
-
Blockly Game：拖曳式小游戏
-
Scratch Blocks：该项目由Scratch团队使用blockly构建
-
App Inventor：基于blockly的可视化安卓IDE
-
OzoBlockly：一个可编程微型机器人，编码烧录很有意思（屏幕闪烁）
-
Wonder Workshop：可编程机器人玩具
-
scriptr.io：物联网云端IDE
脑洞
用做配置工具
我们常遇到这种纠结：究竟要给用户怎样的配置界面，常规的UI界面，虽然友好，能做的事太少了。而基于文本的配置，表达能力是加强了，对用户不仅不友好，还容易因为拼写错误，出现奇怪问题（缺乏验证机制），让用户摸不着头脑
基于blockly的配置工具，似乎是个很不错的选择，拥有编程语言级别的表达能力，操作起来又不晦涩。
参考
BlocklyDuino 是一个基于 Web 的 Arduino 可视化编程工具。基于 Google 的 Blockly 开发。
下载地址：https://github.com/BlocklyDuino/BlocklyDuino
原文始发于微信公众号（丁爸 情报分析师的工具箱）：可视化编程工具-blockly
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论