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 можно по ссылке.
А расскажите в двух словах, чем вы лучше/хуже чем webflow?
Думаю, мои коллеги позднее ответят развернутее. Да и если напишите какие вы обычно решаете задачи, будет понятно какая сторона этого сравнения существует.
Мы в целом, видим заметный интерес от тех кто привык к вебфло, но все же не очень доволен. Но, конечно, у вебфло есть колоссальный плюс ввиде огромной инафраструктуры вокруг, от шаблонов до комьюнити. Тут похвалиться не можем.
Чем больше у нас будет появляться встроенных компонентов, блоков в продукте и пр, тем, умозрительно, этой разницы будет все меньше и меньше.
Сейчас не могу заявить: мы выигрываем у вебфло во всем.
Все что связано с реактом, тут этого просто у вебфло нет. Для кого-то это будет плюс, для кого-то вообще не важно, а кому-то и минус, т.к. надо вникать.
Вообще, у нас проходили (и еще будут, как отстроем формат) Верстка батлы -
https://www.youtube.com/channel/UCgj4oPdiBdV1O4TBGw1Q2ug/about
там в качестве соревновательного задания решалась как раз максимально типовая задача по верстке лендинга. И последний батл, а там с вебфло прям очень крутые спецы участвовали - показал, что во-первых другие конструкторы как-то прям ...ну в общем, суждение немного оценочное с мой стороны, а данных мало, но в целом, ребята с вебфло выиграли, хотя разрыв был не так что бы велик, и мы многое уже исправили и улучшили.
Повторюсь, будем проводить аналогичное, и смотреть на практике.
На словах-то можно хоть про более юзабельный интерфейс начинать рассказывать. Но это такое...
У нас "статичный" сайт на Webflow, 10 страниц. Лет 20 назад я в течение пары лет верстал сайты на htlm+css, и оставшихся с тех времен крох знаний мне хватает, чтобы в Webflow уверенно работать с настройками дивов, на которых там все построено.
Первую версию сайта сначала нарисовали в фигме, а потом я ее сверстал (если можно использовать это слово) в Webflow, но все новые страницы я делаю сразу в webflow, потому что все основные стили и компоненты там уже есть. В редком случае делаю какой-то быстрый набросок в фигме - но потом сразу перехожу в вебфлоу.