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

Обзор Quarkly

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

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

В основе среды разработки лежит популярный JavaScript-библиотека React. Благодаря этому вы можете собрать блок, а затем перенести его в любой другой проект, получив код в виде CRA или Gatsby. Другой плюс — любой React-компонент можно добавить на Quapkly из NPM.

  • Удобная онлайн-среда для разработки сайтов
  • Построен на основе React
  • Дизайнерские возможности на уровне Figma

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

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

Плюсы:
Минусы:
Невысокий порог входа — достаточно базовых знаний HTML/CSS/JS
Дизайнер может сразу создать работоспособный интерфейс — как в Figma
Есть визуальный редактор
Можно собирать сайты и веб-приложения из готовых блоков или редактировать код вручную
Внутри полноценная IDE — с подсказками при вводе и подсветкой синтаксиса
Поддерживается импорт компонентов из NPM
Есть встроенный дебагер
Можно выгрузить проект в удобном формате для разработки в другой среде, поддерживающей React
Поддержка только библиотеки React (можно было бы добавить другие JS-фреймворки, например, Vue)
Нельзя подключить CSS-фреймворки
Неясная ценовая политика
Для создания сайта нужны как минимум два человека: дизайнер и разработчик (или один человек, сочетающий в себе необходимые знания)

Сервис движется в сторону упрощения, так что, возможно, вскоре минусов у него станет меньше. Как минимум, целевая аудитория станет шире. Пока же Quarkly — нишевой продукт с большим потенциалом.

  • Свобода действий дизайнера и разработчика
  • Интерфейс можно выстраивать из компонентов
  • Инструменты обнаружения ошибок

Для кого предназначен

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

Quarkly — главная страница

Максимально комфортно в Quarkly будет дизайнерам, которые интересуются технологиями фронтенда и начинают работать с кодом. Фронтенд-разработчики и верстальщики найдут в этом сервисе все необходимые инструменты для доведения проекта до ума — в том числе средства сборки и тестирования.

  • Разработка сайта или веб-приложения с нуля
  • Для дизайнеров, которые работают с кодом
  • Упрощает жизнь фронтенд-специалистам

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

Quarkly предлагает инструменты, которые будут полезным начинающим и опытным разработчиков сайтов и веб-приложений.

Работа с компонентами

Quarkly — компоненты

Quarkly предлагает несколько типов компонентов. Самые простые — примитивы: текст, изображение, box. Чуть сложнее — кварки. Это составные компоненты, которые решают определённые задачи, например, онлайн-карта или блок с социальными кнопками. Есть также готовые тематические блоки — например, галерея или раздел «О нас». В перспективе добавятся компоненты Ant Design, Material UI, Bootstrap React, Semantic UI.

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

Встроенный редактор кода

Quarkly — Редактор кода

В Quarkly есть встроенная среда разработки, в которой отображаются код всех компонентов, используемых на странице. Все внесённые изменения применяются автоматически. Есть подсказки, а также консоль для отладки.

Настройки веб-проекта

Вы можете использовать бесплатное техническое доменное имя или подключить к сайту свой домен, купленный у другого регистратора. Доступно редактирование внутри тегов <head> и <body>. Можно вставлять скрипты, ссылки, файлы стилей, мета-информацию.

Quarkly — SEO настройки

С SEO-возможностями тоже всё в порядке:

  • Настройка семантики — каждому компоненту можно задать подходящий тег.
  • Добавление мета-тегов к элементам в редакторе кода.
  • Гибкая настройка фавикона — можно загрузить файлы для разных устройств, а также выбрать цвет фона плитки для Windows 10.
  • Поддержка мета-тегов и Open Graph для корректного отображения сайта в поисковой выдаче и в соцсетях.
  • Ручное добавление URL.

В планах — автоматическое создание sitemap.xml и robots.txt с возможностью их свободного редактирования, а также генерирование чистого HTML после экспорта или публикации сайта.

Экспорт и публикация

Quarkly — создание приложения

Если вы хотите разместить проект на своём сервере или продолжить работу над ним в другой среде, то можете экспортировать его в архив с помощью инструмента Create React App. Он позволяет создать приложение с базовой структурой, установить все зависимости, добавить скрипты для запуска, тестирования и сборки.

Есть и другие возможности для экспорта и публикации:

  • Экспорт проектов в Gatsby — одни из самых популярных генераторов статистических сайтов.
  • Отправка изменений в репозиторий на GitHub.
  • Публикация на хостинге Netlify с техническим доменным именем.

Инструменты для командной работы

Над проектом можно работать вместе с коллегами. Для этого достаточно разослать им приглашения. Планируется также добавление расширенной настройки прав доступа: пользователи могут редактировать, комментировать или только просматривать проект. Затем должна появиться страница, на которой будут отображаться действия всех членов команды. Это поможет лучше контролировать рабочий процесс.

  • Возможность переиспользовать компоненты
  • Удобный перенос проекта на другую платформу
  • Разные варианты экспорта и публикации

Работа с дизайном

Сейчас главный инструмент профессиональных веб-дизайнеров — это Figma. Здесь есть всё необходимое для работы команды над продуктом: можно сохранять разные версии, показывать их заказчику, взаимодействовать с другими сотрудниками, сразу получать CSS-код элементов.

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

Quarkly — дизайн блоков

Как и в популярных конструкторах сайтов, в Quarkly есть поддержка Drag’n’Drop. Это значит, что вы можете собрать интерфейс, используя только мышку — берите элементы и перетаскивайте их в нужное место. При этом доступно абсолютное позиционирование. С одной стороны, это даёт гибкость. С другой стороны, такой подход чреват ошибками в вёрстке. Но их будет легко заметить и исправить на стадии тестирования.

Можно выделить и перетащить сразу несколько элементов, увидеть расстояние между ними в пикселях, редактировать текст на лету: добавлять жирное начертание или курсив, превращать в ссылки, менять стили оформления. Для оформления будет полезной имеющаяся интеграция Google Fonts и Unsplash — сервиса с бесплатными изображениями.

Для настройки адаптивности доступны кастомные брейкпойнты. Вы можете настроить внешний вид сайта на экране любого размера: от небольшого смартфона до широкоформатного телевизора. Quarkly также поддерживает CSS Flexbox и CSS Grid, которые позволяют гибко управлять вёрсткой.

  • Мощные инструменты для изменения дизайна
  • Встроенный визуальный редактор
  • Гибкая настройка интерфейса

Цена: сколько стоит сделать сайт на Quarkly

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

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

  • Бесплатный сервис для создания сайтов
  • Когда оплата появится, обещают низкие цены
  • Бесплатный доступ будет всегда

Выводы: стоит ли делать сайт на Quarkly

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

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

Создатели Quarkly планируют делать сервис проще, понижая порог входа. Но при этом останутся те возможности, которые есть сейчас: встроенная IDE, компоненты React (и, возможно, других фреймворков), свободная выгрузка кода. Если им удастся соблюсти такой баланс, то рынок получит отличный инструмент для разработки сайтов и веб-приложений, который будет подходить широкому кругу пользователей — от совсем новичков до профессиональных разработчиков и продуктовых команд.

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