Lorgnette: Creating Malleable Code Projections

Title of the Paper

lorgnette: Creating Malleable Code Projections

Paper Information

• Subject Area: Programming languages, human-computer interaction design for code editors
• Keywords: lorgnette, projections, semantic interaction, programming tools, user customization, code editors, modifiable interfaces, multi-language support, model-driven engineering, visual programming

Research Background and Problem Statement

• Identified Problems and Challenges:

  1. Existing code "projections" (interactive alternative representations of code snippets) are often hardcoded, supporting only specific languages or development scenarios.
  2. Users' "syntactic interaction" with language symbols often fails to effectively comprehend or manipulate the semantic level of code expressions.
  3. Current systems supporting projections in programming environments do not allow ordinary users to flexibly create or modify projections, hindering the realization of personalized needs.

• Significance:
  Enhancing the user experience and efficiency of code editors, enabling developers to intuitively view and modify code based on semantic interaction, and lowering the technical barrier so that every developer can participate in tool innovation.

• Research Motivation and Related Work:

  1. Projections offer users the possibility to view and manipulate code in representations that align better with their mental models.
  2. Although some frameworks supporting projections exist, such as JetBrains MPS and Visual HDL, these systems are more oriented toward high-cost professional scenarios, have limited multi-language adaptability, and lack usability and malleability for end users.
  3. As modern programming gradually shifts from operational to exploratory and real-time paradigms, a dynamically customizable, cross-language extensible code projection solution is needed.

Solution

• Core Method or Solution:
  A framework named lorgnette is proposed, allowing users to customize and implement interactive code projections in their code editors. This enables the display of code snippets, different methods of data parsing, and multi-language configurations.

• Innovations:

  1. Support for Multiple Resource Types: The framework abstracts and supports projections for code text, syntax tree nodes, and runtime information.
  2. Multi-language and Language-agnostic: It supports direct adaptation to multiple languages and provides projection templates, reducing the cost of extending or migrating to new languages.
  3. Low Barrier and High Flexibility: Users can decide how to customize, modify, and use projections without always relying on developers.
  4. Support for Forward and Backward Mapping: User interaction results can be immediately mapped back to the code, enabling bidirectional updates.

• Implementation Steps and Key Techniques:

  1. Define methods for detecting and extracting resources from code snippets.
  2. Use forward mapping to transform resources into models for user interface manipulation.
  3. Utilize backward mapping to update code resources, ensuring synchronization between code and interface states.
  4. Provide projection templates to help users quickly generate common interfaces, such as forms, tables, color pickers, etc.

Research Results

• Specific Outcomes:

  • Analyzed 62 projection cases to summarize the characteristics, scope, and requirements of code projections.
  • Implemented five practical cases using lorgnette, including a color picker, Markdown table editor, regular expression visualization, variable tracking visualization, and configuration forms, demonstrating its broad adaptability.

• Comparison with Existing Solutions:

  1. lorgnette is currently the only framework supporting text, syntax tree, and runtime resources, and one of the few projection development tools fully compatible with multiple languages.
  2. Compared to other systems (e.g., JetBrains MPS and mage), lorgnette emphasizes user customization freedom, thereby enhancing flexibility and practicality.

• Experimental or Evaluation Results:

  • Demonstrated projection functionality across different languages and diverse use cases.
  • In five projection scenario tests, the framework proved capable of supporting both static content (e.g., Markdown tables) and dynamic data processing (e.g., JavaScript variable value tracking), meeting various user needs.

• Limitations and Future Directions:

  1. Current Limitations:
     • lorgnette has limited capabilities for multi-file interactions (e.g., simultaneous operations on HTML and CSS).
     • It does not yet support complex projections for entire programs (e.g., global call graphs).
     • The ability to embed document outputs has not been developed.
  2. Future Improvements:
     • Further exploration of more efficient methods for creating bidirectional mappings.
     • Support for cross-file and cross-document projection coupling.
     • Research on deep integration with collaborative programming and AI coding assistants (e.g., ChatGPT) to help developers iterate code and projections more efficiently.