К чему приводит лень или как докатиться до написания парсера psd и что из этого может получиться

в 18:52, , рубрики: html, java, markupeasy, marsy, spring framework, Развитие стартапа, Разработка веб-сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

К чему приводит лень или как докатиться до написания парсера psd и что из этого может получиться - 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

andrey@markupeasy.ru
www.markupeasy.ru

Всем удачи!

Автор: Eg0man

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js