Bug 1574435 - [RFE] Analyse React and Angular 2.0
Summary: [RFE] Analyse React and Angular 2.0
Alias: None
Product: Red Hat Gluster Storage
Classification: Red Hat
Component: web-admin-tendrl-ui
Version: rhgs-3.4
Hardware: Unspecified
OS: Unspecified
Target Milestone: ---
: ---
Assignee: Neha Gupta
QA Contact: sds-qe-bugs
Depends On:
TreeView+ depends on / blocked
Reported: 2018-05-03 10:36 UTC by Neha Gupta
Modified: 2018-10-17 04:47 UTC (History)
3 users (show)

Fixed In Version:
Doc Type: If docs needed, set a value
Doc Text:
Clone Of:
Last Closed: 2018-10-17 04:47:09 UTC
Target Upstream Version:

Attachments (Terms of Use)

System ID Private Priority Status Summary Last Updated
Github https://github.com/Tendrl ui issues 954 0 None None None 2018-05-03 10:36:01 UTC

Description Neha Gupta 2018-05-03 10:36:01 UTC
Analyze React and Angular and make recommendation for Tendrl UI management framework

Comment 2 Neha Gupta 2018-05-03 10:43:14 UTC
Analysis between React and Angular 2.0

1.New stack to learn
   - For React - learn react
   - For Angular - learn angular and typeScript

2. Performance
   - React performance is better in comparison with Angular 2.0
   - More details - https://www.codementor.io/codementorteam/react-vs-angular-2-comparison-beginners-guide-lvz5710ha#e-speed
   - Benchmark - https://auth0.com/blog/more-benchmarks-virtual-dom-vs-angular-12-vs-mithril-js-vs-the-rest/

3. Community
   - Stackoverflow and stats of github repos show that React is more popular at the moment.
   - Figures for React - https://github.com/facebook/react/stargazers
   - Figures for Angular - https://github.com/angular/angular/stargazers

4. Debugging
   - Debugging in Angular 2 is not straightforward and involves adding additional code or development extensions to the browser. Quite the opposite happens with React, where performing debugging is simpler and more straightforward.

5. Since React is a library,it is highly recommended to know the best practices. Otherwise, the result may be difficult-to-maintain applications, with performance problems and levels of low-quality. Whereas, Angular team made a strong emphasis on this aspect to provide greater transparency to the developer to make it as intuitive as possible.

6. Patternfly support
   - More for React than Angular at the moment

7. Most of the red hat products are leaning towards React - CloudForms, RHV, Satellite, OpenShift (not OpenShift.io), and OpenStack, OCP

For more details, please refer -
- http://www.hexacta.com/2017/07/24/react-vs-angular2-which-technology-should-we-use/
- https://www.bacancytechnology.com/blog/angular2-vs-react

**What it would take to migrate from Angular 1 -> React**

- Migrating the build to webpack is needed or can continue with gulp?(need to do some research)
- Render React components inside AngularJS
   - use React components inside Angular using ngReact
- Share dependencies between both sides
   - To include react dependencies in Angular, wrap the react component in directive and register it in AngularJS
   - To include AngularJS dependencies in React, create an object and a helper function to inject the dependencies and call it inside AngularJS run process.
- Integrate Redux 
- Adopt React bridge
- Move to react-router
- Migrate leaf components to React, working from the bottom up
- Migrating to JEST test framework or can continue with karma (need to do some research)

Details can be found at -
- https://trello.com/c/CMQC1iEV/1132-5-rd-react-techdebt
- https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa
- https://www.smartly.io/blog/how-to-migrate-from-angular-to-react-without-a-massive-rewrite

**What it would take to migrate from Angular 1 -> Angular**

- Use Module loader - webpack/SystemJS/Browserify
- Migrate to TypeScript
   -  All existing js files can be renamed from *.js to *.ts
- Use ngUpgrade module
- Make all modules export an NgModule
   - Migrating services is usually straightforward, migrating components can require more work, depending on how the components are implemented. 

Details can be found at -
- https://angular.io/guide/upgrade
- https://vsavkin.com/migrating-angular-1-applications-to-angular-2-in-5-simple-steps-40621800a25b
- https://www.codementor.io/codementorteam/migrating-from-angular-1-x-to-angular-2-upgrade-strategies-a3fgzrhxo

@kmurarka@redhat.com @anbehl@redhat.com @smukherj@redhat.com Please feel free to add/suggest, which can help in deciding the front-end UI designing technologies for Tendrl UI.

Comment 4 Neha Gupta 2018-10-17 04:47:09 UTC
As the analysis is already done, hence closing the issue.

Note You need to log in before you can comment on or make changes to this bug.