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 можно по ссылке.
Даёшь лендинги в мегабайты!
Смотря как разрабатывать)
1025 строк говно кода на форму обратной связи, где даже зачатков бизнес логики нету, одна верстка. Боюсь даже представить, в бандлы каких размеров это собирается.
Ну рынок вы свой найдёте в числе мамкиных проектоделов, а на серьезный уровень с таким говном не вариант.
Здравствуй юкоз на реакте!
Спасибо, что потратили часть вечера субботы на ревью нашего кода 🙂 Но давайте по порядку. Quarkly – гибрид ide и графического редактора. Когда вы разрабатываете на ide, вы ведь вряд ли вините его за "говнокод"?) Это как создавать issue в репе vscode со словами: "ваш редактор говно, у меня тут говнокод", уж простите, без обид)
Вы сейчас оцениваете претифицированный код. Я уж не говорю о том, что мы с ребятами потратили год своей жизни, чтобы сделать что-то крутое и для людей, и при этом ничего не просим взамен. Разве что обойтись без хейта, где он не совсем уместен.
А вы похоже сами некомпетентны в своем же продукте...
P.s. и не надо писать тут про бесплатно, мы тут все прекрасно знаем что ваше бесплатно это просто замануха