← Back to all selected work
GWTJavaBlocklyUiBinderFigmaGSoC 2025

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.

Organization MIT App Inventor
Role Google Summer of Code 2025 Contributor
Timeline May 2025 - Sep 2025
6,492 LOC Code Modified
59 Files Files Preserved
6 Merged PRs Additional Fixes
Winter Release Release

Context & Engineering Challenge

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.

Hard Constraints

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.

System Architecture

MIT APP INVENTOR MOBILE INTERACTION ARCHITECTURE Phone Canvas Blockly Visual Workspace Pinch · Pan · Drag Touch Gestures Bottom Tab: Palette | Canvas | Props Adaptive GWT UiBinder Templates Preserves single codebase compatibility for winter release (6,492 LOC modified) Blockly Touch Coordinate Normalizer Translates multi-touch pinches into SVG viewport matrix transforms Contextual Drawer Controllers Property panels and hierarchical project tree expand on demand

Architecture Decisions & Trade-offs

Adaptive GWT UiBinder Architecture

Re-architected the legacy GWT UI with responsive UiBinder templates that fluidly collapse multi-column desktop toolbars into contextual mobile drawers.

Alternatives Evaluated: Considered writing a standalone lightweight mobile web client; rejected because maintaining two divergent visual programming runtimes was unsustainable for maintainers.

Bottom Tab Bar Navigation Model

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.

Alternatives Evaluated: Evaluated hamburger drawer menus; rejected because block editing requires rapid toggling between properties and the canvas.

Blockly Touch Gesture Support

Engineered touch gesture handlers for smooth block drag-and-drop, pinch-to-zoom, and inertial canvas panning, preventing mobile browser scroll interference.

Alternatives Evaluated: Relying on default mobile browser zoom; rejected because zooming the whole viewport breaks coordinate mapping in SVG block workspaces.
RETROSPECTIVE & FUTURE DIRECTIONS

What I would do differently

TODO: Divyanshu to reflect on future layout optimizations (e.g. collapsible hierarchy trees, gesture customization).

Proof, Code & Documentation

GSoC Final Submission Summary ↗