Работа с не-разработчиками над интерфейсными проектами

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

Работа с не разработчиками, как если бы они были частью команды разработчиков

Как разработчики, мы делаем все возможное, чтобы сотрудничество было максимально эффективным. Мы стараемся сделать наш код понятным, используя стандартизированный стиль кода и рекомендуемые шаблоны проектирования. Мы автоматизируем все в нашем рабочем процессе, обеспечивая быстрое и точное общение (код или естественный язык). Мы выпускаем новые обновления кода как можно чаще с настройкой CI / CD, тестированием и обнаружением ошибок как можно скорее.

Все это замечательно, но фронтенд-разработка не ограничивается только фронтенд-разработчиками - хорошее сотрудничество должно включать также и тех, кто не занимается разработкой.

Итак, почему мы соглашаемся на неэффективное общение между разработчиками и UI-дизайнерами / UX-дизайнерами / менеджерами по маркетингу, а в некоторых случаях и с клиентами?

В этом посте я предлагаю решение проблемы неэффективной совместной работы с помощью Bit.dev и нескольких интеграций.

Решение (пример рабочего процесса)

1. Лиза, интерфейсный разработчик, создает / обновляет компонент в своем текущем проекте.
2. Лиза публикует свой новый / обновленный компонент в Bit.dev
3. Автоматическое уведомление, содержащее имя пользователя Лизы и сведения о компоненте, отправляется всем заинтересованным сторонам через Slack. Любой, кто заинтересован в этом компоненте (в качестве соавтора, потребителя и т. Д.), Может просмотреть его на игровой площадке Bit.dev.
4. Дизайнерам / менеджерам по продукции автоматически назначается задача в выбранном диспетчере задач компании (например, Asana) с просьбой просмотреть новые / обновленные компоненты на игровой площадке Bit и убедиться, что она действительно соответствует спецификациям.

Доставка и проверка независимых компонентов

Bit.dev - это концентратор облачных компонентов. Это место для публикации, документирования, организации и совместной работы над отдельными интерфейсными компонентами (React, Vue, Angular, Svelte и т. Д.).

Опубликованные компоненты можно просмотреть на игровой площадке Bit, установить с помощью NPM / Yarn или клонировать в любой репозиторий с помощью интерфейса командной строки Bit.

Клонированные компоненты могут быть изменены в их репозитории хоста и опубликованы (как обновленные версии) в Bit.dev.

Итак, вкратце, Bit.dev - это одновременно инструмент для создания систем проектирования и способ предоставления функций и обновлений кода как независимых компонентов.

Узнайте больше о том, как публиковать компоненты с помощью Bit, здесь:

И, чтобы этот пост был кратким и по существу, я не буду останавливаться на всех достоинствах компонентно-ориентированного проектирования или систем проектирования - если вы не уверены, я предлагаю вам прочитать эти сообщения по этой теме:

Интеграция Bit.dev со Slack и Asana

Связь через компоненты

Перенос изменений в виде компонентов позволяет более абстрактно уведомить вашу команду об изменениях. Изменение компонента легко понять, это означает, что была изменена определенная функция. Этот абстрактный способ общения позволяет всем товарищам по команде, как разработчикам, так и не разработчикам, вносить свой вклад как можно быстрее (чем раньше будет сделано исправление, тем дешевле оно будет).

Bit + Slack

Slack - это сегодня инструмент номер один для совместной работы. Практически везде. Если вы хотите, чтобы ваши товарищи по команде знали о чем-либо - вот где это должно произойти.

Чтобы интегрировать Bit со Slack:

1. У вас должна быть организация Bit.dev (организация - это объект, который группирует все коллекции компонентов)
2. У вас должна быть хотя бы одна коллекция (коллекции - это, по сути, объемы компонентов, используемые для организации компонентов, установки разрешений и т. Д.). Эта коллекция должна принадлежать вашей организации, а не пользователю.
3. Введите свою организацию и нажмите «Интеграции» (в правом верхнем углу).
4. Установите интеграцию со Slack
5. Настройте параметры уведомлений: на каком канале Slack вы хотите получать уведомления и о каких событиях или «действиях».

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

Bit Webhooks + Zapier + Asana

В отличие от «готовой» интеграции Bit со Slack, наша интеграция с Asana потребует некоторых усилий с нашей стороны.

Bit предлагает веб-перехватчики как способ интеграции с любым выбранным вами инструментом. В нашем случае мы будем использовать Asana, чтобы назначать соответствующие задачи соответствующим товарищам по команде.

Но сначала мы находимся на одной странице - что такое Webhooks?

Веб-перехватчики - это распространенный способ уведомления одним приложением о событии в реальном времени другому приложению. Веб-перехватчики часто называют «обратными API-интерфейсами», потому что приложение, потребляющее данные, не делает этого, отправляя HTTP-запрос другому API - вместо этого оно делает API доступным для приложения, отправляющего данные (обычно, отправка HTTP-запроса POST данные в формате JSON).

Настройка Bit Webhooks

1. У вас должна быть организация Bit.dev (организация - это объект, который группирует все коллекции компонентов)
2. У вас должна быть хотя бы одна коллекция (коллекции - это, по сути, объемы компонентов, используемые для организации компонентов, установки разрешений и т. Д.). Эта коллекция должна принадлежать вашей организации, а не пользователю.
3. Введите свою организацию и нажмите «Интеграции» (в правом верхнем углу).
4. Установите интеграцию с Webhooks.
5. Настройте свои предпочтения Webhooks.

• Действия: выберите, о каких событиях вы хотите получать уведомления.
• Коллекция: выберите расположение или объем компонентов, о которых нужно уведомлять.
• URL-адрес веб-перехватчика: вставьте конечную точку API (получателя данных).
• Секретный токен. Вставьте значение, которое будет служить способом аутентификации источника запросов к вашему API.

Запрос POST от Bit.dev будет иметь в заголовке «Секретный токен» по адресу x-bit-token.

Данные (JSON) будут иметь соответствующие идентификаторы компонентов (массив), имя коллекции (область действия этих компонентов) и имя пользователя инициатора действия.

Например:

{
  "action": "export",
  "bitIds": [
    "collaborative-org.shopping-cart-collection/button"
  ],
  "username": "eden"
}

Использование Bit’s Webhook для запуска Zapier

Zapier используется как способ упростить процесс. Реализация здесь полностью зависит от вас, будь то Zapier или ваше собственное решение.

Сначала я выберу Webhooks by Zapier в качестве приложения. Затем я установлю запускающее событие на «Catch hook».

Затем я скопирую URL-адрес, сгенерированный Zapier, и вставлю его в качестве своего «URL-адреса веб-перехватчика» на странице конфигурации Bit’s Webhooks. Это будет моим URL-адресом для экспорта компонентов в «корзину-коллекцию».

Затем я экспортирую компонент и попрошу Zapier убедиться, что он улавливает запрос.

Затем я выберу шаг, который будет инициирован как «Асана› Создать новую задачу », и выберу свой проект« Обзор компонентов пользовательского интерфейса », который я создал специально для этого.

Здесь я сопоставил полученный JSON (от веб-перехватчика Bit) с соответствующими полями.

Это создаст следующую задачу в Asana:

У нас есть автоматически созданная задача в Asana, которая просит не-разработчика проверить новый или обновленный компонент. Благодаря игровой площадке Bit.dev он или она может проверить отрисованный пример кода, изолированный от любого конкретного проекта.

Обратная связь от дизайнера / менеджера также может быть предоставлена ​​через Asana.

Заключение

Создание интерфейсов с использованием подхода, ориентированного на компоненты, отлично подходит по всем хорошо известным причинам, но в сочетании с Bit.dev он открывает ворота для более продуктивного взаимодействия между разработчиками и не разработчиками.

Учить больше