Лого vc.ru

Инструмент: Командная разработка интерфейсов вместе с theprotein.io

Инструмент: Командная разработка интерфейсов вместе с theprotein.io

Менторы рубрики «Интерфейсы» на vc.ru продолжают публиковать кейсы и инструменты российских компаний, которые будут полезны представителям индустрии.

Сегодня в выпуске — рассказ команды российского сервиса theprotein.io, который позволяет дизайнерам, разработчикам и тестировщикам вести совместную работу над проектированием интерфейсов.

Вместо того, чтобы изобретать очередной велосипед из «новых» инструментов и фреймворков, пилить живые стайлгайды или внедрять компонентный подход, мы нашли путь к дирижированию этим набором — theprotein.io помогает превратить текущий набор инструментов в полезный коктейль для здорового образа работы.

Protein синхронизирует работу над компонентами интерфейса независимо от их представления и исполнения, будь то графический редактор вроде Sketch или Adobe Illustrator или код на любом фреймворке или платформе.

Цель продукта — провернуть революцию сознания в проектировании и разработке интерфейсов.

Сервис разрабатывается командой из России, члены которой успели поработать в крупных компаниях и проектах, таких как «Яндекс», «Альфа-Банк», «Мегафон» и «Мануфактура», и не понаслышке знают все проблемы разработки.

Protein ориентирован на совместную работу внутри продуктовых команд (дизайнеры, разработчики, тестировщики), но не переучивает никого из них и не заставляет внедрять новое в привычный процесс. Он помогает получить максимум пользы и настроить правильную диету в команде благодаря синхронизации компонентов между их представлением в различных технологиях.

Кстати, как раз сегодня мы обновили и сайт продукта. Поэтому советуем обязательно заглянуть на theprotein.io.

Компонентный подход

Компонентный подход — это способ разработки ПО, который обеспечивает продуктивную работу всей команды над продуктом. Он позволяет разделить большой проект на мелкие части, которые будет легче разрабатывать, тестировать и поддерживать. И чем независимей друг от друга, проще они будут, тем лучше.

Сам по себе этот подход — не новинка. Он применим практически ко всем областям разработки, включая разработку интерфейсов. Если интерфейс проекта разбить на независимые компоненты, то и работать над ними по отдельности всей командой будет проще и легче.

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

Представьте себе простую форму входа в почту. Она состоит из полей для ввода логина и пароля, а также кнопки «Войти». Все это компоненты интерфейса. Каждый из них обладает своей логикой и оформлением. Эти компоненты легко переиспользовать, так как в 90% случаев логика от проекта к проект, в отличие от визуальной части, не меняется.

Это справедливо и для разных платформ. Например, на мобильных устройствах эти компоненты и интерфейс целиком могут и выглядеть, и работать одинаково, однако, внутри быть устроены по-разному.

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

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

Все бы ничего, но, как и у всех подходов, у компонентного есть свои недостатки. В проектных командах версии компонентов, над которыми работают дизайнеры и разработчики, в один момент времени могут разниться. Это происходит как на уровне визуального дизайна, так и на технологическом уровне.

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

С этой болью и помогает бороться Protein, который берет на себя работу по синхронизации компонентов независимо от их технологической основы.

Протеиновая диета

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

Вместо вас разбором изменений теперь будет заниматься Protein: он поймет, какие изменения произошли с макетом, превратит их в код на нужной платформе и доставит пуллреквестом в репозиторий. В обратную сторону все изменения в коде будут транслированы в набор инструкций для дизайн-инструмента, которые воссоздадут изменения в документе.

Стоимость

Сейчас Protein находится в активной фазе разработки. Мы планируем запустить предпродажи продукта уже в это Рождество. Годовую подписку на групповую лицензию можно будет приобрести с более чем 50% праздничной скидкой. Цена годовой лицензии составит $99, тогда как после официального релиза вырастет до $199.

Сетка месячных тарифов также находится в стадии планирования. Мы стараемся учесть интересы команд разного уровня и размера, и поэтому подходим к вопросу тщательно. Вся информация в скором времени будет на официальном сайте проекта theprotein.io.

Интегрированные возможности

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

На сегодняшний день Starter Kit работает на Mac OS для Sketch, React, Angular и БЭМ-шаблонизаторов.

Starter Kit позволяет:

  • редактировать комопоненты в любимом дизайн-инструменте;
  • редактировать визуальное представление и структуру компонентов с live-preview как в дизайн-инструменте так и в любимом IDE;
  • генерировать стайлгайд из живых компонентов с полным набором состояний, видеть его отображение в браузере и дизайн-инструменте;
  • обмениваться компонентами между дизайнерами и разработчиками на разных стеках технологий;
  • иметь четкое версионирование как библиотек компонентов, так и каждого компонента в отдельности;
  • получать дизайн изменения через пуллреквест в виде кода и инструкций;
  • интегрировать компоненты с внешними сервисами.

Starter Kit включает в себя базовый набор функциональных инструментов, которые могут быть расширены интеграциями с ПО или внешними сервисами за дополнительную стоимость.

Например, чтобы при создании компонентов c live-preview оперировать живыми данными, команда предусмотрела интеграцию с Parse. А чтобы использовать свои компоненты в прототипировании будет интеграция с Invision, FramerJS, Pixate и другими инструментами вида онлайн-конструкторов.

Воркфлоу

Protein не меняет привычный рабочий процесс и не заставляет приучать всю команду пользоваться новым инструментом. Он позволяет стартовать сиюминутно и сразу же получить пользу.

Для дизайнера Protein будет выглядеть как 2 горячие клавиши в дизайн-инструменте: ⌘P на отправку изменений и ⌘⇧P на получение. Для разработчика — дополнительный remote в репозиторий Protein Cloud.

Быстрый старт

Начать использовать Protein можно действительно с нуля, не имея никакой библиотеки компонентов или проекта на каком-либо стеке технологий.

Для этого будет необходимо зарегистроваться в сервисе и создать новый проект с помощью веб-интерфейса или клиента Protein Transporter.

Затем открыть Sketch, создать новый документ и инициализировать работу с Protein горячей клавишей ⌘⇧P . В документе будет создан новый артборд с гайдом из компонентов, которые можно будет использовать в качестве символов во всех макетах.

Теперь вы можете создать простой компонент кнопки, привычным образом. Каждый компонент должен быть оформлен в группу и иметь уникальное название.

Когда работа над компонентом закончена, нажмите ⌘P для отправки изменений в репозиторий. Protein Transporter за вас создаст новую ветку и закоммитит в нее измненения, после чего доставит их в репозиторий.

Получить репозиторий с компонентами можно через Protein Transporter (на примере выше) или через консоль, набрав в терминале команду:

Каждый компонент имеет конфигурационный файл, который описывает его название в виде класса, состояния и способа отрисовки.

Компонент — это абстракция над технологической реализацией в проекте. В общем случае для отрисовки компонента не нужно ничего. Но по мере роста его сложности может понадобится стилевое оформление, описанное на одном из препроцессоров, а так же шаблон, описывающий его структуру на одном из шаблонизаторов.

Вся нужная информация содержится в конфигурационном файле, который записывается на стандарте ES2015. Большинство компонентов будут иметь схожие настройки, которые описаны в корневом конфигурационном файле, который описывает построение гайда в целом.

Это все, что необходимо для работы с Protein.

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

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

Все члены команды получат сообщение о том, какой компонент изменился, и в любой момент смогут эти изменения получить.

Интеграция в процесс

А что, если у вас уже есть проект, где используются препроцессоры и шаблонизаторы? Что если вы используете один из популярных CSS-фреймворков или у вас множество библиотек компонентов?

Protein прозрачно интегрируется в любой технологический стек, принятый в команде. Достаточно установить приложение Protein Transporter и описать в виде простого конфига компоненты внутри проекта. Далее одной командой вы получите собранный стайлгайд из компонентов во всех состояниях и модификациях и начнете работу над проектом. Этот же гайд будет передан в облако для синхронизации с другим представлением, например, со Sketch.

Дизайнерам никаких конфигов писать не нужно. Во время установки Protein Transporter будет установлен плагин в дизайн-инструмент, с которым работает дизайнер проекта. Он и будет добавлять горячие клавиши для отправки и получения изменений.

Protein работает:

  • с любым препроцессором, который умеет возвращать CSS, и любым шаблонизатором, который умеет возвращать HTML для веб-компонентов. Под это определение подходят все современные фреймворки и препроцессоры;
  • с любым редактором, который работает с вектором;
  • с любой платформой, где интефейсы могут быть представлены в виде XML.

Единственное требование к компонентам — это уникальность имени. Этого можно достичь методологиями вроде БЭМ, SMACSS и другими.

На скриншотах ниже в качестве примера изображен гайд, собранный из Twitter Bootstrap, и его отображение в браузере и Sketch.

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

Профит

Обычно, если продукт представлен на различных платформах, то его интерфейсы разрабатываются и поддерживаются независимо. Сколько платформ, столько и наборов компонент. Кроме того, список множится на количество версий и членов команды в рамках одной платформы. В самом лучшем случае — один дизайнер, один разработчик и один продукт — продукт на макетах, в вебе и ios составляет 5 наборов компонентов.

Поддержанием всего этого «биоразнообразия» в консистеном виде приходится заниматься на уровне кнута. Большую часть времени этот подход не работает. А с ростом команды, платформ и списка до 20-30 наборов представляет угрозу для развития продукта, поддерживать который становится просто невозможно. Не говоря уже о том, что продукт может быть не один.

С Protein набор компонентов одного продукта всегда будет в консистентом и актуальном состоянии, в единственном экземпляре и у всех членов команды.

Планы и рынки

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

Вместе с live-preview это позволит быстро собирать прототипы из живых продакшн-версий компонентов, которые можно будет смело передавать в разработку без зазрения совести.

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

Это заметный шаг вперед по сравнению со всеми современными сервисами прототипирования, такими как FramerJS, Pixate, proto.io или Principle, код которых можно смело отправлять в мусорное ведро.

Мы планируем работать над поддержкой различных платформ, таких как Windows, Android и iOS, чтобы нужные фичи работали и облегчали жизнь разработчикам, дизайнерам и всей команде.

Теги
Статьи по теме
Инструмент: Совместная работа над проектированием интерфейса при помощи RealtimeBoard
0

Так и не прочитал, в каком именно месте у вас можно удобно работать над интерфейсами?

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

В итоге, пробыв пару недель на платной подписке у Fluidui, попробовав proto.io и парочку остальных ноунеймов, ничего лучше чем Google Drawnings просто не нашел.
Интерфейсы обсуждаем там, редактор простой, но позволяет вообще все. Никаких скетчей и фотошопов. Потом просто передаем дизайнеру и он делает макеты для разных устройств. Все.

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

Protein, как написано в статье, не какой-то новый редактор, в котором нужно будет работать команде, а сервис, которые поможет сделать привычные инструменты эффективнее. Его задача как раз помочь вам работать с вашими привычными инструментами эффективнее и вместе, командно, помочь настроить правильную синхронизацию между продуктами и платформами, которые сейчас не соединить никак кроме как костылями. Protein синхронизирует компоненты интерфейсов, которые каждый член вашей команды правит в своем любимом редакторе графики или IDE, между собой — между платформами, технологиями, людьми. Какими бы они не были: Sketch, AI, React, IPhone, Android или Windows. Работайте в том, что привычно, а пользу получайте вместе сообща — в этом суть сервиса. Скоро на сайте появится демо продукта, где можно будет увидеть работу Protein. Подпишитесь на рассылку или твиттер @protein_io, чтобы это не пропустить. Возможно тогда вам станет более понятен процесс.

Вы не к той проблеме пулю подбираете, у ребят задумка супер-крутая.

Нарисовал дизайнер компонент в скетче, сохранил — а у разработчика подтянулся тот же компонент, только уже "в коде", а не в мокапе-скетче-чем-там-еще. Подкрутил что-то разработчик — дизайнер увидел (или не увидел, но получил) его изменения.

В итоге прототип собирается сразу из React- или Angular- компонент, а не из картинок и непонятной ерунды.

0

Андрей, вы используете дизайнера только чтобы раскрасить экраны? Очень ему соболезную.

0

А что не так? UX и мокапами у нас занимается человек, который понимает функциональность и требования. Дизайнер, в общем случае, тонкостей не знает.

Да нет, всё так. Просто каждый выбирает свой путь. Какие-то дизайнеры раскрашивают кнопки, другие — решают задачи. Какие-то заказчики дают дизайнеру раскраску, у других дизайнер является частью продукта и работает в связке с девелоперами, маркетологами и так далее.

0

Именно. У каждого свои тонкости разработки. Главное чтобы работало все.

Сделайте что ли демку бесплатную на пару недель хотя бы.

Мы планируем проводить закрытое тестирование, если есть желание поучаствовать то пишите нам на ask@theprotein.io. Мы будем очень рады!

Я тоже написал, очень хочется попробовать, облегчите жизнь многократно.

0

Только скетч поддерживаете?

0

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

0

Наши дизайнеры рисуют в фотошопе и вряд ли перейдут на что-то другое.

Пока у нас в приоритете Sketch и AI. Дальше будет видно.

0

Будет зависеть от спроса снаружи :) Пишите нам, а мы посчитаем

Интересно, есть ли успешные истории перехода на компоненты кроме яндекса, мейл.ру и альфа-банка? Польза понятна. Но, по личному опыту, это задача не из лёгких и дешёвых.

Не очень понятно что под этой фразой: истории перехода на компоненты. Задача на такая уж и сложная, было бы осознание для чего это надо.

0

На Западе уже все перешли :)

0

Какие ещё фреймворки поддерживаются кроме React и Angular?

0

Дело не во фреймворке. Дело в шаблонизаторе;-) Если ваш шаблонизатор умеет генерировать HTML или на худой конец XML, то он поддерживается. Какой именно вас интересует?

ДА ЭТО ЖЕ МАГИЯ!!! очень круто ребята! очень!

Интегрироваться в живой большой проект конечно будет сложновато. Но это полюбому круто!

Прямой эфир
Приложение-плацебо скачали
больше миллиона раз
Подписаться на push-уведомления