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

Целевая группа

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

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

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

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

Возможности

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

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

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

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

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

инструмент дизайна

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

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

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

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

Интерфейс редактора для дизайнера

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

Темы

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

Кодовый поток

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

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

Дополнительная поддержка отдельных элементов (Storybook)

По сути, все компоненты являются своего рода виджетами. Их можно легко перемещать на холсте, копировать/дублировать, вставлять повторно и т. Д. Вы можете установить для них свои собственные значения и свойства. Лучше всего то, что вы можете применить к компонентам свою собственную бизнес-логику

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

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

Его можно редактировать прямо в Quarkly. Просто активируйте вкладку «Редактор кода», и откроется окно редактора кода. При этом используется синтаксис кода JSX. Если вы конвертируете блок в компонент, вы увидите что-то вроде Components.component_name вместо стилей и набора вложенных элементов

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

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

URLURL, favicon (в том числе кроссплатформенный — для macOS и Windows);
АтрибутыSEO (заголовок, описание, теги Open Graph);

Настройки холста (ширина, шрифт, заливка, эффекты и т. д.)

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

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

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

Создавайте визитки, целевые страницы, блоги

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

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

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

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

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

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

Возможности резюме

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

Ежедневная ценовая политика (цены по ставкам)

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

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

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

С учетом практики материнских компаний (uCoz и uKit), вероятно, это будет Freemium.

Преимущества и недостатки

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

Пышный:

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

Последствия:

В будущем это будет самый продвинутый инструмент для создания веб-сайтов, веб-сайтов и интерфейсов веб-приложений. Но пока это нишевый инструмент для профессионалов с сомнительной концепцией (цены нет, функциональность не доработана, дальнейшие планы слишком амбициозны, используйте на реальныхнишевые проекты не оправданы)Несмотря на русскоязычное происхождение сервиса, интерфейс и вся документация только на английском языке (обещалась русификация, но сроки истекли)С доступным экспортом кода вы сильно зависите от сервиса, как и от полностью настраиваемой ИДЕЦеновая политика пока не ясна (она может в корне изменить отношение потенциальных пользователей к инструменту)Это бета-версия, в которой многое еще предстоит реализоватьQуаркиy — всего лишь удобный инструмент, он не освобождает вас от необходимости пользоваться услугами двух профессионалов одновременно (как минимум: веб-дизайнера и программиста)У нас нет готового веб-сайта, по сути, только веб-интерфейс (нет возможности CMS или готовых интеграций), «back-end» нужно делать отдельно

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

Идея объединения облака, IDE, инструментов дизайнера и компоновщика страниц в одно относительно нова, но у Quarkly уже есть конкуренция с четко установленной ценовой политикой и полной функциональностью. Наиболее вероятные кандидаты на замену следующие:

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

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

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

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

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

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

Это очень интересный и сложный инструмент для комплексной разработки. Небольшие команды фронтенд-разработчиков, ориентированных на React, будут в восторге. Для них это может упростить процесс создания веб-интерфейсов до минимума (потому что не нужно будет рендерить страницу из прототипа/мокапа).

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