React migration #3071
Description
Status
| Type | Description | Status | Comment |
|---|---|---|---|
| Page | Query View | #4429 | |
| Page | Query Editor | #4429 | |
| Component | AppView |
#4525 | (layout component, contains logic of redirecting to login, rendering the header and some more) |
| lib | Routing | #4159 | |
| lib | State Management | Not 100% sure we need this from the get go | |
| lib | Model Classes | Mostly the $http/$resource based objects |
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.