Building a new React Frontend for PRI.org

Four Kitchens recently helped PRI.org launch a new React Frontend for their existing Drupal 7 project. There are a lot of engineering pieces to be excited about on this project, but as a Frontend Engineer, I wanted to take a minute to walk through some successes on the React Frontend specifically.

Component-Driven

We are fans of component-driven development regardless of the technology. React not only supports this methodology, it encourages it out of the box. For our purposes, we knew we wanted to leverage React’s best practices for writing simple, modular UI components while also using Atomic Design principles to organize them and create an interface. We also wanted a way to share this component library internally and externally for consistency, approvals and documentation. The logical next step was a shared styleguide.

Automated Styleguide

While there are a number of great prototyping tools out there (in fact, we built our own, Emulsify, for PHP projects), one that has gained a lot of traction in the React/JavaScript space is Storybook. Storybook self-identifies as a “UI Development Environment,” which is an apt name.

It’s not just a lovely way to view/share UI components, it also ships with the niceties of a modern prototyping system, including CLI tools, live reloading and a growing ecosystem of Addons.

Accessibility

We strive to keep accessibility best practices in mind for all projects, but we have found that it helps to have automated tooling in place to catch errors. The Storybook community has an addon for testing components using the a11y accessibility library. This addon highlights accessibility errors directly in the UI, which makes it simple and easy to fix accessibility errors as they arise on the project.

Testing

Building with React also gives us access to a robust ecosystem around testing. For this project, we chose to use Jest/Enzyme and used Jest Snapshots. This allowed us to test against code quality and interactions as well as unintentional UI changes. There is also a Storybook Addon for bringing Jest results into the Storybook UI, although we didn’t use that on this project. We chose to simply run our tests as command line tasks wrapped into the commit process.

Performance

As a Frontend engineer, I can’t talk about success on a project without knowing that performance has been a fundamental priority. On this project, that covered everything from how we wrote our React components (more on that in a future post) to optimizing and lazy loading images. All this added up to the project increasing overall load time performance by up to 40% with first-byte time down to less than 0.5 seconds and rendering starting around 1s for the average 2018 internet speed. There is even more we plan to do here over time, but we are very happy with these early results for launch.

Closing Thoughts

In summation, we are very proud of the work we did alongside the PRI.org team! Not only was the technology stack fun to work with, but we were able to deliver a responsible, performant foundation for future PRI.org projects leveraging this automated, tested component library. Check it out at pri.org!