Syvis

Syntax visualization instead of syntax highlighting.

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

---

Related Work

Misc

• Barista - Implementation toolkit for AST editors.
• Citrus - Programming language and user interface toolkit. (https://youtu.be/YIlYJCwIXLs)
• Codemirror Blocks - Drag-and-drop editing for functional languages.
• CodeWorld - Educational computer programming environment using Haskell.
• Dhall PureScript - Structural editor for Dhall written in PureScript.
• Future Programming Webassembly Life After JavaScript
• Glance - Visual syntax for Haskell.
• Lamdu -
• Mbeddr
• Moonchild - Projection editor (https://vimeo.com/97711824).
• Programming Beyond Text: The Parsing Problem
• PureScript Datagen - Generating data types in a live-coding environment.
• Treeline - Develop backend apps in your web browser.
• Unison
• Braces be gone - Moves braces in Java to the edge of the code.

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

• Working Copy - A Git client for iOS that clones, edits, commits, pushes, …
• Ask HN: Who writes code on smartphones?

Code Visualization

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

Talks

• The Future of Programming

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

• Luna
• Sifflet
• Autodesk 3ds Max Creation Graph
• Skov

Links, Papers and Resources

• 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

• Andres J. Ko - Associate Professor at University of Washington.
• Chaim Gingold - Turns technology into delightful experiences and transformative tools.
• Monoid Musician - Developer of [purescript-datagen].
• Patrick Dubory - Programmer and interaction designer based in Munich.
• Paul Chiusano - Founder of Unison.
• Steve Krouse - Author of Future of Coding.

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