Enhancing Hootsuite with React and Flux
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.
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
React component. It has two common library components:
. 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:
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:
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:
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.
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.