Showing posts with label MIT App Inventor. Show all posts
Showing posts with label MIT App Inventor. Show all posts

Friday, 30 October 2026

Visual Programming Languages: Thirteen Tools That Teach Code Before Syntax

Standard


We are in an AI era. A student can paste a homework prompt into a chatbot and get working Python back in seconds. That does not mean they can read the result, fix it, or tell a good loop from a lucky guess. Before kids step into AI usage, they still need the old core: what a program is, how logic branches, and why a computer only does what you asked, not what you meant.

Visual programming languages (VPLs) are the school-friendly way to build that core. You snap a block, draw a flowchart, or move a character, then watch the idea run. Typing, and later prompting, come after the student can see sequence, choice, and loops. A first class that dies on a missing semicolon never gets that far. A class that starts visual usually does.

This post walks through thirteen tools that keep showing up on school laptops, lab benches, and phone screens: Flowgorithm, MIT Scratch, Blockly, Snap!, Sketchware, Alice, MIT App Inventor, Kodu, Moenagade, Open Roberta, Kojo (Kogics), Visual Logic, and Flowcode. They are not one product family. They share one bet: if you can see the program, you can think about the program, and that thinking is still required in an AI classroom (Resnick et al., 2009; Cook, 2015).

Key Abbreviations in This Post

  • VPL (Visual Programming Language): A language you build by placing shapes, not by typing source first.
  • IDE (Integrated Development Environment): The editor, runner, and debugger in one window.
  • CS1: A first university or college programming course.
  • BYOB (Build Your Own Blocks): The Scratch fork that became Snap!. Adds first-class procedures.
  • NEPO: The block language used in Open Roberta Lab (Fraunhofer IAIS).
  • APK (Android Package): The install file an Android phone runs.
  • SoC / MCU (Microcontroller): The small chip Flowcode and robot labs actually flash.
  • EV3 / micro:bit / Arduino: Common classroom robots and boards that Open Roberta and similar tools target.
  • Scala: The text language behind Kojo. Looks like a modern Java cousin, with a gentler start.
  • Export / code gen: Turning a flowchart or block stack into C++, Java, Python, or similar.

The One-Minute Version

  • Scratch, Snap!, Blockly: Puzzle blocks. Scratch is the kids' studio. Snap! is the university-strength cousin. Blockly is the library other apps sit on.
  • App Inventor and Sketchware: Same block idea, aimed at a phone app. App Inventor is browser plus companion. Sketchware lives on the phone.
  • Alice and Kodu: 3D stories and games. Sequence and events without a blank text file.
  • Flowgorithm, Visual Logic, Flowcode: Executable flowcharts. The first two teach algorithms. Flowcode talks to real boards.
  • Open Roberta: Browser blocks for robots. No local install fight with school IT.
  • Moenagade: Blocks that become real Java you can open in NetBeans.
  • Kojo (Kogics): Turtle, art, math, and Scala. Visual canvas, text language.
Thirteen visual programming tools arranged as a family of cards

Why These Tools Exist

Text languages punish beginners twice. First for the idea. Then for the grammar. A Hello World in Java already hides classes, static methods, and string arrays. The student needed output. They got object-oriented ceremony (Cook, 2015).

Research on CS1 keeps finding the same pattern. Students spend the hour hunting syntax, then leave without a working algorithm. Visual tools cut the grammar tax so the hour goes to sequence, choice, loops, and events (Gudmundsen et al., 2012; Cooper et al., 2000).

Problem: a 14-year-old can describe "if the sprite hits the wall, bounce," but cannot type the event handler.
Cause: the language wants listeners, coordinates, and braces before it will move a pixel.
Effect: they quit, or they copy a snippet they cannot read. A block editor lets them snap when touching edge, bounce and see it work the same afternoon (Resnick et al., 2009).

That is the whole family in one story. The tools differ in shape: flowchart, puzzle, 3D stage, robot, phone, or turtle canvas.

Three visual styles: flowcharts, puzzle blocks, and 3D stages
Same idea. Three shapes. Flowchart Ovals, boxes, diamonds Run the chart as a program Flowgorithm Visual Logic Flowcode Best for algorithm class Puzzle blocks Snap pieces that fit Wrong types will not dock Scratch, Blockly, Snap! App Inventor, Sketchware Moenagade, Open Roberta Best for events and apps Worlds and canvas A stage you can see Code moves a body or pen Alice, Kodu Kojo (turtle + art) Open Roberta (robots) Best for stories and motion

Block Studios: Scratch, Blockly, Snap!

These three get mixed up in every faculty meeting. Scratch is a product kids open. Blockly is a JavaScript library you embed. Snap! is a Scratch descendant that treats procedures as data, which is why UC Berkeley can teach CS10 with it (Harvey & Mönig, 2010; Fraser, 2015).

MIT Scratch

Scratch came out of the Lifelong Kindergarten group at the MIT Media Lab, led by Mitchel Resnick. The public 1.0 release was 2007. Scratch 2.0 moved to the browser in 2013. Scratch 3.0 (2019) rebuilt the editor on Blockly (Resnick et al., 2009; Scratch Foundation, 2019).

You drag colored blocks: motion, looks, sound, events, control, sensing, operators, variables. Sprites live on a 2D stage. The community is the other half of the product. Kids remix shared projects, which is how a cat-chasing-a-mouse game becomes a thousand variants.

Use it when: ages 8 to 16, clubs, intro computing, media and storytelling. Not when you need a published Android store app or a PIC microcontroller.

Problem → cause → effect: a middle-schooler wants a game by Friday. A text IDE asks for a window toolkit first. Scratch gives a stage, a green flag, and a forever loop. They ship a playable sketch, then later ask what a real loop looks like in Python.

Blockly

Google released Blockly as open source in 2012. Neil Fraser and the Blockly team built a drop-in block editor: toolbox, workspace, code generators for JavaScript, Python, PHP, Lua, Dart, and others (Fraser, 2015).

You do not "switch a class to Blockly" the way you switch a class to Scratch. You put Blockly inside something else. App Inventor, Code.org, MIT Scratch 3, Microsoft MakeCode, and Open Roberta all sit on that idea. The blocks look familiar because the library taught the industry a visual grammar: C-shaped loops, puzzle-piece types, a trash can.

Use it when: you are building an editor, a lesson site, or a hardware tool and you do not want to invent snapping from scratch.

Snap!

Snap! (often written Snap) grew from BYOB, a Scratch modification by Jens Mönig and Brian Harvey. The goal was a ceiling, not only a floor. You can build your own blocks. Lists and procedures are first-class. You can write a map or a recursive tree without leaving the block world (Harvey & Mönig, 2010).

Berkeley's Beauty and Joy of Computing course uses Snap! so students meet abstraction before they meet Java braces. If Scratch is "make a game," Snap! is "make a language that makes games."

Use it when: high school AP-style computing, CS0/CS1 that wants functions as values, or a Scratch kid who outgrew the built-in palette.

Scratch as the kids studio, Blockly as the library, Snap as the university-strength blocks

Phone Apps: App Inventor and Sketchware

Two answers to "can I ship something my friends can install?" One assumes a laptop. One assumes only a phone.

MIT App Inventor

App Inventor started at Google in 2009 and moved to MIT in 2011 and 2012. The current MIT App Inventor is a browser IDE: Designer for screens and components, Blocks for behavior. The block engine is Blockly. Companion apps on Android (and later iOS) let you live-test without a full compile every click (Wolber et al., 2014; MIT App Inventor, 2024).

You get sensors, maps, speech, TinyDB, and web APIs as components. That is why a civic-tech class can build a pothole reporter in two weeks. The limit is the component set and the performance of the generated app, not the student's ability to type Java.

Sketchware

Sketchware put the same block idea on the Android device itself. You design a layout, snap logic, and build an APK on the phone. The original commercial app later stalled. The community kept the idea alive as Sketchware Pro (Sketchware Pro, 2023).

It is messy in the way phone-native tools are messy: storage permissions, signing keys, Play Store policy. It is also the only option in rooms where there is no laptop cart.

Problem → cause → effect: a college club wants a campus bus app. App Inventor gives Designer plus Blocks on a lab PC, then a QR install. A student with only a phone uses Sketchware and sideloads the APK. Same visual habit. Different hardware constraint.

App Inventor on a laptop with a phone companion, Sketchware coding on the phone itself

Stories and Games: Alice and Kodu

Alice

Alice is a 3D environment from Carnegie Mellon University. Randy Pausch, Steve Cooper, and Wanda Dann built it so novices could tell a story in a virtual world while learning objects, methods, and events (Cooper et al., 2000). Alice 3 added a path toward Java and aligned characters with a commercial 3D gallery.

A student drops a person in a room, writes walk to the door, then say "hello". The camera and the character make bugs obvious. If the person walks through the wall, the algorithm is wrong. You do not need a debugger log.

Kodu

Kodu Game Lab came from Microsoft Research (Matt MacLaurin and team). It started on Xbox and later landed on Windows. Rules look like tiles: WHEN see apple DO move toward. Terrain, characters, and scoring sit in a small 3D world (MacLaurin, 2011).

Kodu teaches event-condition-action, not algebra. That is a feature. A primary class can build a collect-the-coins game without variables if they do not need them yet. When they do, score and pages are there.

Use Alice when the course wants objects and storytelling on a PC.
Use Kodu when the course wants a game controller, a hill, and a rover, and the students are younger.

Alice 3D storytelling classroom and Kodu game hills with a rover

Flowchart Trio: Flowgorithm, Visual Logic, Flowcode

Blocks hide syntax. Flowcharts hide almost everything except control flow. Intro algorithm courses love them because the chart is the program.

Flowgorithm

Devin Cook at California State University, Sacramento, built Flowgorithm as a free, executable flowchart language. You drop start, input, assign, output, if, loops, functions, and arrays. You run it. A watch window shows variables. Then you generate C#, C++, Java, JavaScript, Python, Ruby, Swift, Visual Basic, and more, interactively, so the student can see how a diamond becomes an if (Cook, 2015; Flowgorithm, 2024).

It is Windows-first, light, and honest about its job: teach logic, then hand the student a real language.

Visual Logic

Visual Logic (visuallogic.org) is a commercial executable-flowchart tool used in U.S. program-logic courses. It covers variables, input and output, conditions, loops, procedures, arrays, and files. The demo watermarks and will not save. Departments buy a license when they want a whole CS0 term on charts, then a jump to Python or Java (Gudmundsen et al., 2012; Crews & Murphy, 2009).

Compared with Flowgorithm, Visual Logic is less about multilingual export and more about a closed teaching loop: draw, run, grade.

Flowcode

Flowcode, from Matrix TSL in the United Kingdom (the company once known as Matrix Multimedia), is a commercial visual IDE for embedded systems. Students draw flowcharts or use a mix of flowchart, blocks, and C, then simulate and download to PIC, Arduino, AVR, and other boards. Education licenses pair with E-blocks, AllCode robots, and curriculum packs for motors, sensors, and comms (Matrix TSL, 2024).

Do not treat Flowcode as a CS1 flowchart toy. It is an electronics and mechatronics tool that happens to be visual. The "Hello World" is an LED, not a console line.

Problem → cause → effect: a technician course must teach PWM before it teaches pointers. Flowcode lets the student chart "read pot, write duty cycle," simulate the LED brightness, then flash a board. They meet C later, when the generated code is no longer magic.

Flowgorithm and Visual Logic for algorithms, Flowcode for microcontroller boards

Robots and a Java Bridge: Open Roberta and Moenagade

Open Roberta

Open Roberta Lab is a browser environment from Fraunhofer IAIS in Germany, grown out of the Roberta initiative that put robots in schools. The language is NEPO, a Blockly-inspired block set. Pick a robot, snap actions and sensors, run a simulation or download. Targets have included LEGO EV3, NXT, WeDo, Calliope, micro:bit, Arduino-class boards, NAO, and others. Generated code depends on the target: Java, Python, C/C++, MicroPython (Fraunhofer IAIS, 2024).

The classroom win is logistics. No admin rights. Any OS. One URL. A teacher can move from EV3 one term to micro:bit the next without rewriting the pedagogy.

Moenagade

Moenagade is a small, honest tool. Franz-Josef Schmitt (fesch) published it around 2017 from Luxembourg (moenagade.fisch.lu, GitHub fesch/Moenagade). It is GPL-3. Blocks describe beginner Java structures. The point is the live conversion to real, executable Java that you can later open in NetBeans or Unimozer (Schmitt, 2017).

It is limited on purpose. Other block tools hide the text. Moenagade exists because the author wanted students to see the Java appear while they still remember why they snapped the loop.

Open Roberta NEPO blocks for robots and Moenagade blocks that compile to Java

Kojo, from the Kogics Foundation

People write "Kogics" on a syllabus and mean Kojo. Kogics is the foundation. Kojo is the learning environment Lalit Pant built: desktop app for Linux, Windows, and Mac, plus a web app. The language is Scala. The first contact is often turtle graphics, then pictures, animation, games, music, and even Arduino (Kogics Foundation, 2024).

Kojo is a hybrid, not a pure VPL. You type. The canvas answers. That is closer to Logo and Processing than to Scratch. Indian state curricula have used it in grades 7 to 10 because one tool can cover drawing, math, and a path into a real industrial language.

Use it when: you want art and algebra in the same window, and you are willing to teach a little text on day one.

Kojo from Kogics with a turtle drawing on a canvas next to Scala code

How the Thirteen Compare

Pick by output, not by fashion Tool Shape Home You walk out with Flowgorithm Flowchart Desktop, free Logic + 18 language exports Visual Logic Flowchart Desktop, licensed Gradable algorithm labs Flowcode Flow + C Matrix TSL, paid Firmware on a real MCU Scratch Blocks MIT, browser Games, stories, remixes Snap! Blocks++ Berkeley, browser Functions as data, CS0 Blockly Library Google, JS Your own block editor App Inventor Blocks MIT, browser Phone app + sensors Sketchware Blocks Android device APK built on the phone Alice 3D world Carnegie Mellon Story + objects → Java path Kodu Tiles / 3D Microsoft Research Xbox/PC game worlds Open Roberta NEPO blocks Fraunhofer, browser Robot / board program Moenagade Blocks Desktop, GPL Visible Java source Kojo (Kogics) Text + canvas Kogics, desktop/web Art, math, Scala A useful split Teach thinking: Flowgorithm, Visual Logic, Scratch, Snap!, Alice, Kodu, Kojo Ship an artifact: App Inventor, Sketchware, Open Roberta, Flowcode, Moenagade Build a tool: Blockly

Which Tool Fits the Room

Do not start with the brand on a conference slide. Start with the artifact and the hardware you already own.

  • Kids, games, remix culture: Scratch. If they outgrow it, Snap!.
  • Phone in their pocket: App Inventor if you have laptops. Sketchware if you do not.
  • 3D story, objects, later Java: Alice.
  • Controller and a landscape: Kodu.
  • CS0 algorithm unit, Windows lab: Flowgorithm (free) or Visual Logic (licensed, save/grade workflow).
  • Electronics, PIC, Arduino kits you already bought from a UK catalog: Flowcode.
  • Robot cupboard, locked-down school PCs: Open Roberta in the browser.
  • Must see Java this term: Moenagade, then NetBeans.
  • Math, art, India-friendly curriculum, Scala later: Kojo.
  • You are the one writing the editor: Blockly.
Decision tree matching a project type to a visual programming tool

A Classroom Path That Does Not Trap Students

Visual tools fail when they become a gated community. The student can snap forever and still freeze in front of a blank main. The better path is short and visible.

  1. See the idea. Stage, flowchart, or robot. One output on day one.
  2. Snap or draw the steps. Sequence, then if, then loop. Name the pattern out loud.
  3. Run and watch. Step mode if the tool has it (Flowgorithm's watch window, Scratch's single-step, robot simulation).
  4. Fix the bug you can see. The sprite walks through the wall. The LED never lights. The flowchart never reaches Output.
  5. Export once, on purpose. Flowgorithm to Python. Moenagade to Java. Open Roberta to the target language. App Inventor students open the built APK and talk about events in words that will match later Java listeners.

Problem: year-10 students ace Scratch and fail the first Python quiz.
Cause: the course never showed that a C-shaped block is a while, and never made them type one.
Effect: they call visual languages "not real." Pair every unit with a 20-minute export or rewrite. The tool is a scaffold, not a career.

Five-step classroom path from seeing an idea to exporting real code

What These Tools Are Not

They are not a replacement for data structures, complexity, or systems programming. They will not make a production backend. Blockly inside a factory HMI is still an HMI, not a proof that blocks scale to every domain.

They also are not all free, and they are not all alive at the same speed. Visual Logic and Flowcode are commercial. Sketchware's original store listing went quiet. Moenagade's last public push was 2018. Scratch, Snap!, Blockly, App Inventor, Open Roberta, Kojo, and Flowgorithm are the ones you can plan a three-year curriculum around without holding your breath.

Pick the living tool that matches the artifact. Keep the export step. Treat the colorful blocks as a way to think, not as a place to hide.

References

  • Cook, D. D. (2015). Flowgorithm: Principles for teaching introductory programming using flowcharts. ASEE Annual Conference. https://peer.asee.org/flowgorithm-principles-for-teaching-introductory-programming-using-flowcharts
  • Cooper, S., Dann, W., & Pausch, R. (2000). Alice: A 3-D tool for introductory programming concepts. Journal of Computing Sciences in Colleges, 15(5), 107–116.
  • Crews, T., & Murphy, C. (2009). A guide to working with Visual Logic. Course Technology.
  • Flowgorithm. (2024). Flowgorithm: Flowchart programming language. http://flowgorithm.org/
  • Fraser, N. (2015). Ten things we've learned from Blockly. In 2015 IEEE Blocks and Beyond Workshop (pp. 49–50). IEEE. https://developers.google.com/blockly
  • Fraunhofer IAIS. (2024). Open Roberta Lab. https://lab.open-roberta.org/
  • Gudmundsen, D., Olivieri, L., & Sarawagi, N. (2012). Reducing the learning curve in an introductory programming course using Visual Logic. Journal of Computing Sciences in Colleges, 27(4), 10–12.
  • Harvey, B., & Mönig, J. (2010). Bringing "no ceiling" to Scratch: Can one language serve kids and computer scientists? Constructionism 2010. https://snap.berkeley.edu/
  • Kogics Foundation. (2024). Kojo. https://www.kogics.net/kojo
  • MacLaurin, M. (2011). The design of Kodu: A tiny visual programming language for children on the Xbox 360. Proceedings of the 38th ACM SIGPLAN-SIGACT Symposium on Principles of Programming Languages (pp. 241–246). ACM.
  • Matrix TSL. (2024). Flowcode for education. https://flowcode.co.uk/education/
  • MIT App Inventor. (2024). MIT App Inventor. https://appinventor.mit.edu/
  • Resnick, M., Maloney, J., Monroy-Hernández, A., Rusk, N., Eastmond, E., Brennan, K., Millner, A., Rosenbaum, E., Silver, J., Silverman, B., & Kafai, Y. (2009). Scratch: Programming for all. Communications of the ACM, 52(11), 60–67. https://scratch.mit.edu/
  • Schmitt, F.-J. (2017). Moenagade [Computer software]. GitHub. https://github.com/fesch/Moenagade
  • Scratch Foundation. (2019). Scratch 3.0. https://scratch.mit.edu/
  • Sketchware Pro. (2023). Sketchware Pro [Computer software]. GitHub. https://github.com/Sketchware-Pro/Sketchware-Pro
  • Wolber, D., Abelson, H., Spertus, E., & Looney, L. (2014). App Inventor 2: Create your own Android apps. O'Reilly.