Thoughts on things

The five stages of grief - Moving from jQuery to React

November 21, 2019

Dear jQuery,

Sometimes people drift apart. We’ve outgrown you and as much as the warmth of your embrace tempts us, we know we need to move on.

Love,

FutureLearn


This is a tale of the journey that we went on when migrating from jQuery to React. Although this will talk about jQuery and React explicitly, I believe that there is a tale here for any large codebase migrating to a new technology.

Denial: React is just a fad

When we started on this journey, times were different. Vue was still taking it’s first steps to becoming the amazing library that it is today. Angular seemed to be on an unstoppable path to dominance. Polymer saw the future as Web components. Ember was trying to make the world a better place for ambitious web developers. ES2015 was hanging around making the case for not needing a framework. A small start up called Facebook had this library called React.

As a tech team, we realised that we couldn’t continue down the path of jQuery spaghetti. The time had come to decide how we would create interactive experiences going forward.

In a world with so many competing ideas and products vying for our codebase how do you pick the right one? Spoiler you can’t (and also we chose React but hopefully you got that from the title.)

How can you know that React won’t be vaporware next year? How can you be confident that the team can continue to be productive with it? How can you be sure that Facebook won’t do anything strange with the React license? All of these are unknown. If anyone questions you on these, you can’t give certainty back. React is just a fad. It might be. We don’t have the advantage of hindsight.

So why choose it? What does React have that everything else seems to lack? This, for me, is the easiest to answer. We enjoyed working with it. We felt empowered by what it enabled us to do. Sometimes the answer comes not from the head, but from the heart.

Anger: Why is there HTML in my JavaScript

You’ve made your choice. A small number of peeps are living the dream with React in the codebase. A substantially larger number of peeps are apathetic to having React in the codebase. Now the really journey starts. Converting the uncoverted.

You’ve hit an issue though. Why do I need to bind everything? What is className? What is a componentDidMountorUpdateOrMightUnmountWithinTheNext5Minutes? What even are props?

You’re asking people to trust you. You’re asking people to trust you that this is in their best interests for working on the codebase. Even more terrifying, you’re asking people to trust you that this is in the best interest for their careers.

As engineers, we want to be able to create amazing experiences, fast. We’re asking people to slow down, unlearn what they know, so that at some unspecified point in the future, we can create even more amazing experiences. It’s no surprise that people have hesitations around this.

Bargaining: Maybe jQuery and React can live together

So time goes on. Winter turns to Spring. Spring turns to Summer (or whatever the UK equivalent is). Slowly but surely React components are popping up in the codebase. It’s still not the go to choice for most but it all seems to be moving in the right direction.

Suddenly, you hit a brick wall. In front of you is the most beautiful spaghetti code you’ve ever seen in your life. It’s managed to get itself intertwined in unexpected ways throughout the codebase. Make one mistake here and the universe itself could implode. You know that this is exactly the reason React was introduced, but you’re scared. What if porting this over goes wrong? All the good will built up around React would be gone. It’d be marched out the office and jQuery would stand there saying ‘I told you so’.

So you compromise. Rather than do the right thing, as hard and scary as it might be, you come up with, what at the time you call, a ‘pragmatic solution’.

‘Not everything needs to be React’ you say. Nothing wrong with the top of all our components looking like

import React from "react"
import $ from "jquery"

They can be best buds. We can have the best of both worlds.

In actuallity all we’ve created here is 2 different ways of writing JavaScript. 2 different technologies for developers to learn. 2 different testing frameworks to learn. Any problem we had before is now twice as big.

Depression: I miss the simpler days of the web

$('body').on('click', doSomething) no longer looks so bad. There’s almost something beautiful in it’s simplicity. The web worked just fine before hooks and lifecycles. We’d never need to think about whether we should use mobx or redux or context or insertnextbigthinghere. We’d be happier if we went back to the way things were.

This is where you need perspective. You take a step back and suddenly you start to notice all these features that didn’t exist a year ago. All these features that we wouldn’t have dared tackle a year ago. You’ve got ‘backend till I die’ developers writing amazing client side code. The codebase isn’t burning to the ground around you.

Sure there are kinks in this new relationship that still need to be figured out but, there’s a new found belief that you will figure them out. And it’s not just you who believes that.

Acceptance: React by default

One day you wake up and the sun is shining down on you (It was most likely not sunny and was probably raining. I also have curtains so it wouldn’t have been shining down on me even if it was sunny.)

You turn up to work and there it is. You see a single slide in a presentation with 3 words.

React by default

Suddenly all the slides and presentations you’ve seen before are meaningless. We, as a team, have gotten there.

So what does this mean for you? Change is hard. It’s truly humbling to know that people trusted us to come on this journey with us. Everyone is going to go through this journey differently. It’s so important that we empathise with the human cost of introducing such a large change.

At every step of that journey, don’t forget to look at how far you’ve come. Sing those praises. Understand those who are frustrated. Encourage those trying it out for the first time. Support those who are confused. Applaud everyone for taking this step.

In the words of Socrates

The secret of change is to focus all of your energy, not on fighting the old, but building the new

I think we did Socrates proud.


Sam McTaggart

Hi, I'm Sam McTaggart. I like to write things sometimes. You can find me on twitter where I write even less.