Adrian Sieber

Syntax Visualization Instead of Syntax Highlighting

— 1240 Words — 7 min

A graphical representation of code.

Bring Javascript code reviews to the next level. Stop dealing with badly formatted syntax and start reasoning about semantic.

  • Formatting independent
  • Partially language agnostic
  • Better overview
  • Simplifies reasoning over code

Usage

npm start -- path/to/javascript/file.js

Development

Start development environment:

docker run \
  --interactive \
  --tty \
  --volume "$PWD":/syvis \
  --rm \
  node bash

chokidar source/styles \
  --initial \
  --polling \
  --command 'stylus < source/styles/main.styl > public/screen.css'

User Interface

  • muuri - Responsive, sortable, filterable and drag-able grid layouts

Advantages Over Normal Code

  1. Easier readable - Humans are made to recognize visual patterns.
  2. Customizable
  • Consumer is not dependent on the author to choose appropriate formatting
  • Uncommon formatting preferences can be satisfied
  1. Less error prone - Erroneous and dangerous code can be additionally highlighted
  2. Better storage possibilities
  • Code could be stored and transmitted in a minified format (all insignificant whitespace removed)

Abstract

In most programming languages the semantic meaning of a program is disconnected from the formatting of the code and the naming of variables and keywords. This means semantically equivalent code can be written in a vastly different textual representations. This poses problems in terms of readability and understandability of code. Even minor modifications of punctuation or formatting in comparison to a developers familiar style can drastically decrease the performance. In order to mitigate these problems I propose to visualize code in a graphical and deterministic way. Instead of relying on the author of the code to format it in a acceptable manner, each developer can choose a visualization of their liking. This has the potential to decrease the error rate and increase the development speed of programmers.

Future Work

  • Touch based
  • Drag and drop

Misc

Visual Programming

  • Alice - Object based educational programming language plus IDE.
  • Node-RED - Flow-based programming for the Internet of Things
  • Greenfoot Frames - Frame based editing environment.

Mobile Coding

Links on how to code on mobile/touch devices

Code Visualization

  • js2flowchart - Convert JavaScript code into SVG flowchart.
  • flux - Visualize Haskell programs as data-flow diagrams.

Talks

Online IDEs

  • CodeSandbox - Online editor that helps you create web applications.
  • observablehq - Interactive notebooks for data analysis, visualization, and exploration
  • Onelang - Cross compile/transpile code to several languages online.
  • runkit - Interactive notebooks with very version of every npm package pre-installed.
  • meemoo - Online flow based creative tool maker.
  • livecode - Develop apps "live", using a visual workflow language syntax.
  • touchdevelop - Adaptive editor with support for drag & drop but also normal code.

Visual Programming Languages for Haskell or Haskell-like Languages

  • Visual Haskell
  • Viskell
  • FunBlocks
  • The Gem Cutter – A Graphical Tool for Creating Functions in the Strongly-typed Lazy Functional Language CAL (pdf)
  • Vital (archive.org link)
  • A Visual Programming Environment for Functional Languages (pdf)
  • https://github.com/pkamenarsky/typedraw - Visually describe Haskell/Purescript/Elm types

Other Functional Visual Programming Languages

  • Instant playful access to serious programming for non-programmers with a visual functional programming language (pdf)
  • The “Physics” of Notations: Towards a Scientific Basis for Constructing Visual Notations in Software Engineering* (pdf)
  • I know what you did last summer: an investigation of how developers spend their time (pdf) (papers that cite it)
  • Evidence-based programming language design
  • Language design for programming reliability

    semicolon as separator is about ten times more prone to error than semicolon as terminator

  • Code Bubbles - Rethinking the User Interface Paradigm of Integrated Development Environments.

People

More Resources

  • https://github.com/ivanreese/visual-programming-codex
  • https://github.com/hypotext/notation
  • http://chaim.io/download/Gingold%20(2017)%20Gadget%20(1)%20Survey.pdf
  • http://blog.interfacevision.com/design/design-visual-progarmming-languages-snapshots

TODO

  • Search for more information about "Projection editor"
  • Checkout marco röders project "codb"
  • https://stackoverflow.com/questions/26848419/syntax-highlighting-with-text-style-instead-of-colors
  • https://softwareengineering.stackexchange.com/questions/87077/how-can-a-code-editor-effectively-hint-at-code-nesting-level-without-using-ind
  • jGRASP
  • https://harc.github.io/seymour-live2017
  • lively.openComponentInWindow('my-component')
  • lively.html.registerButtons
  • Make histogram of line lengths => find 90% percentile and use for formatting
  • Hierarchy of code interaction:
    1. Reading
    2. Patches (e.g. change a string)
    3. Minor changes (e.g. write a function)
    4. Major changes (e.g. restructure code)
    5. Create a new project => Code editor should be optimized for this interaction pattern
  • Minimap
  • Feature flags
  • http://www.esterel-technologies.com/products/scade-suite/software-prototyping-desgin/scade-suite-advanced-modeler/
  • https://www.ansys.com/products/embedded-software/ansys-scade-suite
  • https://blog.janestreet.com/putting-the-i-back-in-ide-towards-a-github-explorer/
  • http://futureofcoding.org -
  • https://codeocean.com - cloud-based computational reproducibility platform
  • http://glench.github.io/fuzzyset.js/ui/ - A Human-Readable Interactive Representation of a Code Library
  • http://penrose.ink/ - Create diagrams by typing mathematical notation in plain text.
  • https://github.com/SamyPesse/codemirror-widgets
  • https://github.com/LivelyKernel/lively4-projectional-editor
  • http://bl.ocks.org/jasongrout/5378313

If you have any comments, thoughts, or other feedback feel free to write me @AdrianSieber. Thanks for your help! 😊