Quarkly — гибридный инструмент для быстрого создания сайтов и веб-приложений на React

Всем привет. Меня зовут Александр, я соавтор и главный разработчик quarkly.io. Это проект от небольшой команды дизайнеров и разработчиков для таких же дизайнеров и разработчиков, как и мы. Наш инструмент призван облегчить жизнь и тем и другим, позволяя работать как по отдельности, так и в тесной коллаборации друг с другом.

Территориально мы находимся в Ростове-на-Дону, а количественно на данный момент над Quarkly работают 5 человек, включая меня. Мой друг Артем — главный дизайнер и второй соавтор проекта, Кирилл, Саша и Андрей — разработчики.

Наш бэкграунд — это многолетний опыт в создании конструкторов сайтов. Раньше мы работали над проектом uKit и многими другими проектами компании uKit Group.

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

Вот только некоторые из них:

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

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

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

Разработка Quarkly началась с простого прототипа, про который узнал наш CEO (Евгений Курт — создатель uCoz). Идея ему понравилась. Мы продолжили работать над проектом денно и нощно, при том что у нас была и основная работа. Со временем Женя дал нам возможность работать по программе Google (20% рабочего времени).

Через месяц мы показали улучшенный прототип — самую первую версию Quarkly, которая представляла собой редактор кода + свой синтаксис (на основе pug) + интерактив (как в Storybook).

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

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

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

На сегодняшний день мы закрыли все основные проблемы конструкторов сайтов, а именно:

• обеспечили вариативность — в Quarkly можно писать любые стили и скрипты, но делать это максимально интерактивно — например, добавлять свой код, а впоследствии работать с компонентом с холста;
• любую наработку можно скопировать и перенести в другой проект, если вы используете React — мы отдаем вам код в виде CRA или Gatsby — на GitHub или как ZIP-архив;
• удобная система плагинов — любой React-компонент можно добавить из NPM в считанные минуты.

Сегодня мы выходим в открытую бету — каждый желающий может зайти на quarkly.io и попробовать создать свой сайт или приложение.

Одной из важных задач, которые мы ставим перед собой на ближайшее время, является формирование комьюнити. Выход на Product Hunt — хорошая возможность без больших финансовых вложений показать себя обширной аудитории и собрать не только качественные отзывы о проекте, но и упоминания на трастовых площадках.

Отдать голос за Quarkly можно по ссылке.