4 ms·

Pretty cool. Coincidentally I just spent the last couple days implementing configurable JSON-serialized rules in our app. The bigger part of the challenge for

Pretty cool. Coincidentally I just spent the last couple days implementing configurable JSON-serialized rules in our app. The bigger part of the challenge for us was coming up with a human-friendly UI for defining the rules.

thom_nic 10y ago
Been considering the same problem here - how to allow some sort of user-defined rules/ logic flow? The UI is indeed more difficult to (well) do than the data representation of said rules. Anything you can share?
- ilaksh 10y ago
  Look into the business process management, workflow engines, projection editors (Intentional Domain Workbench).
- existencebox 10y ago
  It's funny this discussion comes up now, since I've been working on this exact same problem for an odd week on and off now. Building the syntax, interpreter, serializer/deserializer took a day. Writing the JS to render it? Still working on it. (largely hindered by my being a backend eng masquerading as a terribly incompetent frontend web dev) My approach however was to treat it as a literal syntax tree. we can represent trees reasonably well graphically, and if you connect the blocks sensibly you can make the visualization even flow well enough. Things start to decay past certain levels of depth; and I've addressed that with modularity. A tree can be "named" and become a single node within another tree. (yes yes rewriting programming languages badly or something). Thus far the biggest problems I've had with this approach have been primarily just learning the words I need to use to search for the right concepts in web-UX space; I've actually been pretty damn happy with the view. Tech wise, just a grid, jquery, bootstrap.
- eschutte2 10y ago
  Sure, here's a screenshot: http://jsreports.com/blog/wp-content/uploads/2016/10/conditional-rules.png http://jsreports.com/blog/wp-content/uploads/2016/10/conditi... This does conditional formatting for a report designer. We thought a lot about how to limit the complexity the UI exposes and still have enough power to achieve most things people would need. We worked pretty closely with the customers to make sure it made sense to them (via mockups etc) before building anything.
- zamalek 10y ago
  The Starcraft trigger editor[1] is probably one of the best living examples of the basis of a visual programming language. [1]: https://youtu.be/cOHgaONC6nw https://youtu.be/cOHgaONC6nw
asciimike 10y ago
Firebase uses rules like this for authN/Z checks, schema validation, and enforcing business logic. One of our DSLs is JSON based (https://firebase.google.com/docs/database/security/ https://firebase.google.com/docs/database/security/), while the other is more custom (https://firebase.google.com/docs/storage/security/ https://firebase.google.com/docs/storage/security/). Our console basically just uses text editors (sign up for free to check it out, as I can't find a good pic: https://console.firebase.google.com https://console.firebase.google.com), though we've considered tools like Blockly (https://developers.google.com/blockly/ https://developers.google.com/blockly/) for a more visual representation.
dabernathy89 10y ago
I'm curious to see the UI you came up with - is it something you can share?
- eschutte2 10y ago
  Yes - posted a screenshot above.

thom_nic 10y ago

Been considering the same problem here - how to allow some sort of user-defined rules/ logic flow? The UI is indeed more difficult to (well) do than the data representation of said rules. Anything you can share?

ilaksh 10y ago
Look into the business process management, workflow engines, projection editors (Intentional Domain Workbench).
existencebox 10y ago
It's funny this discussion comes up now, since I've been working on this exact same problem for an odd week on and off now. Building the syntax, interpreter, serializer/deserializer took a day. Writing the JS to render it? Still working on it. (largely hindered by my being a backend eng masquerading as a terribly incompetent frontend web dev) My approach however was to treat it as a literal syntax tree. we can represent trees reasonably well graphically, and if you connect the blocks sensibly you can make the visualization even flow well enough. Things start to decay past certain levels of depth; and I've addressed that with modularity. A tree can be "named" and become a single node within another tree. (yes yes rewriting programming languages badly or something). Thus far the biggest problems I've had with this approach have been primarily just learning the words I need to use to search for the right concepts in web-UX space; I've actually been pretty damn happy with the view. Tech wise, just a grid, jquery, bootstrap.
eschutte2 10y ago
Sure, here's a screenshot: http://jsreports.com/blog/wp-content/uploads/2016/10/conditional-rules.png http://jsreports.com/blog/wp-content/uploads/2016/10/conditi... This does conditional formatting for a report designer. We thought a lot about how to limit the complexity the UI exposes and still have enough power to achieve most things people would need. We worked pretty closely with the customers to make sure it made sense to them (via mockups etc) before building anything.
zamalek 10y ago
The Starcraft trigger editor[1] is probably one of the best living examples of the basis of a visual programming language. [1]: https://youtu.be/cOHgaONC6nw https://youtu.be/cOHgaONC6nw

asciimike 10y ago

Firebase uses rules like this for authN/Z checks, schema validation, and enforcing business logic. One of our DSLs is JSON based (https://firebase.google.com/docs/database/security/ https://firebase.google.com/docs/database/security/), while the other is more custom (https://firebase.google.com/docs/storage/security/ https://firebase.google.com/docs/storage/security/). Our console basically just uses text editors (sign up for free to check it out, as I can't find a good pic: https://console.firebase.google.com https://console.firebase.google.com), though we've considered tools like Blockly (https://developers.google.com/blockly/ https://developers.google.com/blockly/) for a more visual representation.

dabernathy89 10y ago

I'm curious to see the UI you came up with - is it something you can share?

eschutte2 10y ago
Yes - posted a screenshot above.