Modeling on the web. 2020.04.02 Demo

Language Workbenches
1

Hi everyone!
Sharing here the materials we presented on 2020.04.02 about Web edition of models.

Tools:

Cheers,
Pedro J.

4 Likes
2

Very good videos.
I really like the “Catalogue” tab in Quid in particular, having the reference at your fingertips at all times is great, I think.
You might have explained that in another topic before, but what tools are you using to create the grammar for the language on the left, and the corresponding interpreter?

3

Thanks @digital-ember (Robert)!
Quid is implemented using Angular/TypeScript.

  • Grammar is implemented with pegjs + ts-pegjs
  • AST with Essential for TypeScript.
  • Underlaying code editor is Monaco
  • The interpreter is just TypeScript code visiting the AST rendeing HTML + JS on the right part
  • More details on Quid docs.
2 Likes
4

Thanks for the demo, Pedro!

I really liked many of the ideas around Quid. The UI DSL is quite nice, and reminds me of QML, another UI DSL I like (too bad the tooling is Qt-centric).

My main question about Quid was about data-driven widgets and schema/domain model integration: is there a way to bring an existing domain model or data schema or back-end API into Quid so I can create data-driven UI elements easily? Something that allowed a UI developer to reuse effort already put in domain analysis, often already materialized with fidelity by a back-end API, and just make UI-centric choices such as layout, what to emphasize, what to hide, how to navigate between “screens” etc?

5

Thanks @rafael
We used Quid in an industrial project for generating the 75% of the UI for a US investment bank application with Everis (an NTT Data company now).
For them, we extended the Quid model with:

  1. A second DSL to import service definition contracts in OpenAPI/Swagger.
  2. A mapping DSL to bind data from/to services to UI and back to send data to services.

With this extended model we were able to generate the code for its platform: C# + ASP.NET + KendoJS UI components.

A second path it can be taken also is avoid code-gen at all and embrace full model interpretation.
Quid Interpreter can be used to render the UI on the fly. Extensions can be added to integrate the services and the binding of data.
Style on the other hand is totally customizable providing your own CSS file overriding the default styles.

Navigation: extending the DSL to express pages and links (actions) you can bind conditionally or not to buttons, links, responses to backend, etc.

2 Likes