Web based projectional editor

Language Workbenches
7

I’m currently toying around with an idea to use the Elm programming language and The Elm Architecture (TEA) to build projectional editors for the Web.
This idea is in it’s infancy for many reasons, not least since I’m not an expert in Elm nor do I know much about web development.
Notice that I focus on just building projectional editors for the web and don’t make any attempts (yet) to build somehting as sophisticated as a language workbench (nonetheless I decided to call my module Workbench right from the start, so there’s that…)

The reason why I look into Elm is because one could argue that TEA by itself inherently creates projectional editors.
An application written in Elm always consists of three core parts:

  • Model
  • View
  • Update

The idea is that the browser always renders the current model by means of the view transformation. the Update part takes care of handling events emitted by the browser / the Html by receiving messages the model is interested in receiving.

Besides, the language has some nice properties like no runtime exceptions, great performance, and JavaScript interop. The fact that it is a statically typed, functional language with roots in ideas of FRP also seems to be a plus in my opinion in order to build projectional editors.

Not sure if this helps or not, but to give you a first impression how one can define a model and a editor in using my current Elm package “Workbench” (I literally starting working on this two days ago) here is some example with a partial state machine model:

import Workbench as Wb


-- MODEL (just a partial state machine atm)

type alias StateMachine =
  { events : List Event
  }

type alias Event =
  { name : String 
  }


-- MAIN

main =
  Wb.tool editor update init  


init : StateMachine
init =
  { events = dummyEvents
  }


-- EDITOR

editor : Wb.Runtime -> StateMachine -> Wb.Cell
editor runtime sm =
  Wb.makeVertColl 
    [ Wb.constantCell "events" 
    , Wb.vertColl (Wb.propertyCell .name) sm.events 
    , Wb.constantCell "end"
    ]


-- UPDATE
  
update runtime sm =
  sm


-- HELPERS

dummyEvents : List Event
dummyEvents =
  [ event "doorClosed", event "panelClosed" ]

event : String -> Event
event name =
  { name = name }

This code might look alien to people not familiar with the Elm syntax. The important part is that I currently have a function in my Workbench module called “tool” where users can pass their three ingredients according to the Elm Architecture:

  • Model (init function): just initializes a dummy model at the moment
  • View (editor function): uses other functions of the Workbench module to produce an editor
  • Update (update function): idle atm, but supposed to look into the “runtime” and possible an additional argument to react to events and update the model accordingly.

If this work sparks any interest for some of you, feel free to ask questions.