В июле был запущен первый в рунете сервис автоматической верстки. В теории веб-сервис способен сэкономить время вебмастеров за счет автоматизации одного из самых трудоемких и рутинных процессов в создании сайтов. Сервис назвали GetPages. Для верстки используется Sketch-плагин и оригинальный алгоритм, преобразующий макет в HTML. Меня заинтересовала эта разработка и я решил расспросить о ней подробнее у создателя сервиса Михаила Новикова. Под катом о том, что мне удалось выяснить (сухая выжимка из небольшого интервью).



Что делает GetPages?


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

Можно подумать, что в мире, где есть wix, tilda, lpgenerator такой сервис — попытка усложнить то, что уже реализовано простыми и понятными средствами конструкторов, однако это не совсем так. Конструкторы сайтов предлагают лишь ограниченный набор типовых шаблонов, а также ограниченные возможности более сложных инструментов разработки (в т.ч. html и JavaScript). Последние есть не везде и редко бывают востребованными, так как их применение нивелирует достоинства конструктора как упрощённого инструмента разработки для неподготовленного пользователя.

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

Sketch-плагин


Одним из основных компонентов сервиса является Sketch-плагин. Он загружает структуру документа в сервис и обеспечивает передачу изображений. На данный момент это единственный плагин, доступный в сервисе. Разработчики в дальнейшем планируют предоставить возможность автоматической верстки из исходников других приложений, если таковые будут востребованы пользователями.

Принцип работы сервиса


Сервис построен на основе нескольких компонентов, взаимодействующих между собой. Среди них можно выделить парсеры структуры документа, нейронную сеть, анализирующую данные, и элементы, формирующие HTML-страницу. Если представить процесс упрощенно, то макет обрабатывается системой, нейронная сеть анализирует полученные данные и обеспечивает их дальнейшее “послойное” распределение, после чего начинается поблочное формирование HTML-страницы.

История создания


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

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

Перспективы и масштабирование


Несмотря на работоспособный и, вероятно, перспективный продукт, разработчики не хотят останавливаться и готовы развивать сервис. В планах интеграция с внутренними системами web-студий. Кроме того, в качестве перспективы рассматривается улучшение качества генерируемого кода, взаимодействие со сторонними JavaScript-библиотеками, а также автоматизация и унификация процессов адаптивной вёрстки.

Выстрелит или нет


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

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

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

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

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

В качестве заключения


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

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

Использовано изображение

Комментарии (1)


  1. cyber_roach
    01.08.2019 19:43
    +4

    Где примеры кода?
    Сложные элементы глубокой вложенности верстает все в Canvas? ))
    Как она будет верстать списки и деревья?
    Как сверстает переносы текста?
    Как вообще сверстает текст?
    Про адаптивность верстки я так понимаю, умалчивается?
    Как генерирует пакет иконок, как оличает изображения от бэкграунда страницы?
    … и еще 100500 вопросов.

    Вообще сегодня верстка — это далеко не статика, сверстать статичный макет это вовсе не сложно. Верстка адаптивна, динамична, тесно взаимодействует с данными и кодом view(анимации, валидации и пр). Верстка нужна под что-то (ангуляр, реакт, какую-то CMS), где всегда свои правила и ограничения.
    По этой причине никогда не будет создан какой-то волшебный плагин к графической среде (или сервис к файлам из неё), т.к. иначе графической среде придется стать IDE.
    Что-то облегчающее работу верстальщика на отдельных элементах или сетке — да. Но засовывать весь графический макет в плагин и на выходе сайт — бред.