Webstudio — лучшая альтернатива Webflow

Я уже писал про DivHunt как альтернативный вариант Webflow, я по прежнему его считаю хорошим визуальным редактором кода, но последнее время я переехал на Webstudio и у этого есть ряд причин про которые я напишу в этом обзоре.

Почему я выбрал Webstudio?

Вебстудио это open source продукт, который я изначально считал клоном Вебфлоу, да и первое мое знакомство с ним было не очень удачным. То ли ранняя стадия и какие-то баги меня оттолкнули, то ли не самый удачный визуальный стиль редактора, также не совсем привычная система Токенов. И все это время я просто издалека наблюдал за тем как разивается редактор, время от времени запуская его и пытаясь сделать на нем какие-то базовые вещи и словить ощущение от работы.

Момент после которого я решил делать сайты именно на нем, это добавление утилиты Craft, которая хоть и не является частью Webstudio, но значительно облегчает и упрощает работу с ней. Для вебстудио Крафт это рекомендуемый подход к разработке сайтов и все их последние темы строятся на нем. И это огромный плюс, ведь за счет переменных вы сможете довольно легко изменить общий стиль всего сайта, проще работать с библиотеками компонентов (которые уже появляются на библиотеке Craft).

Craft — набор токенов и css переменных, построенный на библиотеке Open Props

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

Это было небольшое лирическое отступление, а теперь обзор)

Webstudio — no-code конструктор сайтов

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

Во первых — это open source продукт со всеми вытекающими плюсами и минусами. Одно из них хостинг сайтов на своем сервере, с возможностью редактировать его через конструктор, недавно добавили Docker, для более удобного развертывания сайта вне платформы. Видно как активно сообщество предлагает и реализует идеи. За последние пол года каждое новое обновление или добавление функций ощущалось мной легким восторгом, потому что чувствуется, что пытались решить проблему которая действительно мне близка.

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

Headless CMS — это система управления контентом, которая отвечает только за хранение и доставку контента через API, но не занимается его отображением (у неё нет «головы» в виде frontend-части, тут и вступает webstudio).

В отличие от традиционных CMS вроде WordPress, где контент и представление связаны вместе, headless CMS позволяет использовать контент где угодно: в веб-приложениях, мобильных приложениях, умных устройствах — при этом разработчики полностью свободны в выборе технологий для создания пользовательского интерфейса.

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

В третьих — решение использовать токены, а не классовый подход. Опять же изначально появляется вопрос «зачем это», когда мы привыкли работать с классами, но как только понимаешь суть токенов и видишь первые результаты на рабочем сайте, то с удивлением произносишь «а вот зачем». Рекомендую почитать статью (можно даже через переводчик, суть будет понятна), которая наглядно объясняет приемущество токенов и представьте как это скажется на большом проекте.

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

Что есть в самом редакторе

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

Есть довольно интересная панель Advanced в которую можно просто скопировать css значения, и он во первых разобьет их на стили, а во вторых если эти стили есть в конструкторе, то занесет туда эти данные. Что-то похожее было в Divhunt, но там это было просто как запись в блокноте, тут немного интересней в реализации. Интересное решение показвыать небольшое описанием css оператора, может быть удобно для новичков. Еще одно применение это создание var переменных для микроанимаций, плюс в том что можно создать переменные и изменять значения дочерних элементов при наведении на родителя. Вот короткий 6 минутный ролик что бы понять как это работает.

Есть стандартный набор компонентов для конструкторов

• заголовки, ссылки, текст, маркированный список
• компоненты для вставки медиа контента: изображений, видео с вимео и ютуба
• компоненты формы: поле, чекбокс, радио кнопка, лейбл, поле ввода и выпадающий список
• из интересного есть компоненты radix, это библиотека компонентов для создания более доступных интерфейсов: поддержка клавиатурной навигации, совместимость со скринридерами, правильная семантическая разметка. Большим плюсом является возможность кастомизировать внешний вид этих компонентов, и ваш чекбокс может выглядеть как обычная кнопка, иногда для форм это бывает полезно. Помимо компонентов формы, там есть аккардион, табы, переключатель, поповер и тултип.
• свайпер присутсвует не как компонент, а как элемент интеграции в маркетплейсе. Так же там есть GSAP анимация и варианты подключения к популярным headless cms (airtable, notion, ghost, wordpress и тд). Эти элементы представляют собой преднастроенные страницы, можно посмотреть как происходит подключение, посмотреть примеры анимаций с текущим кодом и перенести на свой проект. Для новичков может быть сложно, но разобрашвись однажды, дальше будет легко и удобно.
• new 🔥 наконец-то добавили анимации — это то, что многие ждали. Мне повезло оказаться в бетта тесте движка и я еще раз убедился в том, что разработчики слушают своих пользователей. Потому что после получения обратной связи, они пересмотрели изначальную концепцию и сделали его доступней для новичков. При этом сам функционал не упростили, а просто сделали его доступней. Сейчас возможно создавать анимации скрола и текстовые анимации насколько я знаю следующим будут циклические анимации, для создания loop анимаций. Из особенностей, все анимации работают на собственном движке css, без js кода, поэтому сайт получается легкий даже если вы обвешаете его анимациями.

Из того что не хватает в конструкторе для меня:

1. некоторых функий правой клавиши, например превратить div block в link block, или обернуть текущий блок еще одним div’ом. Но в целом перетаскивание в панели работает довольно корректно и это не создает больших неудобство, просто добавило бы комфорта. Но мне кажется это вопрос времени и это точно добавят
2. из того что должно быть, но пока нет (в роадмап висит в ближайших задачах) это визуальная работа с css grid. Сетку построить можно через Advanced панель, и сложности в этом могут быть только у новичков. В целом я рекомендую прочитать про построение сеток и вам будет легче понимать как они работают и сложностей тоже не будет. Я занес это в минусы, но мне это не мешает, но предупредить считаю нужным
3. гораздо больше я жду компонентов, это ускорит и упростит разработку, сейчас надо немного больше планировать, изначально создавать конечный вариант элемента и потом уже заниматься его заполнением. По идее это нормальная практика, но на больших проектах компоненты сильно упростят работу.

Резюмируя работу в редакторе вебстудио могу сказать что он комфортный и понятный для работы. Довольно хорошо реализованы горячие клавиши. Изначально думал что будет неудобство в работе с непривычным хоткеем, но оказалось добавлять через cmd+k удобно, так же как и удобно переименовывать слои через cmd+e.

Цена на Webstudio

Отдельно отмечу ценообразование, в то время как Webflow берет оплату за место и отдельно за каждый хостинг сайтов (что для меня оооочень странно), вебстудио предлагает на момент написания статьи 2 тарифа Хобби (читай как бесплатный), на котором вы можете полностью попробовать работу конструктора (за исключением работы cms и работы API соответственно), плюс ограничения есть на отправку форм, просмотр страниц, место файлов. Но по факту вы можете создать сайт, попробовать полноценно редактор и подключить свой домен, на выходе получив полноценный сайт на хостинге с CDN. Второй тариф Про который является безлимитным тарифом по проектам и ограничивается только объемом хранилища и количеством просмотров страниц — и это все за вполне доступные 20$ в месяц.

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

Особенности которые следует выделить

Что еще хочется отметить, но не входит в предыдущие пункты. Для кого-то может иметь значение, для кого-то нет, но мне кажется это надо упомянуть:

• небольшое, но крутое комьюнити. Если у вас возникают вопросы, можно поискать ответ на сайте или спросить у комьюнити webstudio в дискорде. Видно что часто на вопросы помогают отвечать сами разработчики, что не сомненно плюс. Так же есть небольшой русскоязычный чат в телеграм
• чистота кода и скорость работы сайта на выходе, из-за токенов, мой сайт получил 99 в мобильной и 100 в десктопной версии без каких-либо проблем. Во первых на это влияет CDN который используется при размещении сайта на их платформе, а во вторых с системой токенов, которая очень сильно уменьшает количество кода (надеюсь вы почитали статью). Помимо производительности, показатели SEO и доступности то же были 100 баллов.
• так как в РФ сейчас с зарубежными сервисами сложно и тот же cloudflare недавно попал под небольшой бан, хоть и на время, важно иметь запасную возможность размещения сайтов, дак вот сайт webstudio можно развернуть на Yandex CLI Cloud. По факту ваш сайт будет на серверах в РФ, при этом можно спокойно использовать конструктор для внесения изменений. Это не базовая задача и она требует некоторого администрирования, но есть инструкции и они вполне понятные
• очень понравилась работа с API, я до этого редко сталкивался с этим, но после видо уроков на официальном канале и пары тестов я понял мощь и крутость этого подхода.
• документация и уроки, они есть, они очень понятные, но их сильно меньше чем у Webflow. При этом если вы активно работали в каком-либо no-code редакторе кода 2-3 месяца, то урок от Вебфлоу довольно легко можно повторить в Webstudio, но для новичков важно отметить что уроков не так много
• есть возможность вставлять блоки Webflow в Webstudio, поэтому если вы оплачивали библиотеку relume или другие библиотеки, или не хотите заново создавать текущий сайт на новой платформе, его можно просто скопировать. Обязательно посмотрите документацию для понимания какие из компонентов не поддерживаются, что бы знать что нужно будет поправить руками. Еще важно отметить что уже есть библиотеки компонентов для webstudio с использованием Craft, я знаю как минимум 2 хороших библиотеки это Drevo Library и Onxui.

Итог

Если вы дочитали до этого момента, то скорей всего уже поняли, мне webstudio нравится и в ближайшее время я планирую делать сайты именно на нем. Если вы по каким-то причинам искали замену webflow, то возможно вам стоит попробовать webstudio (тем более это бесплатно и практически без каких либо ограничений по функциям), так как на мой взгляд это отличная альтернатива, возможно лучшая на данный момент.