{"id":44,"date":"2006-06-24T18:41:34","date_gmt":"2006-06-24T23:41:34","guid":{"rendered":"http:\/\/alarmingdevelopment.org\/?p=44"},"modified":"2006-06-24T18:41:34","modified_gmt":"2006-06-24T23:41:34","slug":"alice-in-subtext-land","status":"publish","type":"post","link":"https:\/\/alarmingdevelopment.org\/?p=44","title":{"rendered":"Alice in Subtext-land"},"content":{"rendered":"

The Subtext UI sucks. One of the biggest problems is linking: the welter of compasses and vectors is bewildering. We need something that is much easier to read. I have been thinking about an approach that borrows from Alice<\/a>. <\/p>\n

Here is a screenshot of an Alice method:<\/p>\n

\"Alice<\/p>\n

Alice is a conventional OO language with a visual syntax based on nested “tiles”, which are just small forms with labels and fields. Squeak Etoys<\/a> is similar but less slick. Alice uses a visual syntax that directly maps to standard language syntax. Nested tiles map to nested expressions. Sequences of tiles (as in the “Do in order” tile above) map to statements in begin-end blocks. In both of these cases, what are explicit links in Subtext are implicitly specified by physical adjacency. In other words, syntax.<\/p>\n

Let’s face it: syntax is a simple and intuitive way to represent structure. But a fundamental principle of Subtext is to avoid syntactically encoding programs so that their semantics are explicit and immediate. It should be possible to use syntactic techniques as a visualization in the UI instead of as a representation of the source.<\/p>\n

Here is factorial in Alice:<\/p>\n

\"Alice<\/p>\n

Here is factorial in Subtext:<\/p>\n

\"Factorial<\/p>\n

Here is a new view of factorial:<\/p>\n

\"New<\/p>\n

Every box (tile) corresponds to a non-leaf tree node. Labels are black, and links are blue. Values have a gray background. Every function has a primary input argument with a blank label, and a primary output argument with the label “=”. There are three techniques used to represent links. The first is to represent a link to an input argument by preceding its name with a “$”. A link to the unnamed primary input argument thus becomes just “$”. This is a familiar convention from scripting languages.<\/p>\n

The second technique for representing links is to vertically stack functions which are chained from output to input. The chain from Subtract->Factorial->Multiply is an example of this. Thus what would normally be written as “H(G(F))” becomes the stack F;G;H. One could argue that this is more readable than the parenthesized notation. Note that these vertical stacks will work nicely for histories of actions too.<\/p>\n

The If function is an example of the third technique. It has a secondary input argument (else) that is linked to another function. The If box is layed out vertically, with the linked functions stacked to its right, and enough vertical white space added to avoid overlap. Note that this layout is automatic. It is based on determining a spanning tree within the graph of all intra-function links.<\/p>\n

This layout provides a natural reading order. Normally we read from left to right on a horizontal line, then continue from the left side of the next line. Reading the Factorial function in this way gives you a sort of linear narrative of executing the function. Instead of using parentheses to stack up computations, the text is moved to the right of a vertical tile. Function tiles may be layed out horizontally or vertically, but maintain the internal reading order of their contents.<\/p>\n

Here is a variant, in which the variable references are replaced with explicit arrows. Perhaps the vertical stacking reduces the clutter enough to make these arrows acceptable.<\/p>\n

\"New<\/p>\n

In fact, maybe the vertical stacking is all we need, and horizontal layout to replace parenthesized nesting is not needed:<\/p>\n

\"New<\/p>\n

Here the pink regions indicate consecutively linked components. This layout is simpler than the previous ones, at the cost of making the data flow harder to comprehend.<\/p>\n

What do you think?<\/p>\n","protected":false},"excerpt":{"rendered":"

The Subtext UI sucks. One of the biggest problems is linking: the welter of compasses and vectors is bewildering. We need something that is much easier to read. I have been thinking about an approach that borrows from Alice.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-general"],"jetpack_shortlink":"https:\/\/wp.me\/pfEnU-I","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=44"}],"version-history":[{"count":0,"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=\/wp\/v2\/posts\/44\/revisions"}],"wp:attachment":[{"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alarmingdevelopment.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}