DX is UX: Key insights for improving developer experience

mathieu anderson front-end dev talon.one

Development

Sep 14, 2022

Reza Javanian

Mohammadreza Javanian

Editorial Content Writer

Time to read icon

5 minutes to read

Many of the world’s top businesses have turned user experience (UX) into a continuous process because they’ve realized users of their app/website are very critical when it comes to their experience.

Today customers show no sign of hesitation to abandon a brand at the slightest irritation: a delayed response, an unexpected behavior, an unresponsive app button, or an unpleasant design.

But developers often resign themselves to the pains and discomfort of their daily codease:

  • Long build time

  • Bizarre tests

  • Mysterious black boxes of legacy code

  • Endless debates about inconsequential choices

  • Unhelpful review processes

These are all bad experiences. However, they’re all preventable and fixable. Developers, as the users of their codebase, need to make their journey as delightful and frictionless as possible. 

How can developers improve their experience (DX) of the development process? What tools are there to assist them?

These are some of the questions that one of Talon.One’s front-end developers, Mathieu Anderson, addressed in his presentation at JSConf Budapest 2022. Here’s some key takeaways from Mathieu’s talk. You can watch the complete presentation here.

Make DX fast – Speed

Speed is a key metric for evaluating the quality of DX. Long processes and legacy software delivery lifecycle irritate developers. The following tips and tools help increase the speed of the development process.  

Continuous delivery

Research shows that high performance teams consistently deliver services faster than their competitors. The core of continuous delivery is that everything that gets merged to the main branch is immediately deployed for all of your users. 

As a result of continuous delivery, developers

  • Have to make smaller changes

  • Will be able to make more incremental pull requests (PRs)

  • Can do the review faster (it’s easier to review a hundred lines than 10 thousand lines) 

  • Can iterate faster on their features

Well-defined tasks

Developers enjoy intellectually stimulating conversations with product designers and product managers. However, these conversations need to take place at specific times during the lifecycle of a feature deployment. If tasks are not defined early, they will turn into serious bottlenecks for developers.

Review process

If you care about code quality and knowledge sharing, you need to implement a review process. There are automated ways that clearly define who does what. Or, you can simply talk to your colleagues and agree on your code. 

Don’t forget the golden rule of code review: “Respect others and don’t take anything personally! We all make mistakes at some point.”

Useful tools

These tools can help you accelerate the development process and create a better DX:

  • Vite: Fast, many-featured, low-config JavaScript bundler. Vite is created for Vue but supports others (React, Svelte).

  • esbuild: esbuild is the fastest JavaScript bundler, but not as full-featured as some other fast alternatives.

  • turborepo: turborepo is an impressively performant build system for JS/TS monorepos.

Make it standard – Predictability

The following insights help developers create a standard DX that is rarely affected by unexpected bottlenecks:

Code formatting

No developer wants to argue about certain things in a codebase including semicolons and codes. You can use a code formatter like Prettier that supports many languages and integrates with most editors. 

Code linting

Your next step to make DX a standard experience is code linting. Code linting is different from code formatting as the latter refers to how it looks while the former is concerned with what it does and how. 

Libraries 

JavaScript is an amazing language because you can do anything anywhere you want. JavaScript is also a terrible language because you can do anything anywhere you want. This is particularly painful when you work with dates and numbers. 

Pick a library to standardize your numbers, dates, etc. It doesn’t have to be the best library; it should be the one that works best for you. 

Documentation 

Standard documentation is not limited to written documents; rather, it refers to all measures you can take to ensure that whoever comes to your code can find the information they need. 

Useful tools

These tools can help you standardize your DX and remove ambiguity from the development process:

  • Rome: Standardize your whole toolchain with Rome. It aims to replace the disparate tools by one single tool.

  • Next: Next.js gives you the best DX with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling and route pre-fetching. No config needed.

  • Prettier: It’s an extremely opinionated code formatting tool, which gives you maximum brain time by limiting config options.

  • ESLint: ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

  • date-fns: Until the Temporal API ships, date-fns is one of the best options for managing time in JavaScript.

  • numbro: numbro is a JavaScript library for converting, formatting and manipulating all your numbers.

  • Docusaurus: You can generate your documentation website with MDX. Docusaurus allows you to save time and focus on text documents. 

  • JSDoc: You can write comments in your code, run a tool to pick them up and generate an HTML file with JSDoc

Make it dependable – Reliability

Broken codes should be detected and fixed as soon as possible. But ideally, codes shouldn’t even break in the first place. How can developers get into this ideal state?

Types 

The most popular typed superset of JavaScript is of course TypeScript. However, there are other types (see Useful tools below) that help you catch errors early in your editor.

Testing (machine)

(Automated) testing can make your app reliable and your DX much better. You can use unit tests for small functions and integration tests for more complex flows.

Testing (human)

Testing by humans is as important as automated testing. Developers don’t write codes to pass an automated test. They write codes to provide people with a pleasant app experience and help them achieve results. 

Reporting 

Even if developers implement everything as they should, things may break at some point. It’s inevitable. Implement a monitoring tool, have reporting and prioritize issues to create a smooth DX.

Useful tools

These tools can assist you in minimizing the bottlenecks and maximizing the reliability of your DX:

  • TypeScript: TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

  • PropTypes: Not ready to let go of dynamic typing? Proptypes in React are still a great win for reliability.

  • Testing Library: It is the most popular testing utilities collection for React environments. Testing Library is very opinionated. 

  • Cypress: Cypress is the most popular end-to-end testing framework for browser applications.

  • Jest: It’s the most popular JS testing framework. Jest will run all of your tests.

  • Sentry: Sentry helps you with error reporting. It is quite straightforward and very flexible.

  • Honeycomb: Honeycomb is a fast analysis tool that reveals the truth about how users experience your code in complex and unpredictable environments. 

Make it pleasant – Delight

Developers can find their work taxing at times so they need to have fun too. Nothing can help a developer thrive more than a healthy and friendly work environment. 

Support 

In order to make your DX delightful you need to make sure you support your fellow developers and get support from them. The more you feel supported, the less you will feel overwhelmed by your work.

Sharing 

Developers also should pay special attention to sharing their experience with other developers. Sharing knowledge helps developers perform better and become stronger as professionals. 

Talon.Onecan improve the experience of developers by providing them with a tool that saves them months of hard work. To top that off, developers can get dedicated technical support through Docs, SDKs and Technical Engineers that guide them along the way.

Monthly Newsletter

Every month, I share an insights newsletter with thousands of marketers.

bullet point check

Promotion tips

bullet point check

Industry insights

bullet point check

Case Studies

Newsletter author

David Hartery

Content Lead at Talon.One

Talon.One Logo
The World's Most Powerful Promotion Engine
BERLIN

Wiener Strasse 10
10999 Berlin
Germany

BIRMINGHAM

41 Church Street
B3 2RT Birmingham
United Kingdom

BOSTON

One Boston Place, Suite 2600
02108 Boston, MA
United States

SINGAPORE

1 Scotts Road, #21-10 Shaw Centre
228208 Singapore
Singapore

Capterra LogoG2 LogoMach Alliance Logo
© 2022 Talon.One GmbH. All rights reserved