Spike: Step-wise migration from angular.js to react.js

Goals:

• Is it technically possible to rewrite single directives (e.g. tabs) in react.js while keeping angular.js for the rest of the application? Create an example.
• Is there a possible performance impact (e.g. react.js and angular.js both manage DOM manipulation; does this make things less efficient?))
• If we gradually rewrite more and more components with react.js, is it possible that task forms and tasklist/cockpit plugins continue using angular.js?

Side note: It would be nice to use webpack for JSX compilation, so we will do this spike first.

Results

• Babel Plugin for Persistify/Browserify was used to transpile JSX
• react2angular library is used to include React react components

Pros:
• Easy to write and include
• Dependencys are mapped to props
• 2-way communication is possible
• When replacing components, existing code using this don't need to be changed
∘ Still unknown: how to replace whole modules with react components?
• Angular components can be used in the React component, but need parsing before
∘ I do not recommend doing this. When we want to migrate everything, it would be better to go bottom-up and avoid high coupling

Cons:
• significantly longer loading time (~1-2 seconds longer)
• During Migration, overhead will increase because helper components (Translate) need to be loaded in 2 versions.
• Changes to injected complex values (array, object) do not force the React component to re-render
∘ Might cause problems for non-static components (e.g. components depending on widget-search)

Performance
Chrome:
• Impact on loading time: ~400ms
• Script execution takes about 300ms, Rendering takes only 20ms longer. Bootstrapping React takes consumes most of the cycles
• Loading and parsing the bigger files takes 100ms

Firefox:
Values: Finish/DOMContentLoaded/Load
Without React:
• 2.26s/88ms/107ms
• JS Time: 0.16s
With react:
• 2.34/113/122
• 0.18s
Firefox results are in the margin of error and it can be said that there is no significant performance difference.

To be determined:
• how to integrate a Module - React does not really differenciate between modules and components

TODO:

• Tasklist Plugins & Cockpit Plugins

What API are we offering for Custom Plugins (roman)