According to the Nielsen Norman Group’s study on web response time, when a website takes more than 100 milliseconds to load, we start to notice the delay and feel the computer is “working” hard on the command (but not fast enough to our expectations). That’s a problem we’ve faced at Hootsuite too.

As we have grown to serve larger customers – those with hundreds to thousands of members and social networks – our customers started to experience performance issues like loading delays, redundant server communications, and not-so-friendly page refreshes. Most importantly, the Member Management pages – where our customers organize the relationships between members and social networks – could take more than 500 milliseconds to render. We rewrote our Member Management pages using React + Flux and lowered the page load time to under 100ms; an 80% savings. This early improvement makes us excited to see how React & Flux can benefit performance for the rest of our site.

Previous Member Management page in BackboneJS
Previous Member Management page in BackboneJS

Goodbye Backbone

In the application, we present the user’s profile summary, organizations they belong to, and the list of social accounts they can use. Originally built with BackboneJS, it helped us give structure to this section and experiment with a mature javascript framework. However, it does not scale well with large customers because it is overloaded with redundant ajax requests and page refreshes due to the lack of a centralized client side data storage. To solve these problems, we re-implemented this section with React and Flux with Flummox implementation.

Hello React & Flux

First of all, React brings us reusable UI components that we can easily maintain and keep up with design changes. For this section, we implemented a set of reusable common components like the Avatars, Buttons, and Icons in collaboration with the Design team. This prevented UI inconsistency in the application, reducing developer’s effort in implementing these components and providing us a better way to organize the front-end structure.

Here is the UI for the OrganizationItem React component. It has two common library components: Button and StandardIcon. Using common components provides a consistent user experience and a reduces developer maintenance time when designs change. This container component itself is can be easily iterated and displayed as a collection of organization summaries:

image04

React components like this are driven by data from the Flux store. Flux helps us to create a universal store that is accessible throughout the front-end and uniforms the data we will be communicating to the back-end. The Member Management section are powered by three Flux stores: the member, organizations, and social profile store, along with their set of actions. The existing data flow is troublesome because we are obtaining data from ajax requests and feed the renderer ad hoc. For example, if a user attempts to add a new social profile, the application would typically execute the following:

image05

It does the job, but it is case specific and hard to maintain and synchronize, which creates technical debt.

Binding React components with Flux, we control the data format in one centralized location that will automatically re-render our components if the state of the corresponding store has changed. The diagram below demonstrates snapshot of the SocialProfile Flux store. Different actions flows through the Dispatcher that communicates with backend with the single source of truth, decoupling data manipulation from the UI layer:

image02 image00

As a result, we reduced the render time of the Member Management section to less than 100ms. Above is a graph captured during the rollout phase of the new implementation. As shown, the new render time (in red) is around 100ms and the original version is inconsistently slow. In addition, if the data required is loaded into the Flux store from other areas of the application, the Member Management now loads and renders instantly. Now, data and user interactions are associated directly with the Flux store, number of ajax requests were reduced, and there is no more forceful page refreshes.

New Member Management Page built in React
New Member Management Page built in React

More React

Looking forward, my team and I are very excited to bring Flux and React to more areas of the application. By using the universal Flux store and reusable React components, it’s going to make Hootsuite faster, more maintainable, and more scalable.

Special thanks to my colleague Gabriel for helping me in writing this and Kimli for editing the copy. 🙂

Further Reading:

image06About the Author

Catherine is a software engineer on the Engagement team. She loves web and mobile app development and spends lots of time with her cat, Bowser. Follow her on Twitter @catherinettt.