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

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

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

Наша команда

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

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

Идея создания. И почему Quarkly?

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

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

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

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

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

Начало работы

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

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

Одна из ранних версий Quarkly
Одна из ранних версий Quarkly

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

Дизайн-инструмент и среда разработки одновременно

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

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

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

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

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

Выход на Product Hunt

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

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

179179
151 комментарий

А почему нет русского интерфейса ? У меня  ощущение что у наших разработчиков какие - то комплексы и фобии, что если они сделают русский интерфейс то ... даже не знаю чего они боятся ... как Дуров с русским  языком в телеграмме тянул до последнего. Русский язык между прочим 4-й в википедии. Почему то если видишь грамотно переведённый и написанный текст - к гадалке не ходи - продукты майкрософт или гугл  или любой другой иностранной компании. Если вы хотите раскручиваться на западе так и печатайте статьи на реддите, а если представляете продукт в России (на VC) то сделайте русский язык.
По моему так логично.

76

А зачем нужен русский интерфейс?
Контент на русском для юзеров - ОК.
Но вы-то работаете в сфере, где English is a must!

82

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

43

Максим, приветствую. Тут вы правы, скоро у нас будет локализация. Всё параллельно уже переведено на русский. Тянуть как Дуров не будем, сделаем до Нового года :)

31

1 - Вы так пишите как будто там есть все другие языки, кроме русского.
Там версия только на английском.
2 - Добавление языка помимо английского довольно редко окупается, а ресурсов на поддержание уходит много.
Для подобного продукта, интерфейс на языке отличном от английского не даст ничего.
3 - Россия это 1.5% мирового рынка экономики. И когда дело дойдет до зарабатывания на продукте, то локализация языка не даст никакого денежного профита, а отказаться от его поддержки будет уже нельзя.

18

Это комплекс и фобия и еще и "Вдруг меня возьмут в Силиконовую долину.."
Статья на птичьем языке, отсюда вывод игнорировать данное по.

3

Ты программировать на HTML и CSS тоже на русском будешь умник

1