Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React migration #3071

Open
arikfr opened this Issue Nov 13, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@arikfr
Copy link
Member

arikfr commented Nov 13, 2018

As announced in July, we started the migration of our frontend code to React:

It’s long overdue that we migrate from Angular 1. Yet an actual migration was never prioritized, because it doesn’t directly benefit the end user so we preferred to focus on things that actually benefit the user.

But opportunity presented itself, when the good folks from Mozilla decided to experiment with migration Redash from Angular to React. While personally, for a new project, I wouldn’t necessarily pick React (but rather Vue), for an existing code base React presented the following advantages:

  • it had a clearer path to doing a gradual migration using the react2angular library (and later the angular2react one).
  • Both the team at Mozilla and other contributors have past experience with React.

Now that #2546 is merged we have a hybrid code base, where we can introduce React component into our code. We will start with gradually rewriting existing components and writing new code with React.

This is a gradual process where until finished, our codebase will use both Angular.js and React. Since version 4 we were shipping this hybrid codebase. The code editor, date parameters and edit in place component use React now.

I'm opening this issue to track and discuss related work.

My suggestion for the migration process is:

  1. Keep replacing Angular components with React:
  • Visualizations #3301
  • Query editor page
  • Dashboard grid #3285
  • Dashboard page
  • List pages (queries, dashboards, etc)
    • Queries
    • Dashboards
    • Users
    • Alerts
    • Data Sources
    • Groups #3411
    • Alert Destinations
  • Dynamic Form #3179
  • Settings
  • Replace toastr with Ant component #3547
  1. Implement extension points support with React. #3072
  2. Now that most of the components are React based, replace the router and state management with React.
  • Decide on router library (React Router?)
  • Decide on state management. I prefer to use something which is as simple as possible to avoid adding complexity before we really need it. Suggestions from active React users are welcome.
  • Move all logic code ("services" in Angular) to be non Angular dependent. We might be able to do this already, by utilizing the workaround of removing Angular's DI (see "Experiment with removing dependency on Angular’s DI" here).
  • Replace current routing/init process with the chosen router and state management.
  1. At this point we can remove Angular from our dependencies.

We might need to figure out state management before step 2, as some more complex components will require it.

@arikfr

This comment has been minimized.

Copy link
Member Author

arikfr commented Dec 23, 2018

https://github.com/STRML/react-grid-layout - can be relevant for our dashboard grid.

@ice2038

This comment has been minimized.

Copy link

ice2038 commented Jan 9, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.