case studies / MIT App Inventor
Mobile-Responsive Layout for MIT App Inventor
Transforming a desktop-only visual programming IDE into an adaptive mobile experience across 6,492 lines and 59 files.
metrics & scope
context & constraints
MIT App Inventor empowers millions of students globally to build mobile apps using visual blocks. However, the authoring environment was strictly optimized for desktop screens with a minimum width of 1280px. Students without desktop computers were locked out of developing apps on their phones and tablets.
Every single core authoring capability (Project Dashboard, Designer canvas, component properties, and Blockly workspace) had to be preserved without branching into a divergent mobile codebase.
decision log
1. Adaptive GWT UiBinder Architecture
chosen design: Re-architected the legacy GWT UI with responsive UiBinder templates that fluidly collapse multi-column desktop toolbars into contextual mobile drawers.
rejected alternative: Considered writing a standalone lightweight mobile web client; rejected because maintaining two divergent visual programming runtimes was unsustainable for maintainers.
2. Bottom Tab Bar Navigation Model
chosen design: Prototyped the mobile interaction model in Figma first, introducing a mobile-first bottom bar that switches between Palette, Viewer, and Properties without sacrificing viewport canvas.
rejected alternative: Evaluated hamburger drawer menus; rejected because block editing requires rapid toggling between properties and the canvas.
3. Blockly Touch Gesture Support
chosen design: Engineered touch gesture handlers for smooth block drag-and-drop, pinch-to-zoom, and inertial canvas panning, preventing mobile browser scroll interference.
rejected alternative: Relying on default mobile browser zoom; rejected because zooming the whole viewport breaks coordinate mapping in SVG block workspaces.