Announcing Our All-New Configurator

So, we’ve been working on a little something for the past few months. An all-new configurator for the ErgoDox EZ (and our future keyboards), rewritten from the ground up.

Before you ask: It looks exactly like the old one, the one that’s been serving us faithfully for the past three years. Here’s a screenshot of the new one:

That’s right — we’ve committed the cardinal sin in software development. Instead of taking a legacy product and building upon it, we only took the look and feel, and rewrote everything from scratch.

So we’ve done a tremendous amount of work, only to end up with something that’s essentially what we already have. How does that make any sense?

It makes sense, because this is the starting point we wanted. In a perfect world, this is where we would have started three years ago: With a sparkling, beautifully architectured system, with great test coverage, and the ability to extend things easily and quickly in the future. Well, I’m happy to say: We have arrived.

The Tech Stack

Because many of our readers are software developers, here’s a quick rundown of the technology we used for this new incarnation of the configurator.

• We have a cleanly separated server/client system, with Rails 5.2 as the server, React 16.3 as the client, and a GraphQL API connecting them.
• On the client side, we use modern state management thanks to MobX State Tree (MST), an opinionated and solid alternative to Redux.
• To make everything look nice (and work intelligently) we used Styled Components, giving us the flexibility and power of JS right inside our CSS.
• We use Docker both for development and production, with our own Docker cluster and self-hosted registry.
• We have great test coverage, including high-level tests that run in Cypress, a modern browser-based testing solution.
• For CI/CD, we use CircleCI 2.0. Simply merging a passing branch to Master is enough to deploy the app to production.
• Our frontend code is served using Netlify, with its own CircleCI project for CI/CD. There too, simply merging to master is enough to push everything to production. We also have per-branch preview builds.
• Finally, to keep an eye on how all of this is performing, we have a self-hosted instance of Sentry talking to an internal Discord as well as integration with Skylight for Rails error reporting.

This is a lot. What’s truly astounding is that we were able to do this with a single, very senior developer — Florian Didron, from Japan. Florian had complete mastery of React entering the project, and picked Rails up while creating the new configurator (codenamed Oryx), at a pace that frankly shocked me (I’m a Rails developer myself). I (Erez) helped with some of the underpinnings of the server side, but Florian took it all from there.

There is a learning here about team size and velocity, as well as about finding the perfect people for your team. We’ll be sharing some thoughts around that, and more, in the future.

What’s Next?

We have a long list of features we are going to implement. In the near future, our goals are to:

• Enable live saving of your work as you create your layout. Actually, this is already done: Oryx saves everything you do to the server in real-time. You won’t lose any of your work if you refresh your browser before compiling.
• Get Oryx out of Beta and make it into our official configurator. For this we would need a smooth migration path from the old configurator to the new one. When you click “clone and edit this layout”, an old layout would simply open in the new configurator.
• Address any usability bugs and quirks you report during the Beta period.
• Allow you to drag layers around and give them names.
• Allow you to undo and re-do your work.
• Enable strong support for Internationalization in a number of interesting ways, including labeling your own keys.
• Unlock advanced QMK features such as tap-dance, config.h tweaks, and more.
• Finally, introduce user accounts, which would unlock a host of new features.

Additionally, Oryx will of course keep pace with the new hardware we are going to introduce, although this is not the topic for this month’s post. ;)

Your Turn

So, if you try Oryx right now, you’ll see the configurator you know and love, but with a few improvements. That’s a good start, but it’s just the start. What’s crucial for us moving forward is to keep quality exceptionally high, and for that I’d like to ask for your help: Can you kick the tires? Try Oryx out, use it for your actual layout, and let us know what you think. Can you find any bugs?

There are actually quite a few things we learned during this project from both a product and technical perspective, and we will share them in future blog posts.

So for now, try Oryx out and let us know what you think! Thank you for all the love and support.