Лого 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, чтобы нужные фичи работали и облегчали жизнь разработчикам, дизайнерам и всей команде.

Статьи по теме
Инструмент: Совместная работа над проектированием интерфейса при помощи RealtimeBoard02 октября 2015, 10:55
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

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

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

0

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

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

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

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

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

0

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

0

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

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

0

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

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

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

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

0

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

0

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

0

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

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

0

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

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

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

0

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

0

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

0

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

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

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Дмитрий Лимонов

потому что ресторан не означает "дорого, бохато", как привыкли в РФ. Это всего лишь пункт общественного питания. Да, есть элитные рестораны, а есть в формате закусочных. Мир не кончается там, где ваши представления о нём не совпадают с реальностью.

«Будьте нашим гостем»: кому McDonald's даёт право бесплатно есть в своих ресторанах
0
Владимир Тихомиров

Похоже, пора на собеседовании в Яндекс спрашивать, в самом конце: вилкой в глаз или в жопу раз? И оценивать креативность процесса поиска правильного ответа... Будем перенимать международный опыт с адаптацией под наши условия, так сказать

Бывший глава Google затруднился ответить на один из традиционных вопросов компании на собеседованиях
0
Александр Васильев

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

«Никому не выгодно, чтобы у вас скапливались деньги»
0
Artem Zinnatullin
Juno

Не собираюсь оправдывать ролик сбера, но если вы про вот это видео с футболистом youtu.be/VGEfNcvntno, то оно ничем не лучше, тк там блин оператор(ы) по полю бегают, сверху съемка ведется и рядом с полем люди явно не на телефон снимают. Всем участникам было понятно, что это какой-то прикол. Была бы скрытая съемка — без вопросов.

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

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Artem Zinnatullin
Juno

Я может не понимаю, но в чем большая разница между "в имитирующем инвалида костюме" и "под видом инвалида"?

Не вижу "небо и земля" на скриншоте. У всех одинаково желтушные заголовки.

Видео: Герман Греф в «костюме инвалида» в отделении «Сбербанка»
0
Показать еще