Quarkly — гибридный инструмент для быстрого создания сайтов и веб-приложений на React
Всем привет. Меня зовут Александр, я соавтор и главный разработчик quarkly.io. Это проект от небольшой команды дизайнеров и разработчиков для таких же дизайнеров и разработчиков, как и мы. Наш инструмент призван облегчить жизнь и тем и другим, позволяя работать как по отдельности, так и в тесной коллаборации друг с другом.
Наша команда
Территориально мы находимся в Ростове-на-Дону, а количественно на данный момент над Quarkly работают 5 человек, включая меня. Мой друг Артем — главный дизайнер и второй соавтор проекта, Кирилл, Саша и Андрей — разработчики.
Наш бэкграунд — это многолетний опыт в создании конструкторов сайтов. Раньше мы работали над проектом uKit и многими другими проектами компании uKit Group.
Идея создания. И почему Quarkly?
В процессе работы над нашими предыдущими проектами мы замечали множество недостатков, которые мы хотели исправить.
Вот только некоторые из них:
- конструкторы очень невариативны;
- конструкторы немодульны — одни и те же действия нужно повторять из проекта в проект;
- нет системы плагинов, а если она есть, то слишком сильно завязана на определенную платформу — если нет готового виджета, ничего сделать не получится;
- время, потраченное вами на освоение одного конструктора, не поможет вам при работе с другим инструментом;
- проект до конца вам не принадлежит — забрать код и быстро развернуть его где-либо ещё не всегда представляется возможным.
Да, конструкторы сайтов в большинстве случаев успешно решают тривиальные задачи, но нам, как разработчикам, всегда было интересно повышать уровень абстракции, сохраняя, насколько это возможно, низкий порог входа.
В названии 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
Одной из важных задач, которые мы ставим перед собой на ближайшее время, является формирование комьюнити. Выход на Product Hunt — хорошая возможность без больших финансовых вложений показать себя обширной аудитории и собрать не только качественные отзывы о проекте, но и упоминания на трастовых площадках.
Отдать голос за Quarkly можно по ссылке.
Круто!
Рад читать и видеть тебя здесь :)
Интересно, какие основные юз кейсы такого конструктора?
Я так понимаю, что сейчас порог входа - это разработчики или дизайнеры.
Если совсем прямой вопрос - когда разработчику использовать quarkly, а когда писать сразу самому? Какую основную, и чью боль решает продукт?
Я плохо знаю рынок конструкторов, но кажется что:
1) Если нужно что то совсем простое, например быстро протестировать гипотезу - с этим справляется тильда или викс. Это делает человек далёкий от разработки.
2) Если нужно что то более сложное - это делают сразу сами, с учётом своих технологий, стека компании, поддержки у себя и т.д.
Надеюсь что мои возможно глупые вопросы, помогут вам лучше подготовиться к PH
Привет, Борис! Рад тебя здесь видеть)). Отвечу, мы где-то посередине между 1 и 2. Сейчас мы больше фокусируемся на разработчиков знакомых с версткой и JS. Но мы планируем уменьшать порог входа за счет готовых компонентов. С их помощью можно будет без глубоких знаний JS и верстки создавать готовые страницы. На этом этапе дизайнер может стилизовать каждый подэлемент компонента, настраивать стилевые и функциональные пропсы. Компоненты блоки можно будет размонтировать и поменять структуру при желании. Если нужно, можно спуститься на уровень ниже, и вмешаться кодом.
Итак, почему и когда разработчику использовать Quarkly? Когда нужно синхронно поработать с дизайнером. Расскажу на примере приложения, так как с сайтами вроде и так понятно. Мы с коллегой (разработчиком) провели такой эксперимент. Я предложил сделать приложение в Quarkly, набросал скетч, нашел данные и описал как я вижу его функциональность. Дальше он собрал его код, прокинул нужные пропсы и оверрайды элементам, чтобы я мог выбирать их и стилизовать. Дальше я соответственно их привел в наглядный вид. Получилась вот такая штука —
https://sad-easley-31c9dd.netlify.app/
А вот как она выглядит без дизайна —
https://artemzhigalin.ru/src/Builder__Quarkly_2020-11-07_21-57-20.jpg
Ушло на всё..полтора дня.
Использовать Quarkly можно когда требуется небольшое приложение, сайт, лендинг. И ваш формат работы предполагает сотрудничество с дизайнером (который знает CSS), копирайтером, переводчиком.