DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for What is Developer Experience?
Jakub Andrzejewski
Jakub Andrzejewski

Posted on

What is Developer Experience?

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.

Developer Experience

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):

  1. 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.
  2. 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
  3. 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
  4. 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.

Storyblok DX

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (6)

Collapse
 
adriens profile image
adriens

"The Developer Experience (DX) describes the experience developers have while using or working on your product. "

This i'm focusing now with my team. First for internal team...then finally for developers outside of the enterprise to help people use our products.

The cool thing is that it makes internal teams more productive as at the end the approach and tehchniques are the same : it's a cultural shift.

Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski Author

Very good approach! If you want to invest more into that, you can also check out my previous blog post as it is about DevRel πŸ™‚

Congratulations on this decision, it definitely reward you in the future πŸ˜‰

Collapse
 
yuridevat profile image
Julia πŸ‘©πŸ»β€πŸ’»

Good article, something I never thought about in this kind of way. I should start on focussing on this approach, thanks for sharing!

Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski Author

I am really glad you like it!

Collapse
 
samuelsnopko profile image
Samuel Snopko

πŸ‘

Collapse
 
jacobandrewsky profile image
Jakub Andrzejewski Author

After recording a video with Alvaro where we used the storyblok vue plugin, switching to Nuxt module is such a joy πŸ’š

All DEV content is created by the community!

Hey, if you're landing here for the first time, you should know that this website is a global community of folks who blog about their experiences to help folks like you out.

Sign up now if you're curious. It's free!