A few days ago Jake Archibald ruffled some feathers with this observation:
This strongly reminded me of the first and most important item in AMP’s design principles:
User Experience > Developer Experience > Ease of Implementation
So, given that my project is setting very similar guidelines compared to what Jake implied in his tweet, I thought it’d be useful to explain the thinking behind it.
When creating systems for user facing software, then user experience is more important than developer experience. We add a third item for AMP: “Ease of implementation” is less important then developer experience. The implementation here refers to the creator of the underlying system and framework (in our case AMP). The idea is that the framework creator should always strive to optimize developer experience, even if they have to work harder for it.
Of course, there is a lot of nuance to the statement that user experience is more important than developer experience. The most important nuance is that in many, many cases they do not stand in conflict at all. Furthermore, in a large number of cases improving developer experience is the best way to improve user experience, so rather than being in conflict these goals are often in congruence. My favorite example is to improve developer experience by speeding up the iteration cycle (e.g. by improving build time or providing hot reloading): This is great for developers and it allows them to spend more time improving UX in any given day, thus leading to better results.
Similarly, there are many cases where improved developer experience might just enable a piece of software being build in the first place. The UX might not be perfect, but at least the thing exists. That should typically be a net win :)
Having said all this, there are trade offs where improved developer experience, just leads to bad UX. My favorite example is
which has much better developer experience, than
<img src=”./image.jpg” width=400 height=300>
The first image tag is missing the dimensions. (Ignoring the complexities of responsive sizing that do not impact the point) This is great for the developer. They literally do not need to write the piece of software that determines the dimensions, which saves a little bit of time. Now what happens is that the browser will assume: “Ah, no dimensions, the image is probably 0 pixels big”. Then it will download the image and realize “Ah, it is actually 400x300, lets redraw the page”. This creates a lot of jank for the user every single time a page is looked at.
A system that favors user experience over developer experience would always make sure that the image dimensions are known when the page is downloaded. Now, of course, one could improve developer experience again, by somehow making it very easy (or automatic) to provide the image dimensions. Another case, where one can have the best of both worlds, but getting good UX does require going the extra mile during framework development.
My post about tradeoffs in server and client side rendering tries to dive into that topic in particular. The React style hydration of a server side render right upon initial load is a user experience and developer experience trade off: It is better than not doing server side rendering at all, but it is strictly worse than lazily initializing the JS on the client (because it does an initial eager diff and installs event handlers). User experience may not be ideal, but going the extra mile may not be worth it or delay shipment indefinitely for a large class of applications (maybe that class includes everything except google.com, twitter.com, and facebook.com).
Having said all this, the premise that user experience is more important than developer experience is still an important thing to keep in mind as a framework developer. We always need to ask ourselves:
- What is the right thing to do for user experience?
- How can I provide the best possible DX given my UX goals?
- What is the smallest possible UX tradeoff given my DX goals?
- How can I make tradeoffs that improve DX while sacrificing UX, but only in development mode?
- How can I document things for developers, so they can make informed tradeoffs between UX and DX?