balzss / touchpl

Visual syntax optimized for displaying source code on handheld devices

touchPL

Visual syntax optimized for displaying source code on handheld devices. Try it out here.

Why?

This is the first part of my work-in-progress touch based code editor/IDE. It's a visual syntax for JavaScript.

The goal is a code editing environment where the creation and the manipulation of the code is done through a touchscreen on a vertically oriented device (usually smartphone).

The majority of this project only exists in conceptual form but I needed some feedback on the visual representation so I created this demo sandbox.

The syntax implements almost all the ES5 features with the exception of: debugger statement, labeled statement, exceptions, do while loop and sequence expression.

How?

The code transformation is done by parsing the js code to an abstract syntax tree (AST). I'm using acorn to that but it should work fine with every estree compatible parser generator.

The generated AST is a list of js objects wich is given to a vue app that I created custom components for to generate HTML based on the nodes. After that it's just the matter of CSS to have it displayed the way I want.

If you want a more in depth view of the process you may consider checking out the source code.

List of the libraries being used:

• ace editor for the code editor on the demo page
• acorn for the js to ast generation
• vue for generation HTML from the AST
• I also used quite extensively the astexplorer.net to help me construct the AST -> HTML bit of the app

Other

• If you have any idea, suggestion, request or critique please open an issue
• You can also contact me at [email protected]
• Licensed under the GPLv3

touchpl's Issues

Feedback

Hey, I saw your demo on Reddit and I'm really excited to find other people interested in visual programming languages.

First off, I think you might enjoy this curation of visual programming languages. I can see some similarities between what you've built and some things that have been built in the past.

As for your actual design and implementations, what is the actual goal here? why do you want to visualize your code?

Your demo is less concise and arguably harder to understand that the plaintext code example you provided. But perhaps you are intending to visualize something that I'm not aware of. I would think hard about this question because that should dictate and guide your design.

In my own experience with this stuff, I'm most interested in providing a visualization that presents the mental model that I have in my head for how a program works. That's still pretty vague, but it gives me inspiration to think about.

One thing I would consider is creating a declarative representation that inverts the AST and provides more of a flow-based visualization. That is, rather than represent the function add = (x,y) => x + y as a LISP-like syntax tree with inputs at the right and outputs at the left, try inverting it so it reads left to right with inputs on the left and outputs on the right. Max, Audulus, Antimony CAD, and a variety of other programs have a similar concept. The problem I've run into is that things get quite a bit more complicated when you introduce stateful impure functions.

Lastly, I would consider creating a direct manipulation interface where you can interact with the visualization to produce changes to the code. If you use Typescript, you can use their language api so that you can validate manipulations of the interface and surface type errors.

Anyways, thats enough for now. I'm curious to see where this project leads!

Cheers,

Chet