React migration

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.

[arikfr]

The codebase is now 100% React. We’re still cleaning up some things, but the migration is done. 🎉

[arikfr]

In your introduction post, you mentioned Vue, while Angular and Aurelia were were available (possibly among other options). All of the aforementioned frameworks build on web standards, rather than partially reinventing them in JavaScript.

Angular is not an option and Aurelia is probably not either. But Vue was an option, but if I’m not mistaken it doesn’t really use HTML – it takes the template you define and converts it into a Virtual DOM.

So it might be more familiar for some people, but you can’t say it’s using web standards.

Anyway this discussion is pointless considering the stage of the React migration. We will keep this in mind for the 2025 rewrite 😄