Whiplash UI

React UI Library

September 01, 2016 to October 01, 2017

Joining Whiplash to help boost their frontend and rebuild their 10-year-old Rails app into a new React SPA frontend was a blast. What I didn't expect was that the UI library I authored (Whiplash UI Library) would still be going strong today with over 7k downloads. 😱

The Tech

The purpose of this UI library was simple, build something that all the Whiplash products would be able to use easily in the future using React. All the components were already designed; I just had to bring them to life. Initially, the owners of Whiplash wanted the library to be private. Still, seeing the success of the UI library boom via Bootstrap, I was able to convince them to allow it to be a public UI. Thus, the library was born.

The base concept for this library was simple, keep the dependencies minimal and load it up with unit tests. By doing so, we kept the library pretty light-weight and dependable. At the time my contract was at its end, the UI library had a code coverage amount of close to 95%.

The birth of Horcrux 💀

I love Harry Potter ⚡️, the series, not the kid. #RavenclawPride

As time passed, I learned of a great React UI helper library called styled-components. I used that opportunity to port over the old Whiplash-UI to my own that used styled-components as the foundation. It was a blast at first, but then it became very tiring having to keep up with everything on my own. Horcrux has been left alone in my personal cave, waiting to be found and revived...fitting.

One day I'll get back at it and revive the old girl. I'm twice the engineer now as I was then, and I could do some significant performance enhancement by converting everything to use hooks.

The Lesson Learned

Most companies want to jump at the chance of another opportunity to get their brand in the world. Building a custom UI library is fun and very rewarding, but it comes at a price. The price I learned is time. Time, as we know, is the one thing you can't buy.

If you are a new startup looking to launch an MLP, or even rebuild your current project, I don't recommend using resources to build a UI library.

Instead, create all your custom components in the product you are hoping to launch. Once that step has happened, get yourself a team of at least two engineers who can devote building and maintaining the library full-time because that is what it will take.