Renovating Olark with React and Redux

A behind the scenes look at how we built Hummingbird, our mobile-friendly live chat experience.

Last week we put a new addition on the Olark house, which was particularly relevant for me as we’re in the process of having a new house built, but that’s another story for another time.

We built the core code for Olark back in 2009, and it’s kind of like a ranch style home: a streamlined, single floor with just the essentials. This house worked remarkably well. We’ve managed to add more than 12,000 customers in this house.

But we reached our seven-year mark and decided it’s time for a remodel. The neighborhood is changing around us - more and more people are moving to mobile to communicate with the companies they love. Our remodel meant focusing our engineering team on product improvements, and with some careful deliberation we decided the first major home improvement we wanted to make was adding a second floor.

Hummingbird, Olark’s mobile-friendly live chat platform, is that second floor.

The first floor — don’t mind the cruft

The first floor is our first-generation chatbox, which was built by our founders with a minimal use of external libraries as few were available at the time.

Over time, like all first-generations, our first floor acquired its own set of code cruft and technical debt that weighed it down while technology improved and the market continued to expect more.

In particular, a lot of the functionality and logic in our chatbox core was mixed together — the way the chat tab is viewed, how it’s displayed on the screen, where the events are triggered, and so on. This is a fairly common problem for existing code bases, but we found our core reached its limitations on mobile browsers. There are just so many more things to account for in a mobile environment—hardware, keyboards, how a page renders, how different devices treat sites differently. Moving forward in the existing code was hindering us from being able to make progress for the future. It was something we needed to fix.

As we realized our own technical debt was growing, we knew we had to find a path to cut through the weeds quickly without a re-write. And because our existing chatbox is currently serving a large number of visitors to our customers’ websites, making changes was not something we could take lightly.

When we started to think about Hummingbird, we considered everything we wanted in a modern chat experience. We also knew we wanted to make the parts of Hummingbird manageable so a small team or even a single person could maintain this new architecture.

Hummingbird is a chat experience that’s been redesigned to feel familiar on a handheld device (left); and a mobile-friendly chat button with unread message alerts (right).

We decided the way forward was building a new visual layer on top of our existing code, and abstract it as much as possible from the existing code base, while still utilizing the existing chatbox to get it’s events and data.

Now you see where I was going with the house analogy?

The second floor — moving on up

We decided to build this new layer with React and Redux because:

  1. Some of the other teams at Olark were already having great success with it as part of our new, simpler pricing structure.
  2. It allows us to create complex user interfaces, all while keeping the code simple and readable.
  3. The Redux part of it affords us the ability to manage a lot of state information in a clean and understandable way. Redux is essentially a data object that maps out what our current state is in the chatbox and separates out how changes are made to that state. This helps us better understand all the different ways the chatbox is being used by our customers, and makes everything we do in our engineering efforts easier. Which ultimately means a better product for our customers.

There were two major challenges we faced with Hummingbird:

1. There are a myriad of mobile nuances — If you’ve ever worked on a mobile project/product, you know what I’m talking about. iOS stuff is difficult when dealing with fixed elements, and the way Android renders the page and keyboard is completely different from how iOS renders the keyboard on the page. Trying to figure out how to accommodate those differences as well as some known bugs; solving all that was pretty time consuming.

2. Meshing new and existing code — This challenge was a bit trickier. It required some creative thinking and some decent amount of planning on our part. We needed to find a way that would let us build the new level of our code, but at the same time not let our existing code hold us back as we moved into the future of our chatbox. We also had to keep changes to our existing code base to a minimum because we didn’t want to introduce regressions while we added our new code.

So, we went to work with Redux middleware.

Plumbing between the first and second floors

When we began planning out our new mobile-friendly chatbox we wanted it to be the platform we would use moving forward, so we wanted it to be our ideal setup. This meant building it in a way that it wouldn’t need to know details of how the existing code worked, even though it would still need to rely on the existing code for the core events and functionality.

With Redux middleware we were able to abstract the blending of the two data levels. Existing events could send the data as it had it, then rely on the middleware to convert the events into something the new Hummingbird code could use. Conversely, when an event came from the new code, the middleware would give us a way to cleanly get events back out to our existing code.

When you see our Hummingbird chat button on a mobile site, the UI is written in React components using Redux as the state store. Because of the way those components are integrated on top of the existing code, we can now start to re-write significant portions of our existing code, piece by piece, in a way that works directly with the new Hummingbird code.

Now we can slowly start to shift our users out of our first story and into our brand new, contemporary second story. This will be better for everything we do — our styling, new features, debugging, platform speed (faster), and quicker rendering.

Debugging in particular will benefit. When a customer is having issues, Redux will let us pull a state out of that customer’s site, import it to a test page, and see exactly what the customer is seeing on their site.

What is the lesson learned here?

No matter how old your house (existing code) is, there’s always a path for improvement. If you have existing code that is, for all intents and purposes, impossible to re-write, there are tools available to help you make a change. With some creative thinking, people who are willing to take time to learn, teamwork, and some studying of other sites, you too can add a new addition to your house.

About the author: Nick Crohn is a Full Stack Engineer at Olark. He lives in Arizona and is having a house built IRL that can accommodate his growing family.