‍

React is a JavaScript library for building UI and it promises many things. But the main one that appealed to us was the idea that state and logic could be easily removed from the UI code and placed along-side it. This allows the UI (which is a huge cost in any build) to be re-useable — a huge business benefit when building cloud software.

We had been using Backbone as our main UI framework and had found that too much logic hid itself inside our models. There was no clear delineation between where the model ended and the logic began.

Beautiful design can be implemented in any framework (or without one at all!). But what React gives you is the ability to compose this beauty. For example: a well designed React grid (with paging, filtering, etc) can be reused not just throughout one app, but over different apps as well. This is due to the main logic being removed from the grid itself and only the common state changes, such as a loading state, remaining triggered by the main logic.

In 2015 we were starting a few new projects from scratch, so we decided to use React as the framework for the UI. We were in for a bit of a journey, as we now have nine projects using React. And during this time we’ve ended up developing our own set of components called Rocket.

We devised Rocket because we found that when creating components within an app, React promised re-use — but never really delivered due to the components being too tightly coupled to the app. The solution was to build these common components to be re-usable from the ground up — so they could be dropped into any app seamlessly.

One component we’ve used multiple times is a card dashboard (shown above) — where we separate bite-size information chunks into cards that can then expand into a larger picture. React has been an ideal framework for developing these cards as separate modules that have no dependencies on other cards or the underlying dashboard layout.

Another useful outcome of React is that our designer is able to communicate in components as building blocks. This allows for the fidelity and speed of design-to-implementation to be improved as these components were a defined language due to the creation of Rocket.

Using React over the last two years has improved the speed and ease of delivering beautifully designed web applications. But we didn’t see these gains until we intentionally designed and planned for them.

In order to reduce the friction of development-to-design communication and achieve a clear separation of concerns, we must invest in building components with the thought of reuse and enabling communication between design and development.

‍