React Q&A

If you are, like me, an avid follower of MusicBrainz server release notes, you will have been reading about a certain type of update for a number of years – React conversion tasks.

But, unlike me, you may know what React is! For the rest of you – happily drifting on the currents of ignorance with me – I have good news. The MusicBrainz team has sent a Software Engineer tugboat to pull us into the waters of knowledge. A tugboat by the name of yvanzo, who has agreed to answer some questions about React.

aerozol: Hi yvanzo! Thank you for agreeing to answer some questions about the ongoing React conversion. I can see from the MetaBrainz team page that you are a Software Engineer for MusicBrainz – what tasks does that entail? I have a suspicion that everyone at MB juggles more tasks than their simple job descriptions imply.

yvanzo: That’s true. You can partly see it through our weekly reviews, see our meeting notes.

Basically MetaBrainz has just a small team of contractors who were mostly volunteers beforehand, and we keep helping as much as possible even for projects that are not among our primary assignments.

Just for MusicBrainz, there is some system maintenance, tickets triage, support (forums, IRC, mail)… and development comes only after those.

aerozol: I’ve been seeing these ‘React conversion’ updates pop up for… a few years? Is that right? You, bitmap and reosarevok have been working hard on them, on top of all your other work.

yvanzo: Conversion work was started by bitmap in 2015, then reosarevok and I joined the efforts in 2018. At that time it was decided to pursue the React migration in parallel with other major changes, thus slowing this migration down but not pausing these other changes for too long. Even though the changes are mostly technical, we keep track of React conversion tasks as separate tickets for each release so that editors can have a specific look at the converted pages or elements, especially in beta, to check for potential regressions.

aerozol: So, what is React?

yvanzo: React (a front-end library written in JavaScript) is used for rendering the MusicBrainz website UI. In general, it isn’t visually distinguishable from the previous implementation, it just works differently under the hood.

aerozol: What system are we shifting MusicBrainz to React from? I assume it’s something with smoke coming out of it and a wheel or two falling off.

yvanzo: We are shifting from Template Toolkit (template engine written in Perl), jQuery (HTML DOM manipulation library written in JavaScript) and Knockout (model-view library written in JavaScript) which are hopefully still working at the moment.

Shifting to only one library for the rendering of the website UI considerably simplifies contributing to the code and ensures a longer-term maintainability.

Shifting to full JavaScript should make it easier for userscript authors to contribute directly to the website UI, since JavaScript is what they have been using all this time.

As a free software project, it is important to make it easy for anyone to contribute to the code, and with React being a much more popular and well known library than Template Toolkit, this change makes us more welcoming to more people.

There are some more technical benefits too and fewer drawbacks.

aerozol: Keeping it simple, what work do you have to do to convert a page?

yvanzo: Rewriting a template (from Template Toolkit) is the easiest part, it is mostly just a change of syntax. The most complicated part comes where it involves converting scripts too, especially from jQuery and Knockout.

aerozol: Sometimes a lot of pages are converted with a server update, and sometimes a single page seems to take longer. For instance, the relationships React conversion seemed like a massive job for bitmap – and we got a bunch of updates and improvements with it as well! What makes something easy or difficult to convert?

yvanzo: What comes with a server update doesn’t necessarily depend on the difficulty. Very often it’s just that other assignments take more time. Also we usually convert the pages that are similar to each other at the same time.

Yes, the relationship editor was probably the most tedious bit to convert so far because it is so complex behind the scenes in terms of interactivity.

Because the interactivity is most often coded in scripts, the more interactions are possible with a page, the more difficult it is to convert. For example, editing pages are much more complex to convert than data display pages. It is also important to check the safety when converting critical pages such as login and administration. Finally we are catching up with adding continuous integration tests when it is needed as we are converting pages.

The last really big chunk to be converted is the release editor, the rest is either in code review already or pretty similar to what will have been converted earlier.

aerozol: What’s going to happen when all of MusicBrainz has been converted? Is there something big on the roadmap after the React conversion, or will it just make MusicBrainz easier to maintain and improve going forward?

yvanzo: Elvis Presley will resurrect and the Earth will turn into a donut.

If not, a lot of (not so) big things will become possible but we will draw the roadmap only when the conversion is near ending.

Main things for the web UI would be making it mobile-ready and starting to implement the UI/UX redesign (initiated by Chhavi in 2018).

Many more things that are not for the web UI require our attention too.

aerozol: Thanks yvanzo, and thanks for your work also bitmap and reosarevok. Good luck and have fun converting!

Hopefully that was as enlightening for you as it was for me. If you have remaining questions about React and the conversion, leave a comment.