Open sourcing percy-web

Following in the footsteps of our sister CI services, such as travis-web, circleci/frontend, and buildkite/frontend, we’re thrilled to open source Percy’s entire frontend web application:

percy/percy-web

This is the exact code that runs our production frontend on percy.io. It’s an Ember app, running the latest Ember 2.10 release with the new Glimmer 2 rendering engine. It also uses ember-percy to test itself.

You can run percy-web locally without any API service—we use ember-cli-mirage to provide a mock API service for dev and test.

This open sourcing effort made me nostalgic to dig through some of Percy’s history. Our frontend has gone through many iterations over the last 2 years—in the very first day, it started as this:

My first mock of a repo listing…wow.

A little known fact—back then, pre-launch Percy was actually called “Perceptual CI”. Our mascot was already named Percy the Perceptual Porcupine (and, to complete the alliteration, the color scheme is purple). One day at brunch, a good friend of mine said, “Why don’t you just call it Percy? It’s shorter.” … and the rest, as they say, is history.

Here’s one of the first app iterations:

Another early mock…don’t look too closely.

The first time a Percy visual diff ever “worked”.

And of course this has grown into our modern-day app:

We use Percy itself to make sure we review all visual changes in each GitHub PR.

We’re big open source advocates, so open sourcing percy-web is a no-brainer. We hope that this encourages other services, especially fellow developer tools, to share as much as possible so that we can continue to grow and learn from one another.

A big thanks to @mfazekas for contributing recent major improvements to Percy’s frontend testing infrastructure, which got us into a good position to be able to open source percy-web. Thanks!