React Components, Design, and WordPress.com (2015)

It’s been fun to learn about the history of the Automattic dev/design team’s early work on one of the first large-scale React-based user experience deployments — having taken to heart WordPress co-founder Matt Mullenweg’s impassioned request to the entire WP community to “Learn JavaScript deeply.”

I was prompted to study our React-based design language’s history after noting all the recent press around Airbnb’s approach to integrating React in their design work with a high degree of sophistication. It turns out that Automattic and Airbnb were doing similar things when React came out — but Airbnb made stronger bets on mobile, shared tools, and machine intelligence that are now truly paying off.

Automattic released its open source React-based design language in 2016 with no public relations machine behind it — but instead quietly and with a lot of heart, as exemplified in the “values” explicitly expressed in the design system’s core documents.

0. We do it all for the user

Technology is not an end to itself, but is here to solve the problems for our users. Every technical decision we make directly impacts our users or helps us build specific features faster or better.

1. We optimize for iterating quickly

We aren’t trying to build software around a future we can’t predict. We don’t write code that we may not need. We know that no abstractions are better than bad abstractions.

2. We are here for the long haul

We understand that Calypso is here to stay and we put the extra effort into its design. We regularly act to make the design simpler and more consistent. We invest in deep understanding of the tools, languages, and techniques we use. We learn constantly.

3. We don’t trust ourselves to be perfect

We get the product to our colleagues and users as early as possible. We review each other’s code. We show incomplete work and seek critical feedback. We let automated tools help us with tasks from checking coding standards to running tests. We keep an open mind and a beginner mindset.

4. We are in it together

We help each other, because no team or person can succeed if Calypso doesn’t succeed. We give candid feedback, regardless of hierarchy. We don’t own the code we write and the features we build. We are not afraid to work on areas outside of our direct responsibilities. We leave our egos at the door.

Automattic Computational Designer Matías Ventura shared the story of how our React-based design component library came to be in Europe in 2016, and the dream lives on.

In the last year, I’ve enjoyed finding all the pieces of the Automattic universe that have consistently pushed the boundaries of design and technology — and we’re putting the pieces of the spaceship together right now. Come and join us! —JM