Jun Katohttp://junkato.jp/ugv
Tweet PDF

User-Generated Variables

Jun Kato and Masataka Goto

National Institute of Advanced Industrial Science and Technology (AIST), Japan

User-Generated Content (UGC)

  • Move from the binary distinction between professional creators vs consumers
  • Driven by the novel tool & web-based communication
  • People without professional expertise can create content and share it with others

Users can express creativity with web-based tools

Twitter for short text

Web-based UI for writing short text
Platform for sharing user-generated text content

TextAlive for music videos

Web-based UI for authoring lyrics animation
Platform for sharing user-generated video content

f3.js for Internet of Things

Web-based UI for customizing IoT devices
Platform for sharing customized IoT content

User-Generated Variables (UGV)

  • Move from the binary distinction between programmers vs end-users
  • Driven by the novel IDE & web-based communication
  • People without prior knowledge of programming can propose new features and update the code

Users can contribute to improve web-based tools

UGV in TextAlive

UGV in f3.js

Streamlined Interaction Design of UGV

  1. End-users propose a new variable
  2. System updates the code according to the proposal and notifies programmers
  3. Programmers
    • accepts the proposal by implementing it
    • declines it by removing the variable declaration

Feature reqests are directly bound to the code

Prior work Collaborative Development

Social development tools by collaboration types
Direct Indirect
Real-time Collabode, Codeshare -
Async. GitHub, UserVoice, BugHerd HelpMeOut, Eclipse Code Recommenders, User-Generated Variables

Programming language-oriented collaborations


  1. Prerequisite
  2. Track code-UI relationship
  3. Find place to insert code snippet
  4. Insert code snippet for UI mockup
  5. Refresh view to show the UI mockup

0 Prerequisite

The IDE should support Live Tuning or a similar architecture that allows to share the codebase between programmers and users.

1 Track code-UI relationship

Tracking is enabled by extending GUI Toolkits

// To support UGV, each GUI container should know
// where its constructor is called
interface CodeLocation {
  filePath: string;
  row: number;
  column: number;

// GUI container is a parent of any kinds of widgets
class UGVContainer extends Container {
  private loc: CodeLocation;

  constructor() {
    this.loc = IDE.app.getCurrentContext().getCodeLocation();

    // let the 'Propose' button know the code location
    this.addProposeButton(container, loc);

  // details omitted

2 Find place to insert code snippet

Static code analysis with heuristics gives the answer

interface ParsedFile {
  filePath: string;
  ast: ASTNode;

class ProposeButton {
  // details omitted

  private loc: CodeLocation

  onClick(proposal: Proposal) {
    var file: ParsedFile = IDE.getParsedSourceFile(this.loc.filePath)
      , ast = file.ast;

    // In TextAlive, this file represents a single template class
    // that defines a particular kind of visual effect.
var node: ASTNode = this.findLastFieldDeclaration(ast);
if (node) node = node.next();
else node = this.findFirstLineOfFunctionBody(ast);
IDE.addWidgetCode(proposal, node); IDE.updateSourceFile(file); } }

3 Insert code snippet for UI mockup

Application code is updated automatically & safely

interface Proposal {
  type: string;
  label: string;
  options: object;

class IDE {
  // details omitted

  addWidgetCode(proposal: Proposal, node: ASTNode) {
    var widgetCode = this.getWidgetCode(proposal, node);
IDE.writeFile(file); } getWidgetCode(proposal: Proposal, node: ASTNode) { var varName = this.findUniqueVariableName(node); , code; code = '// @proposed' + lineBreak; code += '// @title ' + proposal.label + lineBreak; code += '// ' + this.getWidgetConstructorCode(proposal) + lineBreak; code += 'this.' + varName + ' = ' + JSON.stringify(proposal.options.defaultValue); return code; } getWidgetConstructorCode(proposal: Proposal) { var opt = proposal.options; switch (proposal.type) { case 'slider': return '@ui Slider(' + opt.min + ', ' + opt.max + ')'; case 'check': return '@ui Check()'; case 'color': return '@ui Color()'; default: return '@comment ' + opt.toString(); } } }

4 Refresh view to show the UI mockup

The current instances of the app need to refresh UIs

class IDE {
  // details omitted

  updateSourceFile(file: File) {

  updateView(file: File) {
    var container = this.app.getCorrespondingContainer(file);

Preliminary User Feedback

UGV is implemented in the following IDEs:

The following people were asked to use the UGV features:

  • 4 users without prior knowledge of programming
  • 4 programmers

Preliminary Results in a 3-Days Trial

  • 14 variables were declared
  • 11 variables were implemented
  • Communication through was successful

Analysis of the Results

3 rejections were made because ...

  • Needless Desired feature could be already achieved without the proposed variable
  • Better solution found Desired feature could be implemented more effectively with a different set of variables
  • Too difficult Desired feature was considered difficult/time-consuming to implement


  • Limitations
    • Lack of scalability
    • Limited widget layout
    • Limited kinds of widgets
  • Source code as a communication medium
  • Are tool developers adequately acknowledged?

Limitations Lack of scalability

Mechanisms for consensus building are needed

Limitations Limited widget layout

Ease of use and flexibility should be balanced well

Limitations Limited kinds of widgets

Widgets for more complex features are desired

Not in paper

Source code as a communication medium

Giving users write access to code seems like a terrible idea, especially at scale, but the very premise raises other interesting opportunities about embedding all kinds of user feedback in source.

- a PX reviewer
Not in paper

Prior work Source code as a communication medium

Not in paper

Are tool developers adequately acknowledged?

Attracting attention to code could be the first step

User-Generated Variables (UGV)

  • Streamlined interaction design for feature requests and implementations
  • Stands on top of the idea that code can be a shared medium between programmers and users
  • Enables bi-directional collaboration while
    • Live Programming is merely for programmers
    • Live Tuning is uni-directional in that programmers provide benefits to users