Доброго времени суток!
Меня зовут Андрей, я хочу рассказать Вам о своем проекте, который разрабатываю в свободное от работы время. Он уже достиг этапа, когда есть что показать и от этого не станет стыдно.
Итак, приступим!
В давние времена, будучи верстальщиком я, наверное как и многие другие, пошел по пути оптимизации повторяющейся работы: сначала были просто css и html, после появились препроцессоры и шаблонизаторы со сборщиками и так далее.
И в какой-то момент пришло понимание, что работа с макетом отнимает непростительно много времени, немного поискав, нашел плагин для Photoshop'a, который генерировал готовые стили на основе слоя. Это было для меня как новый виток в развитии, казалось что до этого я не верстал вовсе, а баловался.
Но, как известно, человеческая лень и желание все оптимизировать (этим больше страдают люди близкие к ИТ) не дают покоя, и я начал новые поиски: как раз в это время появился один очень популярный ныне сервис, с непомерным ценником за подписку и бесплатной неделей использования, что породило, как мне кажется, лавинообразный прирост почтовых аккаунтов:)
Попробовав его, я понял что мне нужно, но было несколько факторов:
- Мне нравится программировать
- Я не хотел, да и честно говоря, не мог себе позволить, столько платить за их продукт
- Пункт про лень и желание все оптимизировать возможно было что-то еще, но это уже второстепенное.
И тут я понял, что могу попробовать написать небольшую программку для себя, чем и занялся.
Примерно через 3 месяца неспешного ковыряния документации по psd и самих макетов в хеш редакторе на свет появилась самая первая версия моей поделки, не имевшей тогда названия:
Это был десктопный клиент написанный на node-webkit, как инструмент для себя, он был неплох, моя продуктивность подросла, стало появляться свободное время и его пускал на доработку Marsy, там не было экспорта изображений, но были возможности которые мне помогали: быстрое копирование стилей и текстов слоя, но самым полезным был режим сравнения нескольких макетов, в нем было видно какие слои изменились и чем они отличаются, это помогало очень быстро делать адаптивный дизайн имея макеты разных разрешений.
Немного позже я позже я завел группу в VK, люди начали интересоваться и я решил что нужно дальше развивать программу.
Первым же пунктом остро встал вопрос об экспорте изображений, но проблема в том, что в psd, а как позже выяснилось, и во многих других форматах, хранятся исходные изображения и список модификаций которые необходимо к ним применить, например, заливка цветом, обводка и тень.
Слои в макетах бывают очень большими и мне не хватило навыков или знаний, чтобы подружить огромные массивы с информацией о пикселях и node-webkit. Начались большие просадки по памяти, частые вылеты из-за ее нехватки. Из-за этого пришлось отказаться от js и перейти на другой знакомый мне язык — java.
Смена языка очень сильно сказалась на производительности, парсинг начал просто летать, но памяти все еще требовалось немногим больше чем потреблял Photoshop.
С тех времен остался один скриншот:
В тот момент я понял что нужно уходит на сервер — у пользователя не тратятся ресурсы, мне проще разрабатывать, зная что приложение работает в одном, подконтрольном мне окружении.
Сказано — сделано.
Парсер переписан под веб архитектуру, заказан , поднят tomcat, БД, написана клиентская часть и начинается закрытое тестирование по приглашениям.
Так выглядел сервис на тот момент:
Мне очень понравилась такая схема работы, появились первые посетители, первые отзывы и предложения.
И вот прошел год, прошло множество обновлений, я сменил работу, отдалился от верстки, ушел в чистый react, практически без макетов.
Перевел на него клиентскую часть Marsy, оптимизировал многое на сервере.
Стек технологий и инструментов на сегодня: java, Spring framework, React, Redux.
На сегодняшний день все выглядит примерно так (прошу прощения за дикцию, я не привык к выступлениям и каждая запись с голосом очень волнительна для меня)
Все возможности Marsy я не буду описывать они видны в видео, там это показано нагляднее, но вот несколько особенностей которые вроде не вошли в видео:
- поддержка смарт объектов и возможность открыть их
- возможность создания прямых ссылок на макет, по которой можно открыть его без необходимости авторизовываться вроде этой
- пакетное скачивание изображений с настройкой качества
- использование переменных
Наверняка есть что-то еще и я забыл упомянуть, но Вы можете сами посмотреть и оценить.
Если Вам будет интересно, могу написать отдельную статью в которой подробнее опишу техническую часть и особенности работы с psd форматом.
Как попробовать
Приложение доступно бесплатно по ссылке Marsy.
Так же можете посмотреть видео с полным описание его возможностей правда с тех пор некоторые вещи изменились.
Если нет времени или желания регистрироваться, то можете попробовать тестовый аккаунт:
логин: 12345
пароль: 12345Спасибо вам за внимание,
andrey@markupeasy.ru
www.markupeasy.ru
Всем удачи!
Автор: Eg0man
