Design code editor to create and test scripts

The data integration platform did not have a code editor so I conducted research with developers as well as analyzing existing code editors, particular VS Code to identify all use cases. We then pared down to the most critical ones.   

Objectives

  • Provide robust code editor in product to keep developers on task, rather than forcing them to use an external code editor.  
  • Raise awareness of vast array of templates and apps to get users integrating right away.  

Challenges

  • Developers are used to the robustness of editors like VS Code, so this editor needed to cover a lot of the use cases that were important to them. 

Use cases that we implemented 

From a huge list of use cases, we pared down to these use cases:

  • Provide IntelliSense prompting to reduce errors and frustration. This would bring forward matching fields and descriptions based on what the user typed.
  • Handle multiple JSON data formats (single record, array of records, or record batch)
  • Automatically format code (auto-indenting, spacing)
  • Automatically close tags and handlebar expressions
  • Highlight paired parentheses, closing tags, handlebar expressions
  • Linting. Shows formatting and code syntax issues.
  • Provide built-in help panel for fields, functions, etc.
  • Search within code, find and replace
  • In-line error indicators with hover over for error messages
  • Highlight paired parentheses, closing tags, handlebar expressions
  • Code formatting
  • Different layouts (vertical, horizontal)