What is Developer Experience?

#javascript #programming #webdev #vue

After my first article that was not related all that much to the code but more to the developer culture, I thought that I will try to write something about Developer Experience, another great topic that I really enjoy educating and improving on the daily basis. My previous article was about DevRel which is quite close to todays topic and received quite a positive feedback so it motivated me to write this one :)

What is Developer Experience (DX)

When it comes to DX, I always like to explain it as User Experience for Developers. In many cases, first users of your product or project might be developers so why dont make the experience of using it simple and straightforward so that developers would enjoy using it. Such approach has many benefits that will make your product/project more visible, popular, and usable.

Below definition sums up the topic quite nicely:

The Developer Experience (DX) describes the experience developers have while using or working on your product. It is a package of positive and also negative feelings. In many companies, dealing with DX is often secondary to trying to make a User Experience (UX) as good as possible. This approach is unfortunate - developers are users too! They use your product, frameworks, tools, etc. and they have some experience of using it. It is up to you to decide if this experience is going to be a good one or a bad one. But remember, their satisfaction and happiness are crucial for the success of your project. Happy developers create exceptional software in the long term. A positive developer experience, ensures that your developers are happy, satisfied, and less likely to leave your team.

For more info about this topic youc can check out here

As we know already what is DX, let's analyze few examples to see how they make the experience great for developers.

Nuxt 3

As I come from the Vue ecosystem mainly, I decided to take Nuxt 3 and analyze how it improves the Developer Experience in comparison to its previous version and other tools on the market.

I also had a talk about this topic for Vue Storefront Hackathon that you can check out below:

Basically, Nuxt core team has dedicated a lot of time to make experience using newest version of Nuxt basically the best possible. Below I am listing few of these features that elevate Nuxt to another level (of course in my opinion):

Usage of Vite -> Vite improves build and local development run times drastically so that the experience of building and running an application is almost instant.
Full TypeScript support -> Have you encountered a situation where you have an issue caused by wrong types or property not available? This is no more in Nuxt as their newest version support TS out of the box so you get full type safety out of the box
Nuxi CLI -> a great new tool for bootstrapping, building, creating new elements, etc. I also participated in creation of this tool by my contribution that you can read more here
Modules -> Many modules that are supported by great community that will allow you to build you next (Nuxt) app with ease!

If you have not tried Nuxt 3, I highly recommend you to try it out as it is great tool for building modern websites!

Storyblok

Storyblok is a Headless Content Management System, that tries to be up to date with the modern development trends and the team is doing a great work there! It has a support for all modern JS frameworks and it is a great asset if you are looking for future-proof CMS. Alex Jover Morales had a great talk at Vue.js Amsterdam and Vue.js Barcelona about their journey in improving DX in their Storyblok Nuxt module.

Basically, in previous version of the module, you as a developer would have to write below code to be able to fetch the content from Storyblok and also be able to modify it in the Visual Editor:

<script>
  import { useStoryblokBridge, useStoryblokApi } from "@storyblok/nuxt-2";

  export default {
    asyncData: async ({ app }) => {
      const storyblokApi = useStoryblokApi();
      const { data } = await storyblokApi.get("cdn/stories/vue", {
        version: "draft",
      });
      // OR: const { data } = await app.$storyapi.get("cdn/stories/vue", { version: "draft" });

      return { story: data.story };
    },
    mounted() {
      useStoryblokBridge(this.story.id, (newStory) => (this.story = newStory));
    },
  };
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

With their latest changes for Nuxt 3, you can achieve the same result with the following code:

<script setup>
  const story = await useStoryblok("vue", { version: "draft" });
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

Doesn't it look great? I think so! If you are looking for a great CMS, Storyblok would be my recommendation.

My Algolia module

The last example in this article will be Algolia module for Nuxt that I created. Algolia is a very fast search engine that you can connect to to fetch search results, recommendations, and many more!

You can check out the module here

In this module, I wanted to make the Developer Experience a priority so that whatever a developer needs to do with Algolia, she/he should be able to do with my module. That is why, the module supports not only fetching search results, but also recommedations, docsearch, vue-instantsearch, indexer, and many more! And all these additional options are mainly available as a single configuration option change (i.e. recommend: true)

Below you can see the example of fetching search results in Nuxt 3 app:

<script setup>
const { result, search } = useAlgoliaSearch("test_index"); // pass your index as param

onMounted(async () => {
  await search({ query: "Samsung" });
});
</script>

<template>
  <div>{{ result }}</div>
</template>

You can read more about the usage of the module in Headless Commerce app with Nuxt 3 here

Summary

In this article, I wanted to show you some examples of good Developer Experience that is worth following in my opinion. Making your product or project have a great developer experience will for sure require spending some resources, but the outcome will be worth it! With this knowledge, go there and improve the DX of your next (maybe Nuxt ;) ) project!