1409103 - (treeherder-react) [meta] Migrate Treeherder from AngularJS to React

Status: RESOLVED FIXED

(Tree Management :: Treeherder: Frontend, enhancement, P3)

Description

[Cameron Dawson [:camd]]

We are currently on Angular JS 1.x which is woefully out of date.  And supporting packages like angular-ui-bootstrap are now no longer being supported.  So in order to move into current code where things are more supported, we'll need to either upgrade Angular or switch away from it.  

It would take a similar amount of work to move to ReactJS as it would to Angular 4.  Since React has been working well for us and other groups in Mozilla also use it (TaskCluster to some degree) we would have a wider ecosystem of in-house contributors if we were completely ReactJS.

Ed and I discussed this topic this morning and we feel we should move to React.  We can do this in phases something like this:

1. Migrate our current Angular code to Components (prerequisite for #2)
2. Upgrade to the latest React 16 for our existing components so that we're current. (optional)
3. Use the package ``angular2React`` so that we can switch our "base" from Angular to React.  Then we can discontinue use of ngReact which works in the opposite direction.
4. Migrate each Angular Component to React one by one.

I'll split out the steps into separate bugs.

Also: We have a partial PR from Casey Williams that initiated the migration of ``clonejobs.js`` to React.  So I may start by finishing that up.

Comment 1

[Cameron Dawson [:camd]]

We will also likely need to replace our UI unit test from Jasmine to something else.  Sounds like Jest and Enzyme are both popular:

https://hackernoon.com/react-unit-test-example-tutorial-jest-enzyme-jsdom-mocha-chai-state-props-component-7ec850a98566

Comment 5

[Ed Morley [:emorley]]

I was just looking at https://github.com/bcherny/ngimport again, and I wondered whether it might make some of the conversion easier, since we can avoid passing the AngularJS dependencies all the way down through the props?

For example:

import { $rootscope, $log } from 'ngimport/index.es2015.js';

Or wrapping our own services to be able to do the same to them:
https://github.com/bcherny/ngimport#after-1

What do you think?

Comment 6

[Cameron Dawson [:camd]]

This looks really awesome.  I'll experiment with it and most likely start using it.  :)  Thanks for finding it!

Comment 7

[Ed Morley [:emorley]]

Not urgent - but I ran the script in bug 1441164 again, and it found that the `preventDefaultOnLeftClick` directive is now unused (as of bug 1465987).