We were “feature complete.”

Four weeks into a 10-week Free Code Camp project to build an environmental pledge web application, we had gotten all of the use cases working correctly.

Which meant that we were finished, right?

Not even close!

It took another four weeks just to bring the app up to a professional level of quality. It wasn’t just about finding and fixing a few remaining bugs. Most of the work we still had to do was about sorting out the “–ilities”: non-functional requirements, such as usability and compatibility.

The app was working OK. But now we needed to make it work better.

“Two seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.” — Maile Ohye

Performance

The application needed a multi-page look and feel, so people could share the URLs of individual pledges or of their own pledge achievements, but we couldn’t achieve the sub-second response times we wanted using a multi-page design. It was simply taking too long to download and render the pages.

Our solution was to refactor it into a React-based single-page application that catches the click events of the hyperlinks to control which ‘page’ to display:

var self = this;

$('a').click(function (event) {

var href = $(this).attr("href");

self.setState({ url: href });

window.history.pushState('', '', href);

event.preventDefault();

});

This means that the application gets fully loaded only once (which may take a few seconds over a slow connection) and then each click within the site is much, much faster.