Blockly

Blockly是一款執行在網頁客戶端的JavaScript庫，目的是用來打造以積木塊為基礎，附帶編輯器的視覺化程式設計語言。它是一項由Google根據Apache2.0許可的開放原始碼專案。常見被應用在網頁瀏覽器中，視覺上與Scratch差不多。Blockly也可於Android和iOS中執行，但無法獲得網頁瀏覽器的全部特性。

Blockly

原作者	Neil Fraser、Quynh Neutron、Ellen Spertus、Mark Friedman
開發者	Google、麻省理工學院
首次發布	2012年5月，​13年前​（2012-05）
目前版本	12.0.0（2025年5月15日；穩定版本）[1]
原始碼庫	github.com/google/blockly
程式語言	JavaScript
平台	網頁瀏覽器
檔案大小	150 KB
語言	50種語言
語言列表 English
類型	函式庫
許可協定	Apache許可證2.0版
網站	developers.google.com/blockly/

Blockly是使用能在網頁上拖拉並相互連接的視覺化方塊，使得程式的撰寫更加容易，並且可以生成對應的JavaScript、Python、PHP或Dart等原始碼。它也可以客製化產生任何含有文字的電腦語言。^[2]

歷史

Blockly 的發展始於 2011 年夏天，首次是在 2012 年的 Maker Faire 公開發布。Blockly 最初是為了替代 App Inventor 的 OpenBlocks 所設計的。^[3] Neil Fraser 負責啟動這個計劃，並且與 Quynh Neutron、Ellen Spertus 以及 Mark Friedman 一同為主要貢獻者。

使用者介面

Blockly 編輯器的預設使用者介面是由工具箱（toolbox）、工作區（workspace），工具箱內有可用的程式方塊，使用者可從"工具箱"中拖拽方塊，並且在工作區進行排列和組合。預設情況下，工作區還包括一個縮放圖示和一個用來刪除程式方塊的垃圾桶。^[4] 特別的是，這個編輯器允許程式方塊被開發者啟用或是限制某些功能。

訂製化

Blockly 包括一組通用功能的程式方塊，但可以通過訂製化以增加更多的程式方塊。新的程式方塊需要一組定義方塊的資料以及方塊邏輯的程式碼產生器。方塊定義資料決定了方塊的外觀（使用者介面）而產生器負責產生被翻譯對象的程式碼。方塊定義與程式碼產生器可以被放在 Javascript 中，或者可以利用 Block Factory，這是一種用來產生新的方塊的工具，其原理是利用方塊來產生新方塊的相關資料；讓新增的方塊更加容易。

應用

Blockly 被使用在一些著名的專案中，其中包括：

• 麻省理工學院的 App Inventor，用來創造應用程式。^[5]
• Blockly Games 是一套教育性質的電腦遊戲，教導程式設計的概念，如迴圈與條件分支。^[6][7]
• Code.org 教入門級的程式設計，已經有數以百萬計的學生參與到他們的 Hour of Code 計劃中了。^[8]
• 來自 Code For Life 的 Rapid Router，教導小學生程式設計的概念。^[9]
• RoboBlockly，一款以網頁為操作基底的機器人類比環境，用來教導程式設計與數學。
• Verge3D 利用 Blockly 作為 WebGL 的指令碼環境 (被稱為拼圖)。^[10]
• Wonder Workshop，用在控制他們的 Dot and Dash 教育機器人。^[11]

功能

• 基於網頁為操作基底來使用 SVG，而不是使用 Flash
• 可完全客戶端執行的 JavaScript
• 支援主要的網路瀏覽器包括：Chrome， Firefox，Safari，Opera，IE
• 支援行動載具，如 安卓 以及 iOS
• 支援許多程式設計架構，包括變數，函式， 陣列等
• 支援最小型別檢查，是一種弱型別的程式語言
• 訂製化方塊擴充容易。藉由使用 Block Factory 讓 Blockly 打造 Blockly
• 可生成乾淨的代碼^[12]
• 可單步執行代碼以進行追蹤和除錯^[13]
• 已經翻譯50種以上的語言^[14]
• 支援從左到右或者從右到左的文字顯示 ^[15]