Abstract and Concrete: Future of Programming

2019/02/05 — Mikaël Mayer

I recently came across a very interesting article that highlighted that, until the invention of Arabic numbers, multiplication using roman numerals was difficult. The Arabic positional number system made it much easier. It is the same for software. Programming software is difficult. Until someone comes up with the equivalent of Arabic numbers for programming, it will remain so.

This made me think profoundly. What makes it that programming software is difficult? Is it that programming languages are cryptic? Too many APIs? Complicated build tools? Not close enough to assembly language? Or too far away? But what if it's abstraction itself that is difficult?

I am a big fan of the idea of Coda that mixes spreadsheets with word-like documents and makes it possible to create text that appears based on conditions, for example. It is very nice to have a domain-specific language for computing cells as in any spreadsheets, and to be able to insert cells into a document.
However, in many office-like tools, I still miss a way to create reusable abstractions. Google Spreadsheet and Microsoft Excel give access to APIs and offer abstractions as macros, but they are no longer part of the visible document, and cannot be edited with the same nice visual interface.

Let us imagine what if, in a mocked word processor interface named MikoWord, we had access to a direct command to abstract. Can it also be a good candidate for visually developing software?

Parts in this style can be skipped.

MikoWord Tutorial

Welcome to MikoWord!

MikoWord is a word processor for webpages which will satisfy both programmers and non-programmers. MikoWord features a simple but powerful tool to abstract. In this tutorial aimed at beginners, we will explain how to use this tool by walking through several examples. We will create a rich and dynamic help page for an application named MySoft. In this tutorial, you will learn:

• How to reuse relevant pieces of information (e.g. the name of a product)
• How to partially reuse elements (e.g. formatting)
• How to repeat abstractions (e.g. introducing a list)
• How to have MikoWord infer abstractions for you.
• How to create custom user interface elements (e.g. a button).

No coding skills are required. Let’s start!

Step 1: Simple abstraction

MikoWord displays a blank page, in which you can immediately write something. Go ahead, write and apply styles to obtain:

In a regular document, every time you update MySoft’s version, you would have to update it manually everywhere. In MikoWord, it is easier. Select "MySoft 1.0", and abstract it.

Abstracting is giving a name to something concrete. If you hover over the "MySoft 1.0" that has a stripes background, in the title, you will now see that it has been assigned the name mysoft. This special style indicates that you can double-click it to reveal the formula behind it — or touch it for one second on mobile. The portion to the right of mysoft is called its content and is also like a document, meaning you can further abstract inside, e.g. the name and the version.

Note that all declarations like mysoft will be hidden when you print, publish or export it, and the background under "MySoft 1.0" will disappear. If you prefer a style other than stripes, go to Settings > Styles > Reused content and change the style.
By opening the context menu over mysoft, you could also specify to display abstractions only when they are needed during editing, depending on where your caret is. For this tutorial, we will always display them.
Now copy "MySoft 1.0" from the title, and paste it to replace "MySoft 1.0" in the document body. You obtain something like:

Note that the second occurrence of "MySoft 1.0" is now highlighted with stripes as well. This means that this occurrence is linked. Now, rename "1.0" to "1.1". You can rename it in any of the three places, and you'll obtain:

From now on, each time you will type "=mysoft" followed by a space, it will replace it with "MySoft 1.1".

Similar to spreadsheets, you can double-click on "MySoft 1.1" to display and modify the underlying formula "mysoft".

You could even further abstract mysoft's content, e.g. to extract the version number under a separate name, using the same abstract command:

Step 2: Abstract to concrete

Let us imagine that, in your document, you want to describe a set of keyboard shortcuts as cards, and then some sample scenarios on how to use them. Let us start by creating a sample shortcut table. Create a 3x2 table, remove the borders inside it, and fill it as follow:

We want to reuse this box for the other cards. Instead of just copy-pasting it, we will abstract it so that cards have the same appearance. Not just css styles, but also the same text. Select the table, abstract it, and copy-paste it to duplicate it as in the previous section. If you changed one of the values in any table, the change would be propagated to the other tables. We need to specify what values are unique to each instance. Select "Context menu" in one of the last two tables and concretize it. Alternatively, you could have selected it from the first table and abstracted it. The result is that table becomes a function. It looks like follows: Double-click (or long press) on one of the two tables to see that its formula is now table "Context menu".
Rename "Context Menu" from the last table to "Save". The change will stay on the modified table: Continue and concretize "Right-click or ALT+M" and "When caret blinks in doc", and rename them appropriately so that you obtain something like: Using this interface, if you rename "Keyboard shortcut" to "Shortcut", the renaming would appear in the other tables. Rename table to card, B1 to name, B2 to shortcut and B3 to context. It is good practice to give useful names. Alternatively, if you wanted to be able to use both names, instead of just renaming B1, double-click on it to the right of "of " and write "B1 as name" in the formula field.
Save your file. If you forget to save your file and your browser unexpectedly quits, a backup will always be available.

Step 3: Advanced abstractions

In the previous section, we saw how to define cards for shortcuts. We want to use these shortcut definitions to augment simple tutorials, by displaying a hint on every command that a tutorial uses. That way, users would not have to remember all these commands or look them up themselves.

Select the last two tables, and abstract them. Instead of inserting one more name, MikoWord detects that there is a repetition and instead suggest merging these calls (). Accept. You will then see the following result:

As you hover over the cards (or double click on it, or long press), you'll see that it uses a single formula to display it: "repeat(card,items)". If you double click on this card (or press one second on mobile), you will be able to change this formula, as in any spreadsheet; but you can also change the value as you see it.

Step 4: Intelligent abstractions

Now let's write our tutorial content. In the sequel, we only display relevant abstractions at the top. We want to display a tooltip when the user hovers "Save" that displays the keyboard shortcut. Let's add the tooltip. Select "Save" in the document, under the title, and abstract it. Select it again, and add a remark to it. As the inline pop-up for remarks appears, enter "CTRL+S" in it, as follows. Note that the remark also appears next to save. To the right of save, select "Save" and abstract it. Rename save to command, and arg to name. We now want the tooltip to be created depending on name's content. Select "CTRL+S" in the remark next to arg and abstract it. Click on the little and choose "infer". Instead of creating a new name, it will try to infer its content from the context. In this case, it manages to find a formula:

The vlookup procedure takes a table, a value to look into, an two column numbers: the first column in which to search the value, the second column the value to return to return. Once you will be more familiar with the language, you will be able to enter these formulas yourself (abstract, then choose "formula" from ).

Let us add another command in the document similar to Save. Continue to write "Open the " in the document. Copy "Save" with its tooltip, paste it after what you just wrote, and replace the command name by Context menu. The tooltip is automatically updated. If you make a mistake (unknown command), you'll see a local error:

You are now able to write a document with enriched content. Furthermore, when you will want to create a version for Mac, or localize the tutorial in another language, you will just have to further abstract over items, you won't have to do search and replace.
Moreover, if at some point you want to change a remark, such as removing Right-click or from the remark under Context menu, you can do it directly in the document; it will modify it in the source and in all other places.

Step 5: Create a button

MikoWord docs are not just regular docs, they are full apps. You can add buttons to perform some routine actions.
In a doc representing a daily notebook, we will add a button that, when clicked, inserts a title with the current date, formatted nicely.
Using the informations in step 2, add a title containing yesterday's date and a summary like below, abstract the title and name it mktitle, abstract the date and content, and name them accordingly to the screenshot: Now, add a button by clicking New Button on the toolbar. Rename the button to New Day (after you assign a click action to the button, to rename it, you will have to open its properties): Open the context menu on the button, and edit the onclick attribute — the first attribute shown. Click on "insert", copy the title you just created and paste it next to insert. Inside the button's onclick description, set today's date and rename the content "TODO". Then, select the date right next to On click and abstract it. Click on and choose the automatically inferred "formatted today's date" so that it always displays the current date: If you click on the button, it inserts a title as you would expect. However, the date in the new title will always be the present date: Let us fix that. Delete the newly inserted title. Select the date in the button and abstract it. Notice how the current date is now computed before: Now clicking the button inserts a title that will not change every day. Furthermore, do you prefer a dash instead of a colon in the title? Change it in one of the titles to change it everywhere:

Epilogue

In case you wonder, I did not write this tutorial using even an alpha version of a "MikoWord". However, I used a tool that I am developing: Editor. Editor is a local HTTP server that enables the viewer of the page to modify it, even if the page was dynamically generated. All screenshots have been dynamically generated based on a mix of document and formulas.
I generated the html content of this document using Hyde, a reversible file-to-file converter that I also maintain.
Editor and Hyde are based on my research on bidirectional programming. Together, Editor and Hyde made the development of this page straightforward.

Would MikoWord be possible? I think so. MikoWord features the idea of displaying the tree of a program as an HTML tree, after a partial and forgiving evaluator ran on it. If you are interested by this project, follow me on Twitter. If you are interested to contribute, send me an email.

---

This work was supported by Swiss National Science Foundation Early Postdoc.Mobility Fellowship No. 175041