Web based projectional editor

One recurring topic I heard is the need for a web-based projectional editor.

From what I am seeing Jetbrains MPS is a reasonably good product, but users would like to have a web alternative.

Why?

  • To not have to handle installations and updates of applications on the users’ machine
  • To facilitate collaborations (the expectation is that a web-based LW will have some collaboration mechanism similar to Google Doc)
  • To integrate with existing web applications

There are web-based platforms for textual editors, like Monaco (editor only) or Theia (IDE), but I could not find anything with that level of maturity for projectional editors.

I am following with great interest ProjectIt but it seems to be still in the alpha-stage (@jos.warmer please correct me if I am wrong).

JetBrains seems to be working on some web version of MPS but there are no definitive public plans. There were rumors of a web-based version of MPS for a looooong time, so I would not expect this to happen soonish.

So I was wondering if you are aware of other projects, if you are planning to build anything in this area, if you have any idea on this.

I would love to clarify my vision on this and possibly discuss collaborations around this

5 Likes

Hi Frederico,

You are quite right about ProjectIt, it is nit ready for prime time yet. However, an extra person has started working on it, so I expect it to evolve faster from now on.

On the MPS Users Meeting last October in Amsterdam a presenter from Jetbrains said that it would take a few years for their projectional web editor to become available. No explicit date was mentioned, but it won’t be here soon.

1 Like

This is great news to hear!

There have been unsuccessful/failed/aborted attempts in the past, such as:

  • itemis’ Convecton: looked promising, but seems to have petered out, maybe due to lack of funding/actual client projects
  • My own Más: see port-mortem
  • Más was based on Martin Thiede’s Concrete Editor
  • There’s probably a few that could be considered to be Web-based projectional editor, but might be somewhat niche, or domain-specific (!).

To me, it seems that a challenge of Web-based projectional editing, as opposed to having something running on your own machine instead of in the browser, is the integration with the rest of the software development. Do you trigger downloading a ZIP of generated sources from the editor? Or does your IDE have some plugin to trigger generation, and download, and integrate the generated sources? Or does everything deploy automagically in the Cloud™? That’s all a bit less straightforward than having a language workbench running on your machine.

2 Likes

Hi Meinte, yes a read your post-mortem and I read it again yesterday.

Your point on integration was the one that struck me particularly. After all a projectional editor is… an editor :smiley: and languages are just a way to capture knowledge but then one would need a way to do something with that knowledge.

Yes, I see the fascinationion of the purely cloud thing, but I guess that route, while promising, would require a lot of investments.

I also liked the comparison with LucidChart because lately I am using it. I am using tools like Notion, Trello, and LucidChart to express concepts that I would like to connect. At the moment I am not connecting LucidChart to anything else because it does not capture things with strong semantics (as far as I understand), however I am extracting data from Trello and import it on Notion, to get an idea of my boards, I am extracting data from Notion to generate reports and proposals. In a way I am using Trello and Notion as editors. The content is then consumed online (I read what I wrote) or extracted through APIs and processed a little bit by Python scripts I run on my machine or on heroku. This is a poor-man alternative to have a fully comprehensive cloud solution.

I wonder if one could build a web projectional editor that makes data accessible as JSON (with the opportunity of monitoring that JSON for changes). That data would then be processed externally. Eventually one could enrich the LW with means to build interpreters or generators, but it would not be necessary at the beginning.

Another part of interoperability would be the ability to import data. From databases, from APIs, from files: I would expect this thing to be frequently used to define processes and calculations, which some may want to run on data defined in other systems.

The problem as always is the investment necessary to make something which is not a toy. This combined with the fact that there is so much uncertainty can be paralizing. I hope that by discussing with others and learn from the different attempts one of us could build enough confidence to build something great. My wildest dream would be also to see some components be shared (e.g., the code to persist and process models).

I think in this sense your post-mortem is extremely valuable. I would like also to understand if we could learn some lessons from Convecton

1 Like

Hi everyone.
To this respect, at Metadev we are working in a project codenamed Meow! (Model Editors On the Web). This will provided some building blocks to create web projectional editors.
Still on alpha but we will release something very soon to be ready to presented at http://langdevcon.org/

Regards,
Pedro J.

4 Likes

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.

Should have added that this looks like this in the browser:
image

The idea is now to enrich the Cells the user produces via the Workbench functions (e.g. Wb.propertyCell) by some default behavior. For example, that input is automatically reflected back to the underlying model (e.g. “name” of an Event). It is not hard to update the underlying model with my current solution when the user types in a field, but it is currently cumbersome. I’d like to get it so that behavior like that is encapsulated in a “propertyCell” so that users would get it for free.

Also pending is behavior like using the arrow keys up/down to navigate between cells within a collection. But it’s a start.

Elm is really cool, and indeed intrinsically suitable for implementing projectional editing. Have you looked at Mint? Might also be useful.

The challenge I had with Elm was that everything is in 1 big, shared MVC cycle, and that modularisation can become a bit trickier because of that. I can also image that crafting generic components that view, and update items in the model/AST is not trivial because of that.

I am curious, what is Mint? Where can I found out more about this?
The name is a bit ambiguous :slight_smile:

https://www.mint-lang.com/
I haven’t looked into Mint myself yet. I agree with the concerns about modularity, it’s an ongoing topic of discussion in the Elm community. But it doesn’t concern me as much to not toy around with this idea I mentioned.

Thank you for the link!

Thanks for post-mortem writeup on Más. Very valuable experience!
For the integration part, I wonder have you tried to treat your modeling environment in the cloud as “another developer” who works on a dedicated git branch and push the generated code to the shared git repo? Then you can merge this branch to the mainline with manually written code.
I had some good experience with this approach in integrating generated code with the manually written.

ProjectIt can already make the model available as JSON, technically that is no too hard. The challenge remains to figure out which components are going to do something with it and where. And when they are done, how are their results being reported back to the user behind the editor?

Hi Pedro, looking forward to see Meow at LangDev.

Jos

3 Likes

Glad you liked it! :slight_smile:

I didn’t think of that approach! Could certainly work, as long as CI is set up well.

3 Likes

I think we need exactly that: building blocks we can share to bring down the cost of building web projectional editors. In this way we can have multiple attempts until something emerges as a solid solution.

I was thinking about this, and reflecting on the fact that the JSON that is made available to the systems outside the editing component could be different from the one the editing component may want to store.
For example, if I have a property “ID” I want probably to export a JSON where there is a key “ID” and the associated value. However at the same time I may want to have the possibility to rename “ID” into “name”, without having to change the models. So internally I would store a JSON using as property UUIDs as keys, and when exporting for consumption outside the editing environment I would put the name of the property in the JSON instead of the UUID.

Does ProjectIt do something similar? Do you think it would make sense?

Indeed, we need to talk and update each other. :wink:

ProjectIt currently has very limited functionality at the storage side, so it cannot do any of this. But yes, it is useful to be able use the model in a transformed state for other purposes.