Что такое опыт разработчика?

После моей первой статьи, которая была связана не столько с кодом, сколько с культурой разработчиков, я подумал, что попробую написать что-нибудь об опыте разработчиков, еще одной замечательной теме, которую мне очень нравится изучать и улучшать на ежедневной основе. Моя предыдущая статья была посвящена DevRel, что довольно близко к сегодняшней теме, и получила довольно положительные отзывы, так что это побудило меня написать эту статью 🙂

Что такое опыт разработчика (DX)

Когда речь заходит о DX, мне всегда нравится объяснять это как пользовательский опыт для разработчиков. Во многих случаях первыми пользователями вашего продукта или проекта могут быть разработчики, так почему бы не сделать опыт его использования простым и понятным, чтобы разработчикам было приятно им пользоваться. Такой подход имеет множество преимуществ, которые сделают ваш продукт/проект более заметным, популярным и удобным для использования.

Приведенное ниже определение хорошо раскрывает эту тему:

Опыт разработчика (DX) описывает опыт, который получают разработчики во время использования или работы над вашим продуктом. Это пакет положительных, а также отрицательных ощущений. Во многих компаниях работа с DX часто отходит на второй план по сравнению с попытками сделать пользовательский опыт (UX) как можно лучше. Такой подход вызывает сожаление — разработчики тоже пользователи! Они используют ваш продукт, фреймворки, инструменты и т.д., и у них есть определенный опыт их использования. Именно от вас зависит, будет ли этот опыт хорошим или плохим. Но помните, что их удовлетворенность и счастье имеют решающее значение для успеха вашего проекта. Счастливые разработчики создают исключительное программное обеспечение в долгосрочной перспективе. Положительный опыт разработчиков гарантирует, что ваши разработчики будут счастливы, довольны и с меньшей вероятностью покинут вашу команду.

Для получения дополнительной информации по этой теме вы можете заглянуть сюда

Поскольку мы уже знаем, что такое DX, давайте проанализируем несколько примеров, чтобы увидеть, как они делают опыт разработчиков отличным.

Nuxt 3

Поскольку я в основном пришел из экосистемы Vue, я решил взять Nuxt 3 и проанализировать, как он улучшает опыт разработчиков по сравнению с предыдущей версией и другими инструментами на рынке.

Я также говорил на эту тему на Vue Storefront Hackathon, с которым вы можете ознакомиться ниже:

В принципе, основная команда Nuxt посвятила много времени тому, чтобы сделать работу с новой версией Nuxt как можно лучше. Ниже я перечислю некоторые из этих возможностей, которые поднимают Nuxt на новый уровень (конечно, по моему мнению):

1. Использование Vite -> Vite значительно улучшает время сборки и локальной разработки, так что процесс создания и запуска приложения становится практически мгновенным.
2. Полная поддержка TypeScript -> Сталкивались ли вы с ситуацией, когда возникала проблема из-за неправильных типов или недоступности свойств? В Nuxt этого больше нет, поскольку их новейшая версия поддерживает TS из коробки, так что вы получаете полную безопасность типов из коробки.
3. Nuxi CLI -> отличный новый инструмент для бутстрапинга, сборки, создания новых элементов и т.д. Я также участвовал в создании этого инструмента своим вкладом, о котором вы можете прочитать здесь
4. Модули -> Множество модулей, которые поддерживаются большим сообществом, позволят вам с легкостью создать ваше следующее (Nuxt) приложение!

Если вы еще не пробовали Nuxt 3, я настоятельно рекомендую вам попробовать, так как это отличный инструмент для создания современных веб-сайтов!

Storyblok

Storyblok — это безголовая система управления контентом, которая старается соответствовать современным тенденциям развития, и команда проделывает большую работу! Она поддерживает все современные JS-фреймворки и является отличным подспорьем, если вы ищете перспективную CMS. Алекс Джовер Моралес выступил на Vue.js Amsterdam и Vue.js Barcelona с отличным докладом о своем пути по улучшению DX в модуле Storyblok Nuxt.

В принципе, в предыдущей версии модуля вам, как разработчику, нужно было написать следующий код, чтобы получить контент из Storyblok и изменить его в визуальном редакторе:

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

С их последними изменениями для Nuxt 3, вы можете достичь того же результата с помощью следующего кода:

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

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

Разве это не выглядит великолепно? Думаю, да! Если вы ищете отличную CMS, я рекомендую вам Storyblok.

Мой модуль Algolia

Последним примером в этой статье будет модуль Algolia для Nuxt, который я создал. Algolia — это очень быстрая поисковая система, к которой вы можете подключиться для получения результатов поиска, рекомендаций и многого другого!

Вы можете ознакомиться с модулем здесь

В этом модуле я хотел сделать приоритетом опыт разработчика, чтобы все, что разработчику нужно сделать с Algolia, он мог сделать с помощью моего модуля. Поэтому модуль поддерживает не только получение результатов поиска, но и рекомендации, docsearch, vue-instantsearch, индексатор и многое другое! И все эти дополнительные опции доступны в основном как одно изменение опции конфигурации (т.е. recommend: true).

Ниже показан пример получения результатов поиска в приложении Nuxt 3:

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

Подробнее об использовании модуля в приложении Headless Commerce с Nuxt 3 вы можете прочитать здесь

Резюме

В этой статье я хотел показать вам несколько примеров хорошего опыта разработчика, которому, на мой взгляд, стоит следовать. Чтобы сделать ваш продукт или проект с отличным опытом разработчика, конечно, придется потратить некоторые ресурсы, но результат будет того стоить! С этими знаниями идите и улучшайте DX вашего следующего (возможно, Nuxt 😉 ) проекта!