Обзор и отзывы о конструкторе сайтов Quarkly
Обзор и отзывы о конструкторе сайтов Quarkly - uGuide.ru

Обзор и отзывы о конструкторе сайтов Quarkly

    Дмитрий Луценко
  • Обновлено:
    2021-01-20
  • Просмотры:
    346
  • Отзывы:
    0
  • Наша оценка:
    5.0
Quarkly – это онлайн-сервис для профессиональных дизайнеров и разработчиков, обеспечивающий функционал платформы для создания прототипов интерфейсов web-приложений и страниц, а также среды разработки (IDE) в формате интерактивного конструктора.

Разработкой проекта занимались члены команды uKit. Пока платформа на стадии бета-тестирования.

Целевая аудитория

Основная аудитория Quarkly – профессиональные frontend-разработчики, дизайнеры и верстальщики. Quarkly – это продвинутый инструмент, облегчающий работу профильных специалистов. Своего рода объединение нескольких сущностей в одной: IDE (удобная среда разработки), конструктор сайтов (как аналог, позволяющий понять принцип работы с элементами вёрстки) и инструмент прототипирования интерфейсов.

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

Пока Quarkly работает преимущественно с React-компонентами, но в будущем запланирована поддержка и других фреймворков. На Quarkly уже можно создавать функциональные лендинги, визитки и другие типы малостраничных сайтов, а также несложные web-приложения.

Для более точного понимания сферы применения этого инструмента нужно представлять, как работает типовая разработка уникального дизайна: разработка спецификации и прототипа, передача на вёрстку, сборка, тестирование и т.д. Для каждого из этапов используются свои инструменты и окружение. Quarkly позволяет все их собрать в одном месте: дизайнер здесь разрабатывает спецификацию и сразу рабочий прототип, а web-разработчик нужен только для дописывания логики нестандартных элементов интерфейса. Всё. После этого приложение готово к выгрузке.

Функциональные возможности

Собирая свой проект в Quarkly, вы не получите готовых HTML-страниц. Это будет React-приложение или проект Gatsby. И первый, и второй формат требуют отдельной сборки перед выгрузкой на сервер. То есть нельзя просто скачать файлы и разместить их на своём хостинге.

В будущем разработчики обещали поддержку других фреймворков для web-приложений: Vue, Angular и т.д. Но пока все силы сосредоточены только на React.

Для сборки вы можете использовать специальное окружение на виртуальной машине или узкопрофильный web-сервис для разработчиков, такой как Netlify (при наличии аккаунта на GitHub можно автоматически публиковать приложения на Netlify непосредственно из Quarkly).

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

Чтобы понять, как работать с этим сервисом тем или иным специалистам (дизайнерам, верстальщикам, frontend-разработчикам), опишем каждый отдельно взятый уровень абстракции.

Инструменты дизайнеров (design tool)

В норме графика рисуется/создаётся в специальных графических редакторах. У каждого дизайнера свой набор инструментов. Но наиболее популярным стал онлайн-сервис Figma, именно его на вооружение берут небольшие команды разработчиков, так как здесь есть всё необходимое для работы нескольких человек одновременно: версионность, согласование, демонстрация конечного результата заказчику и т.д. Так вот, Quarkly ничем не уступает по функциональности онлайн-редакторам графики и инструментам прототипирования.

Дизайнер работает здесь с холстом и слоями. Только вместо интерактивного макета на выходе получается полноценный web-интерфейс, к которому остаётся только «прикрутить» нужную логику.

Каждый новый проект в Quarkly строится из отдельных стилизованных элементов – компонентов (примитивов или кварков). Чтобы добавить новый элемент, дизайнеру нужно выбрать слой и перетащить на него требуемый примитив. Есть и блочные примитивы, например, Box (как аналог блочным HTML-элементам – DIV’ам), внутри которого уже можно размещать другие: кнопки, изображения, ссылки, списки, поля ввода и т.д.

Более сложные элементы – кварки (как атомарные единицы проекта). Собственно, это слово и было взято за основу при выборе названия для сервиса. Они могут подразумевать комплексный функционал, например, онлайн-карты, блоки меню, социальные кнопки и т.п.

Интерфейс редактора для дизайнера ничем не уступает по удобству популярным онлайн-конструкторам сайтов, таким как Wix, Tilda или WebFlow. А по функционалу существенно их превосходит. Пользователь может задать любые параметры элемента: от типографики и отступов до продвинутых эффектов. К каждому свойству имеются подсказки по вариантам заполнения.

Темы (themes)

Оригинальным решением стало вынести стандартные настройки заголовков, цветов, заливок/фонов, эффектов/трансформаций и фильтров, а также триггеров в отдельную вкладку. Получается, что ключевыми настройками интерфейса можно управлять централизованно и переносить из проекта в проект. Это и есть «темы» Quarkly.

Песочница кода (сodesandbox)

Если вам недостаточно имеющихся примитивов или кварков (компонентов), то их можно создать самостоятельно или импортировать готовые. Это делается с помощью знакомого многим web-разработчикам npm-registry (локального репозитория менеджера пакетов npm).

Сложность таких компонентов никак не ограничивается.

Дальнейшее сопровождение изолированных элементов (Storybook)

Фактически все компоненты – это своего рода виджеты. Они легко перемещаются по холсту, копируются/дублируются, вставляются в другое место и т.д. Для них можно задавать свои значения и свойства. Но самое главное – после конвертации нескольких элементов в компонент к последнему можно привязать свою бизнес-логику.

AST дерево и редактор кода

При работе с графическим интерфейсом вы фактически генерируете дерево/структуру данных, тот самый исходный код – это AST дерево.

Его можно править в Quarkly напрямую. Достаточно активировать вкладку «Code editor», и откроется панель с редактором кода. Здесь используется синтаксис JSX-кода. Если блок был преобразован в компонент, вместо стилей и набора вложенных элементов вы увидите запись вида Components.название_компонента.

Свойства страницы

В свойствах страницы можно задавать:

  • URL-адрес, фавиконки (в том числе для различных платформ – для MacOS и Windows);
  • SEO-атрибуты (title, description, теги Open Graph);
  • Настройки холста (ширина, шрифт, заливка, эффекты и т.п.).

Каждую страницу можно удалить, дублировать и переименовать.

Для отображения страницы по умолчанию применяются 4 триггера (ширина экрана): sm (small – до 576 пикселей), md (middle – до 768 пикселей), lg (large – до 992 пикселей) и default (1280 пикселей). Сам холст может быть больше этих значений.

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

Создание визиток, лендингов, блогов

Конструктор Quarkly пока подходит только для создания малостраничных web-интерфейсов с нестандартной структурой и логикой. Но в будущем разработчики планируют добавить возможность выгрузки сайтов без необходимости пересборки React-приложений или проектов Gatsby – сразу в HTML.

Здесь нет никаких ограничений по внутренней структуре страниц или по их количеству, вы можете расположить элементы навигации в любом удобном месте.

«Из коробки» имеются все необходимые SEO-атрибуты: от метатегов страницы до указания тегов alt у изображений и т.д. Есть даже специальные свойства для Open Graph и настройка иконок для разных платформ (пригодятся на случай, если кто-то добавит ваш сайт в качестве ярлыка на рабочем столе).

При необходимости вы можете импортировать NPM компоненты, кварки (атомарные компоненты Quarkly), примитивы, а также эффекты или анимации.

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

Вместе с тем, на данном этапе вы пока не можете сразу получить готовый сайт. Только интерфейс (frontend, иными словами, сайт не будет взаимодействовать со сторонними сервисами, отправлять уведомления о заявках или совершать другие действия), который ещё нужно интегрировать с бэкендом. А значит, нужен программист. Хотя, несложную логику можно организовать и непосредственно в Quarkly.

Резюмируем возможности

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

Ценовая политика Quarkly (цены на тарифы)

На текущий момент доступ к сервису предоставляется полностью бесплатно. Но это стадия бета-тестирования. По заверениям авторов, они будут и дальше предлагать бесплатное использование Quarkly столько, сколько это возможно по времени.

Но стоит понимать, что это не оффлайн-инструмент, который будет работать на устройствах пользователей. Это онлайн-платформа. Чем больше пользователей, тем больше нагрузка на серверы, соответственно, тем выше расходы на инфраструктуру. Поэтому вопрос появления оплаты – это только вопрос времени.

Какие будут тарифы, авторы пока не распространяются, но обещают, что это будет самое недорогое предложение на фоне конкурентов (хотя конкурентов у сервиса фактически нет).

Учитывая практику материнских компаний (uCoz и uKit), с большой вероятностью будет Freemium.

Плюсы и минусы

Quarkly – перспективное, но несколько спорное решение для профессионалов. Аудитория и спрос на него точно найдутся. Хотя это и не совсем онлайн-конструктор сайтов/страниц, и не IDE, и не самостоятельная платформа для прототипирования. Это что-то среднее между ними всеми, да ещё и в «облаке». Куда качнутся чаши весов со временем, покажут ещё и цены на подписку. Пока что Quarkly может похвастаться следующими преимуществами.

Плюсы:

  • Дизайнер создаёт фактически сразу работоспособный интерфейс (сервис позволяет исключить этап прототипирования).
  • Удобный визуальный редактор с низким порогом входа. Это, конечно, не уровень «домохозяек», но профессионалам переучиваться не придётся.
  • Уже интегрирована поддержка шрифтов Google Fonts и бесплатного фотостока Unsplash.
  • Интерфейс можно строить из готовых блоков (компонентов), а можно перейти на уровень ниже – до примитивов.
  • Дизайнер получает полную свободу действий (каждый элемент интерфейса можно настроить так, как это нужно, вплоть до эффектов появления и отработки псевдоклассов).
  • При необходимости можно работать непосредственно с кодом, есть и подсказки при вводе, и подсветка синтаксиса, как в IDE.
  • Имеется встроенный отладчик (дебагер).
  • Есть возможность импорта модулей NPM.
  • Вы не привязываетесь к платформе. Проект можно выгрузить на GitHub (даже сразу скомпилировать и провести тестирование на платформе Netlify), а можно скачать архивом в удобном формате (React или Gatsby).

Минусы:

  • В будущем это самый продвинутый конструктор сайтов, web-страниц и интерфейсов web-приложений из всех имеющихся. Но пока это нишевый инструмент для профессионалов со спорной концепцией (цен нет, функционал не доделан, дальнейшие планы слишком грандиозные, применение на реальных нишевых проектах не оправдано).
  • Несмотря на русскоязычное происхождение сервиса, интерфейс и вся документация к нему только на английском (обещана русификация, но поставленные сроки вышли).
  • При имеющейся выгрузке кода, вы сильно привязываетесь к сервису, как в случае с полностью настроенной под себя средой разработки (IDE).
  • Пока неясна ценовая политика (она может кардинально поменять отношение потенциальных пользователей к инструменту).
  • Это бета-версия, в которой многое из задуманного пока не реализовано.
  • Quarkly – это просто удобный инструмент, он не освобождает вас от необходимости использования труда сразу двух специалистов (как минимум: web-дизайнер и программист).
  • Вы не получаете готовый работоспособный сайт, фактически только web-интерфейс (здесь нет возможностей CMS или готовых интеграций), «бэк» нужно делать отдельно.

Аналоги и конкуренты

Несмотря на то, что идея совместить «облако», IDE, инструменты дизайнера и конструктор страниц в одном относительно новая, у Quarkly уже есть конкуренты, причём с вполне сложившейся ценовой политикой и завершённым функционалом. Вот наиболее вероятные претенденты на замену:

Лучшие альтернативы Quarkly

WebFlow
WebFlow – это крупный проект с мировым охватом. О нём знают многие профессиональные web-разработчики и дизайнеры. С одной стороны, это готовый и удобный онлайн-конструктор сайтов, а с другой стороны, здесь есть очень широкие возможности для создания уникального web-интерфейса (готовые шаблоны, огромный выбор блоков, работа с примитивами и т.д.). В связке с другим сервисом (V.one) можно создавать не только страницы сайтов, но и интерфейсы мобильных приложений. Выгружать код можно в более удобный для маленьких проектов формат – в HTML5. Если остаться на хостинге WebFlow, можно получить больше, чем просто интерфейс: CMS, интеграции со сторонними сервисами, в том числе для e-commerce. Есть бесплатный тарифный план для тестирования возможностей.

Tilda
Tilda – российский аналог WebFlow, который лучше адаптирован к локальным сервисам (касается интеграции с внешними сервисами и инструментами, продвижения в поисковых системах, предпочтений web-мастеров и т.д.). Большой плюс на фоне конкурентов – полная русификация документации и интерфейса. Правда, интерфейс работы с готовой и нестандартной графикой (блоками интерфейса) разделён: создать страницу из набора готовых элементов можно в классическом онлайн-конструкторе, а для уникальных элементов имеется специальный инструмент – редактор Zero Block. Код готовой страницы можно встраивать на других сайтах (есть готовые модули для CMS WordPress), выгружать в HTML-формате или оставлять на хостинге Tilda. В последнем случае в качестве бонусов вы получаете CMS, CRM, готовые интеграции и API. Делать интерфейсы для мобильных приложений Tilda пока не умеет, но никто не запрещает «обернуть» HTML-код в приложение.

Mobirise
Mobirise – оффлайн-конструктор страниц и web-интерфейсов. Никаких онлайн-сервисов и подписок. Сама программа распространяется полностью бесплатно (если не считать необходимость покупки дополнений). Пользователь – сам себе дизайнер. В его распоряжении – не только готовый набор блоков, но и темы/шаблоны, а также модули интеграции с нужными сервисами (в базовый набор не входят). На выходе вы получаете качественный и структурированный HTML-код, который можно отредактировать/доделать вручную, разместить на любом удобном хостинге, и не нужно ничего конвертировать или компилировать. При необходимости можно воспользоваться специальным модулем с продвинутым редактором кода (подсветка синтаксиса, подсказки при вводе и т.п.).

Существуют и другие инструменты/сервисы (relate.app, Framer, GrapesJS и т.д.), в том числе с реализацией отдельно взятых функций для деплоя (только прототипирование, только согласование работы команд дизайнеров и разработчиков, только вёрстка и т.д.). Никто не запрещает использовать профильные инструменты и IDE. Ведь на текущем этапе Quarkly пока не может превзойти ни один из них по охвату всех нужных функций для разработчиков.

Выводы и рекомендации

Quarkly – очень интересный и перспективный инструмент для комплексной разработки. Он понравится небольшим командам, в составе которых работают frontend-программисты, специализирующиеся на React. Им он может упростить процесс создания web-интерфейсов до минимума (так как не будет необходимости верстать страницу на основе прототипа/макета).

Однако, хотя на текущий момент у разработчиков Quarkly большие планы, слишком мало из них реализовано (пока очень мало готовых компонентов и модулей, и даже возможность импорта NPM не сильно спасает). Остаётся только ждать и надеяться, что всё обещанное будет исполнено. В этом случае на вооружение инструмент смогут взять не только профессиональные разработчики, но и начинающие web-программисты, а также дизайнеры-фрилансеры.

  • Автор: Дмитрий Луценко

no avatar