Refactoring: Migration to Angular, Vue or React

[togiberlin]

Currently, the SpecIF-Viewer is hard to maintain and extend.
It might be simpler (and in sum less work) to migrate the frontend logic to a standard framework like Angular/Vue/React.

[togiberlin]

My strong preference goes out to Vue.js, since it allows a gradual adoption: https://medium.com/@bluntjackson/improving-legacy-web-applications-with-vue-and-vuex-2176c973e831

Vuejs can be embedded into existing legacy code without any issues.
It doesn't require a big bang rewrite.

[togiberlin]

Transitioning to Angular or ReactJS requires a microfrontend strategy. The Angular or ReactJS app can be embedded via web components or iframes.

But a microfrontend strategy comes with it's own problems:

• DevOps, deployments, debugging and rollbacks are harder (pool of deployment capable devs shrinks because of this hurdles)
• Architecture is more complicated and more error prone
• Logging is harder: it has to be a centralized service (with additional overhead for ordering logs by timestamps)
• Last but not least, determining proper boundaries is hard.

We don't know the boundaries yet - it's better to keep the frontend monolithic for the time being.
To wrap it up: microfrontends make sense for a large scale app like Amazon, but little sense for smaller-midsized apps such as ours.

[odungern]

Great, I agree with all you are saying. If we want to change to a familiar frontend framework, my preference is Vue as well.

One reason why the code is hard to maintain is it's 'homegrown' control of modules and the DOM. A widely known framework such as Vue would alleviate this.

In my eyes there's no issue with stability or performance. (This was different in 2012-2014 when the first steps had been made using KnockoutJS.)

Thus, we should make a rough estimation on how much effort and how much time is needed to do such a major refactoring ... then we must prioritize. In the first phase with very limited capacity we must concentrate on what's missing to acquire a project. I guess it is not so much in the frontend.

---

Other reasons why the code appears quite complex:

• Most of the code is structured in a way that it does not expect any data item needed to be available in the cache; the processing is done event-oriented after receiving the data needed from a server (using promises). Without a good understanding of SpecIF and how the different items interact, the code may be difficult to understand.
• Even worse, the programmer must always be aware that certain items or elements can be missing ... so as to allow simpler representations, if there is no need. For example, a property value can be a simple string or a list with objects containing values in different languages. When displaying or transforming to a document, a specific language is selected ... and in other cases all language values must be kept.

Any proposals how to deal better with these requirements is welcome.