Migrate the new "beta" UI from AngularJS to Angular

[peternewman]

https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c

"AngularJS is an extremely stable framework for building web applications, and has been used by millions of developers across the web. Angular is its successor and uses the same philosophies such as declarative templates and dependency injection."

"July 1, 2018 — December 31, 2021 AngularJS 1.7 LTS Period"

https://angular.io/guide/upgrade

[peternewman]

Or rewrite entirely in yet another framework as discussed in #1782 ...

[peternewman]

Maybe we need to start by gathering a list of capabilities/libraries it requires, which may influence or steer which framework might be best, off the top of my head:

1. GFM Markdown rendering for the plugin readmes
2. JSON Schema dynamic form based UIs (possibly with an expandable tree too for devices/subdevices) for when E1.37-5 is released and to try and make manufacturer specific PIDs first class citizens as well as automagically handling all supported PIDs

[kripton]

1. GFM Markdown rendering for the plugin readmes

Should be supported by almost all frameworks, maybe with some "plugins"

2. JSON Schema dynamic form based UIs (possibly with an expandable tree too for devices/subdevices) for when E1.37-5 is released and to try and make manufacturer specific PIDs first class citizens as well as automagically handling all supported PIDs

Shouldn't be much of a problem in react.js since it uses JSX but I'll keep that in my head while working my way through the Nuxt.js tutorials/examples

And generally, I feel a little opposed to work with Angular. I had some touch points with it in my daytime job and I'm not really fond of it. We'll see if I like Vue/Nuxt better ;)

[peternewman]

1. GFM Markdown rendering for the plugin readmes

Should be supported by almost all frameworks, maybe with some "plugins"

👍

2. JSON Schema dynamic form based UIs (possibly with an expandable tree too for devices/subdevices) for when E1.37-5 is released and to try and make manufacturer specific PIDs first class citizens as well as automagically handling all supported PIDs

Shouldn't be much of a problem in react.js since it uses JSX but I'll keep that in my head while working my way through the Nuxt.js tutorials/examples

Thinking about this a bit more I think we should almost focus on this aspect first and ensure whichever stack we pick can handle this in a way we're happy with. I think it's probably the most complex part of our existing UI (followed by the faders) and will be crucial to all the RDM integration and interaction. It also strikes me once we've got the RDM stuff working via it, it probably wouldn't be a huge leap to rework some or all of our plugin config to function via it too, imagine being able to reconfigure aspects of a plugin from the webpage easily like a proper grown-up app! 😄

A few random samples I've found: https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/examples#sections-expansion-panels - Quite similar to the existing old UI, but you can't expand all sections out of the box (maybe it's an option) https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/examples#editable-array-inline - Another nice way to display it https://nxn8y.codesandbox.io/ - A different tool

We theoretically want to handle:

• Universe
  • UID
  • Root Device
    • Parameter
  • Sub device 1
    • Parameter 1
    • Parameter n
  • Sub device n
    • Parameter 1
    • Parameter n

Although I suspect for practical data processing reasons, we probably only want to show say one UID at a time, and maybe the sub device IDs for it.

The parameters will obviously all be different with different info and display styles.

And generally, I feel a little opposed to work with Angular. I had some touch points with it in my daytime job and I'm not really fond of it. We'll see if I like Vue/Nuxt better ;)

🤞