Всем привет. Меня зовут Александр, я соавтор и главный разработчик 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 со словами: "ваш редактор говно, у меня тут говнокод", уж простите, без обид)
Вы сейчас оцениваете претифицированный код. Я уж не говорю о том, что мы с ребятами потратили год своей жизни, чтобы сделать что-то крутое и для людей, и при этом ничего не просим взамен. Разве что обойтись без хейта, где он не совсем уместен.
Нельзя называть блочный конструктор ни графическим редактором ни ide, это как назвать виртуальное пианино средним между настоящем роялем и студией звукозаписи.
Ide и ваш конструктор нельзя сравнивать в контекте говнокода, в ide говнокод порождает человек, в вашем конструкторе это внутренний механизм транформации блочной модели в код (с которым будет очень сложно работать).
Если же я в этот код добавлю компонент не из ваших компонентов я не смогу его редактировать в вашей конструкторе, а в редких случаях даже увидеть его в нем.
Термин претифицированный код здесь неуместен, то что мы видим, когда скачиваем проект это больше похоже на скомпилированный код. Претификация это лишь процесс расстановки переносов в коде для удобства чтения.
Суммирую все ваши косяки здесь и в других комментах, я могу с увереностью утверждать, что никакой вы не главный разработчик, а скорее всего идейный вдохновитель проекта.
Отмечу, что вы невнимательны и не совсем разбираетесь в теме, как это выглядит со стороны. Давайте ещё раз с самого начала.
Quarkly – не является блочным конструктором. Блочные конструкторы – tilda, wix. То, что у нас есть блоки, его таковым не делает.
Мы расстроены, что вы не обратили внимание на наш основной функционал, но это не беда, я вам сейчас всё расскажу.
Итак, Quarkly – гибрид нескольких инструментов (идейно). Figma (design tool) – отсюда у нас есть все основные фишки графических редакторов. Codesandbox – это как раз та часть, которой вы не уделили внимание. У нас можно разрабатывать свои компоненты, импортировать модули. Модули могут быть как локальными – вы можете создать сложную и оптимизированную композицию (компонент). Как я увидел, это вы как раз делать не захотели. Также вы можете импортировать любой модуль из npm-registry. Мы реализовали свой собственный сборщик модулей, что уже само по себе интересно.
Далее, Storybook – каждый созданный компонент в системе является самостоятельным виджетом, который вы можете редактировать(пропсы), перемещать на холсте, позиционировать абсолютно (интерактивно) и, самое главное, то что вы тоже пропустили, – можно конвертировать в компонент (в правой панели меню -> convert to component) и написать ему бизнес-логику, при этом в коде страницы он не будет занимать 1000 строк, как у вас.
Насчет претификации: количество кода это как раз следствие претификации (которая включена в компиляцию).
Чтобы не было дальнейших споров, я расскажу подробно, как это работает.
Работа со страницей:
Есть опорная структура данных – в нашем случае плоское дерево. Когда пользователь делает что-то в коде страницы, он как раз редактирует это дерево. Наша структура данных умеет преобразовываться в AST дерево.
AST дерево, в свою очередь, в код. Для этого у нас есть модуль Printer. Он приводит ноды из AST дерева в читаемый, претифицированный код.
JSX-код может быть преобразован обратно в AST дерево, которое уже может преобразоваться в нашу структуру данных – это обеспечивает возможность редактирования как из кода, так и из холста.
Конвертация в компонент – вы можете создать компоненты с холста и вкладывать их друг в друга, это работает по похожему принципу.
Итог: количество кода – следствие того, что вы сами добавили много сущностей, к тому же вы читаете претифицированный код с атомарным css. При сборке в прод версию в итоговом бандле код будет выглядеть иначе. Если интересно, как это работает, дайте знать.
Уважаемый, я экспортировал ваш собственный пример, а вы не узнали?
Куда вы экспортировали? Что за пример?
https://artemzhigalin.ru/src/Builder__Quarkly_2020-11-08_15-31-31.jpg
Вот сама форма, занимает 131 строку в JSX. Тут же и стили (включая те которые на брейкпоинтов) и теги. Не дезинформируйте аудиторию.
Сделайте такую же форму на чистом HTML и CSS и посмотрим сколько строчек будет у вас.
А вы похоже сами некомпетентны в своем же продукте...
P.s. и не надо писать тут про бесплатно, мы тут все прекрасно знаем что ваше бесплатно это просто замануха
Ой началось. Смотритесь уже,что страницы теперь весят как приложения. Потому что это и есть приложения
Давайте же разберёся тогда что есть react приложение, а что есть демка верстки с использованием реакта. Кроме того данный сервис в основном будет затребован в создании лендиногов и сайтов визиток где использование реакт в принципе сомнительно, а для действительно серьезных приложений данный сервис избыточен и даже вреден. Боюсь что реакт здесь использован не потому что он нужен, а потому что в некоторых головах он все ещё модный.
Я вот тоже задумался, нахуа они приплели React к очередному конструктору сайтов.
Покажи GitHub
"да ты знаешь какой у меня гитхаб !"
ОК покажи свои разработки сравнимого даже не уровня а просто размера ...
Очень интересно по какому ебучему принципу мне нельзя критиковать что либо пока я не сделал аналог? Морозов наш - смиренный дурилка, ему нельзя говорить плохо о качестве медицины пока он не откроет свою больницу, о плохих дорогах пока он не построит таковую, ну и в правительстве все молодцы ибо добейся сначала, а если шаверма оказалось некачественно ты сначала, блядь, сам шавуху открой, ой молчал бы ты лучше... позорище.