Web based projectional editor

[angelo]

Are we starting a project here to improve ProjectIt?

[marcus.munzert]

At Generative Software we are currently developing a web-based modeling tool, the „Virtual Developer Modeler“. With it, we plan to replace our older textual modeling tool, which is based on EMFText (similar to Xtext).

The new tool doesn‘t simply move textual modeling to a web browser but is a „real“ web application (no parsing, projectional editing). It‘s made for developers as well as non-technical users. Code generation is not part of the modeling tool itself. Code generators that run on Virtual Developer are going to read models by making webservice calls to the modeler’s model repository.

One of the core functionalities is to let you define your own DSLs and manage models in a generic way. If required, we can easily extend the tool with DSL-specific features to create new, more capable tools. A nice detail: The tool itself and its extensibility mechanism are developed in a model-driven way.

A blog post on the site MOdeling LAnguages helped us in finding a JavaScript library to be used to visualize models. A thank you goes to Jordi Cabot for running the site and to Hamza Ed-douibi for writing the post.

We plan to have a beta version of the web-based modeling tool available by summer this year. There is not yet any information about this on our website.

[rafael]

Sorry for the late reply, Meinte, just joined the community.

@meinte.boersma

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.

Those questions apply to any web-based model-driven tool that generates code, even if you use text or graphical editors instead of projectional ones, right?

Just as an example, in Cloudfier, everything (validation, interpretation, code generation) runs remotely, but thinking of cases where people may need the code locally as well (because they combine manually-written and generated code, or they want or have to use local tooling for “deploying” the code), I implemented an experimental feature that lets you download the generated code as part of a build step, which can then be integrated into the regular development workflow. That works for local scenarios (command-line and IDE), and for CI as well.

I guess one thing that is important is that your desktop-side integration works within the tools developers in the target language are familiar with, or at least integrates into their workflow smoothly. Since we are just generating files, and most development tools work off of files, that should not be too hard.

One simple-ish solution would be to run an unobtrusive daemon that checks for changes to the model, triggers the generator, fetches the generated code, and explodes it somewhere in the local file system where the desktop development toolchain can see the files. Since the bulk of the work is being done remotely, this should not cause any noticeable spikes in CPU usage. And all those features are necessary for the web-based workflows anyways, all you need to do is expose them via an API to your client, you would not have to reimplement or adapt them to work locally.

[meinte.boersma]

Hi Rafael, Glad you could join!

@rafael

Those questions apply to any web-based model-driven tool that generates code, even if you use text or graphical editors instead of projectional ones, right?

Well, yes and no

Yes: as soon as you “go Web”, stuff’s happening that’s not really happening on your own machine anymore. Integrations with locally-running dev environments through (indeed: preferably automatically!) downloading generated code is certainly a possibility that can be made to work well! I never achieved the “working well” stage for my try as part of Más, though.

No: you can probably integrate projectional editing into a platform like Theia/Gitpod.io well enough to have both “on the Web” and “integrates with my dev env” at the same time, since it’s the same thing.

No: the promise and allure of low/no-code platforms is that you don’t need to integrate with a local dev env at all.

[digital-ember]

I created another video, showing some new features and some hands-on development, extending the graphical projection:

It’s easy to get lost in playing around with SVG rendering, so what would really help me is if this community could suggest some other languages I could try to build with what I currently have. I plan on adding a basic tabular projection next, but if some of you have ideas for other languages I could try to build first, please let me know, cause I think deriving features from specific use cases is a reasonable approach given the current state I’m in.

Thanks!

[rafael]

Pretty cool video, amazed by how nice Elm code tends to look, and by your ability to live code fluently like that! That is a skill I would like to pick up one day, my code writing style is based a lot on trial and error (that is why I much prefer and rely on statically typed languages, and am a big enthusiast of TDD and automated tests in general).

[digital-ember]

Thanks for the kind words. Truth be told, I tried the live-coding part before I recorded it. Also, I’m using my own API, which makes it easier to just write out the code.

Usually, Elm applications look a bit different, so don’t consider this a general Elm tutorial. Creating regular web frontends with Elm is even simpler than what I show in my videos, I’d say. In any case, if you like statically typed languages, I strongly recommend checking out the Elm guide to get a feeling for the language design. Thanks to its type system and great compiler, learning Elm is a delight.
I’d say especially if this is your first functional language. It’s like a gateway drug for me.

[pjmolina]

Just added my yesterday demo here.
A pity not to see you live @jos.warmer

Looking forward to have your feedback.

[eugenschindler]

Hi Robert,

Nice video! What do you think of making something like a colored petrinet (UML activity diagram, https://en.m.wikipedia.org/wiki/Activity_diagram) where it’s possible for each activity/action node to be a complete activity diagram-based specification, i.e. when you click an activity, this will give you again an activity diagram to specify that activity.

[digital-ember]

Hi Eugen,

Funnily enough, in my new job I just started we are looking at modeling economics, so petrinets are also part of what we are considering.
Still, since my time has become rather limited ever since this month, I’m not sure when I will get around to try out something like this with my prototype.
It is, no doubt, an interesting suggestion.

Robert

[digital-ember]

Hi all,
I was eating my own dog food to create a first iteration of debugging tools for my projectional web editors with Elm:

Looking forward to feedback. Do you think views like this can not only help to debug your projection, but also be used to teach the technology?

Best,
Robert

[alessio.stalla]

I’ve seen people use D3.js for this kind of stuff rather than raw SVG. But I have no hands-on experience with it.