Доброго времени суток!

Меня зовут Андрей, я хочу рассказать Вам о своем проекте, который разрабатываю в свободное от работы время. Он уже достиг этапа, когда есть, что показать и от этого не станет стыдно.

Итак, приступим!

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

И в какой-то момент пришло понимание, что работа с макетом отнимает непростительно много времени, немного поискав, нашел плагин для Photoshop'a, который генерировал готовые стили на основе слоя. Это было для меня как новый виток в развитии, казалось, что до этого я не верстал вовсе, а баловался.

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

Попробовав его, я понял, что мне нужно, но было несколько факторов:

1. Мне нравится программировать
2. Я не хотел, да и честно говоря, не мог себе позволить, столько платить за их продукт
3. Пункт про лень и желание все оптимизировать

возможно, было что-то еще, но это уже второстепенное.

И тут я понял, что могу попробовать написать небольшую программку для себя, чем и занялся.
Примерно через 3 месяца неспешного ковыряния документации по psd и самих макетов в хеш редакторе на свет появилась самая первая версия моей поделки, не имевшей тогда названия:


Это был десктопный клиент, написанный на node-webkit. Как инструмент для себя он был неплох, моя продуктивность подросла, стало появляться свободное время, и я его пускал на доработку Marsy, там не было экспорта изображений, но были возможности, которые мне помогали: быстрое копирование стилей и текстов слоя, но самым полезным был режим сравнения нескольких макетов. В нем было видно какие слои изменились, и чем они отличаются — это помогало очень быстро делать адаптивный дизайн, имея макеты разных разрешений.

Немного позже я завел группу в VK, люди начали интересоваться и я решил, что нужно дальше развивать программу.

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

Слои в макетах бывают очень большими и мне не хватило навыков или знаний, чтобы подружить огромные массивы с информацией о пикселях и node-webkit. Начались большие просадки по памяти, частые вылеты из-за ее нехватки. Из-за этого пришлось отказаться от js и перейти на другой знакомый мне язык — java.

Смена языка очень сильно сказалась на производительности, парсинг начал просто летать, но памяти все еще требовалось немногим больше, чем потреблял Photoshop.

С тех времен остался один скриншот:



В тот момент я понял, что нужно уходить на сервер — у пользователя не тратятся ресурсы, мне проще разрабатывать, зная, что приложение работает в одном, подконтрольном мне окружении.

Сказано — сделано.

Парсер переписан под веб архитектуру, заказан VPS, поднят tomcat, БД, написана клиентская часть, и начинается закрытое тестирование по приглашениям.

Так выглядел сервис на тот момент:


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

И вот прошел год, было множество обновлений, я сменил работу, отдалился от верстки, ушел в чистый react, практически без макетов.

Перевел на него клиентскую часть Marsy, оптимизировал многое на сервере.

Стек технологий и инструментов на сегодня: java, Spring framework, React, Redux.

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


Все возможности Marsy я не буду описывать, они видны в видео, там это показано нагляднее, но вот несколько особенностей, которые вроде не вошли в видео:

1. поддержка смарт объектов и возможность открыть их
2. возможность создания прямых ссылок на макет, по которой можно открыть его без необходимости авторизовываться вроде этой
3. пакетное скачивание изображений с настройкой качества
4. использование переменных

Наверняка есть что-то еще и я забыл упомянуть, но Вы можете сами посмотреть и оценить.

Если Вам будет интересно, могу написать отдельную статью, в которой подробнее опишу техническую часть и особенности работы с psd форматом.

Как попробовать

Приложение доступно бесплатно по ссылке Marsy.
Так же можете посмотреть видео с полным описание его возможностей, правда с тех пор некоторые вещи изменились.

Если нет времени или желания регистрироваться, то можете попробовать тестовый аккаунт:

логин: 12345
пароль: 12345

Спасибо Вам за внимание,

andrey@markupeasy.ru
www.markupeasy.ru

Всем удачи!