Всем привет. Меня зовут Александр, я соавтор и главный разработчик 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 можно по ссылке.
А почему нет русского интерфейса ? У меня ощущение что у наших разработчиков какие - то комплексы и фобии, что если они сделают русский интерфейс то ... даже не знаю чего они боятся ... как Дуров с русским языком в телеграмме тянул до последнего. Русский язык между прочим 4-й в википедии. Почему то если видишь грамотно переведённый и написанный текст - к гадалке не ходи - продукты майкрософт или гугл или любой другой иностранной компании. Если вы хотите раскручиваться на западе так и печатайте статьи на реддите, а если представляете продукт в России (на VC) то сделайте русский язык.
По моему так логично.
А зачем нужен русский интерфейс?
Контент на русском для юзеров - ОК.
Но вы-то работаете в сфере, где English is a must!
Когда команда небольшая и проект на ранней стадии, логично не распылять силы на локализацию и делать на одном языке. Думаю, независимо от страны большинство разработчиков выберут английский.
Максим, приветствую. Тут вы правы, скоро у нас будет локализация. Всё параллельно уже переведено на русский. Тянуть как Дуров не будем, сделаем до Нового года :)
1 - Вы так пишите как будто там есть все другие языки, кроме русского.
Там версия только на английском.
2 - Добавление языка помимо английского довольно редко окупается, а ресурсов на поддержание уходит много.
Для подобного продукта, интерфейс на языке отличном от английского не даст ничего.
3 - Россия это 1.5% мирового рынка экономики. И когда дело дойдет до зарабатывания на продукте, то локализация языка не даст никакого денежного профита, а отказаться от его поддержки будет уже нельзя.
Это комплекс и фобия и еще и "Вдруг меня возьмут в Силиконовую долину.."
Статья на птичьем языке, отсюда вывод игнорировать данное по.
Ты программировать на HTML и CSS тоже на русском будешь умник
Даёшь лендинги в мегабайты!
Смотря как разрабатывать)
Комментарий недоступен
Спасибо огромное!) Такие отзывы нас вдохновляют на новые свершения!
Переход по ссылкам в превью нам ещё предстоит сделать, этого пока нет. Если есть ещё какие-то неясные моменты по интерфейсам и их работе – обязательно пишите, подскажем!
Круто!
Рад читать и видеть тебя здесь :)
Интересно, какие основные юз кейсы такого конструктора?
Я так понимаю, что сейчас порог входа - это разработчики или дизайнеры.
Если совсем прямой вопрос - когда разработчику использовать 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), копирайтером, переводчиком.
Забавно, что в 2020 еще кто-то пилит конструкторы сайтов ))))) Ребят ну вот честно, лучше бы потратили свои усилия на что-нибудь полезное.
Например на 900 комментариев на VC
Ребята! Круто, зашел посмотрел. UI приятный, но, как Я понимаю? (конечно, Вам виднее) интерфейс для новичков не сильно зайдет (Вы проводили Тесты?/Опросы?). В моем, (возможно убогом) понимании конструктор - это что то простое, где можно с минимальным порогом знаний/навыков, навоять что то. Для человека, который пишет в IDE с плагинами/настройками куда комфортнее. Это как переночевать в общаге, или в своей, уютной квартире, где все настроено для себя и под себя)
Так что, немного не понятна ЦА, для новичков - сложно. для тех кто пишет - это точно не нужно... Остается. промежуточный этап, когда человек уже научился перетаскивать блоки. вспомнил, о книгах - и пытается сделать первые шаги.. Но опять же, во всех (практически) учебниках IDE.
Как я понимаю, в основе лежат JS React? в конце 2020 года?)
ЗЫ: Хорошая. большая работа, надеюсь, Вы пожнете плоды своего труда. в том формате, на который рассчитывали
upd проголосовал за Вас)
Однако ... зашел сосед - показал ему v.one ему показался куда понятнее(спонтанный эксперимент на простом человеке, далеком от разработки. ИМХО как раз ЦА - конструкторов всех мастей)
Проблему с SEO написанных приложений решили? Они у вас только на клиенте рендерятся? Так как если так, но написанные с помощью вашего конструктора приложения хер продвинешь дальше гугла (да с с гуглом проблематично).
Вы сейчас серьезно не знаете, что кроулеры уже лет пять как умеют запускать JS код и парсить оттуда данные? Эй, звонили из 2015, просили напомнить, что даже в то время кроулеры уже умели так делать.
https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
Доброго вечера. Да, проблему с SEO решили. Для этого экспортируйте ваш проект в Gatsby. При сборке и деплое ваш проект отрендерится на сервере (SSG), все мета-теги и разметка сайта будут доступны сразу.
Чё по деньгам?
Анна, привет! Пока всё бесплатно и будет таковым оставаться, покуда мы можем это себе позволить. Но и в дальнейшем мы планируем удерживать нижнюю планку цены по рынку. А все основные функции проекта, думаю, останутся на фримиуме.
Шикарный проект. Далеко пойдете.
Если появится русский начну юзать.
пс: я не разраб.
Комментарий удален модератором
у меня бэк - full rest. я могу натянуть вашу штуку на него с добавлением js библиотек типа select2, swal2, ajax table и т.д.
Как продукт - круто, молодцы, интересно, классно, найдет своего клиента. Как разработка, хватит уже пихать этот реакт в любую дырку как конкурентное преимущество ( понятно, рынок диктует условия / это для нас удобно / мы с пелёнок пишем на реакте ), бляха! Что не продукт, то "реакт" / "компоненты" / "захерать свой сайт на реакт" / "подрочи, тут реакт!" / "поставь лойс, тут реакт!"
Кмон, гайз, мне, как конечному и обычному пользователю, насрать, хоть вы на спичках и пластилине написали конструктор. Мне. просто. нужен. сайт. А не сайт на каком-то непонятном для меня "реакте".
Посмотрите на Figma, и представьте что на главной странице у них было бы написано:
"Figma helps teams create, test, and ship better designs from start to finish. On react / WebGL / C++ / Wasm"
Пиздец меня прям бомбануло почему-то!
Тут какое дело? Конечно, пофигу глобальному пользователю что на чем, собственно, описания всего технологического стека и нет, да и на главной у кваркли не написано на чем сделано.
Тут реакт прозвучало так часто т.к. сейчас (в текущей его состоянии он еще не для всего применим из того для чего делался и что будет достаточно скоро) в первую очередь инструмент полезен и удобен будет тем, кто свой продакшен организовывает с использованием реакта, или хотя бы с ним знакомы.
Это и про возможность подключения компонентов из npm, добавления своих, Create-react-app на выходи и т.д.
Это причина упора в данную технологию, ее упоминания. А не типа: мы крутые потому что юзаем фреймворк Х. Такая идея.
Из, например, React Studio вы же не предложите выкидывать упоминание реакта. Тут примерно так же
Выглядит отлично. Попробовал чутка - у меня такое пока ощущение, что я могу целиком сайт сделать на Кваркли ни разу не притронувшись к коду, и уже потом готовый макет отдать на допил кодеру прямо в одном интерфейсе? Но будем тестить смотреть
Если этот проект реально то что я думаю то это топ :)
Спасибо
При некоторых задачах может и не придется даже звать кодера на допил. В любом случае, делаем все что бы минимизировать, и убрать: сначала макет, потом собираем\верстаем. Ну да это в статье и описано
Молодцы, большую работу сделали. Заапвотутил на PH ;-) Удачи гайз
Спасибо, Алексей! :)
Очень похож на вебфлоу, даже плашка такая же внизу, какие отличия?
Вроде бы молодцы, продукт может быть и найдет своего потребителя, тем не менее вопрос зачем он нужен и чем он лучше webflow например? Или Framer? Всё равно, нечто больше блога или лендоса на нем не сделать
Комментарий недоступен
Интерфейс мега-приятный. Так держать!
Не взлетит.
К сожалению, да.
Круто. Должно хорошо работать вместе с бэком на Directual
Не факт
Комментарий недоступен
Пока скорее да, но в будущем с появлением множества готовых компонентов всё несколько изменится, не теряйте нас :)
ребята если бы вы сделали конструктор под битрикс цены бы не было, к сожалению у битрикса нет все еще таких возможностей как у больших cms и тем более конструкторов
скорее, все же, если под что-то будем затачиваться - это под headless cms типа strapi. Битрикс, имхо, - вещь в себе
Конструкторов такого типа я давно ждал.
Но первое нужен русский язык.
Второе немного смущает, что вы имеете отношение к юкоз, который полностью остановился в развитии и их жуткому недоделанному продукту юкит (команда которого несколько раз менялась. но продукт лучше не стал. как был полным Г... так и остался). Команда Юкита - эта команда - которая не понимает рынок и полностью не понимает, что нужно потребителям.
Всё это смущает потому как идеология полного пофигизма на свой продукт от Юкоза и Юкита прорастёт и в вас и вы уже напитались этой идеологией. И начинать делать что-то своё на вашем конструкторе, я бы не рискнул, после того как узнал что вы имеете отношение (даже в прошлом) к Юкозу. Будет потерянное время потребителя, как было потеряно моё время когда я создавал свои сайты на Юкит и которые были фактически мертвыми сайтами, пока не были перенесены на Тильду, после переноса они стали полноценными сайтами.
Олег, привет! Не смог пройти мимо вашего комментария. Для начала хотелось бы отметить, что ребята – каждого из них я знаю – делают этот проект самостоятельно, это по сути пет-проект, который, как мы все верим и надеемся, становится (и станет) нечто большим. Как следствие, вся идеология, планы по развитию, всё идет полностью от самих ребят.
И Quarkly, что важно понимать, не классический конструктор. Если так разобраться, он может жить (и развиваться) силами комьюнити, когда появится маркетплейс с компонентами. Поэтому я бы не стал проводить тут аналогии с какими-либо проектами, это достаточно некорректно.
Приветствую! Спасибо за комментарий Олег. Русский язык будет. Ну а если не хочется начинать что-то делать, но всё таки интересно могу предложить короткий ролик с демонстрацией создания шота из дрибббла https://youtu.be/HqZ0quUWvmo.
Что в вашем понимании "Мертвыми сайтами", у вас были плохие показатели при индексировании сайта?
Что по скорости?
Наша главная quarkly.io собрана в Quarkly, при это там достаточно анимации, можно оценить, так сказать, живьем :)
Сомнительное полурешение.
Если я хочу избавиться от головной боли с фронтендом - я использую твиттер бутстрап и его производные.
Если мне нужна какая то сложная логика - напишу сам.
Чего точно не буду делать - так это собирать франкештейна на реакте, а потом мучится с его кодом.
Главное, непонятно, к чему тут приплели Реакт. Почему не Ангулар или Вуе?
Это что-то крутое, судя по описанию! Для vue js только наверное не будет?
Самим хочется что бы было (нет ничего тут невозможно, поддерживать другие js фрейморки, не только реакт), но в ближайших планах слишком много других задач. Так что пока, к сожалению, нет
Круто и очень рад за вас! Надо все таки собраться, найти время и что-то запилить на quarkly 🙂
А расскажите в двух словах, чем вы лучше/хуже чем webflow?
Думаю, мои коллеги позднее ответят развернутее. Да и если напишите какие вы обычно решаете задачи, будет понятно какая сторона этого сравнения существует.
Мы в целом, видим заметный интерес от тех кто привык к вебфло, но все же не очень доволен. Но, конечно, у вебфло есть колоссальный плюс ввиде огромной инафраструктуры вокруг, от шаблонов до комьюнити. Тут похвалиться не можем.
Чем больше у нас будет появляться встроенных компонентов, блоков в продукте и пр, тем, умозрительно, этой разницы будет все меньше и меньше.
Сейчас не могу заявить: мы выигрываем у вебфло во всем.
Все что связано с реактом, тут этого просто у вебфло нет. Для кого-то это будет плюс, для кого-то вообще не важно, а кому-то и минус, т.к. надо вникать.
Вообще, у нас проходили (и еще будут, как отстроем формат) Верстка батлы -
https://www.youtube.com/channel/UCgj4oPdiBdV1O4TBGw1Q2ug/about
там в качестве соревновательного задания решалась как раз максимально типовая задача по верстке лендинга. И последний батл, а там с вебфло прям очень крутые спецы участвовали - показал, что во-первых другие конструкторы как-то прям ...ну в общем, суждение немного оценочное с мой стороны, а данных мало, но в целом, ребята с вебфло выиграли, хотя разрыв был не так что бы велик, и мы многое уже исправили и улучшили.
Повторюсь, будем проводить аналогичное, и смотреть на практике.
На словах-то можно хоть про более юзабельный интерфейс начинать рассказывать. Но это такое...
Пока мы в разных весовых (мы только-только, а они 7 лет как). Но на вскидку — у нас есть: тема, кастомные брейкпоинты, редактор кода синхронизированный со страницей.
Ну и у нас можно создавать свои компоненты, а их пропсы настраивать на правой панели (если правильно создавать). Вот пример:
https://youtu.be/Nw9VueOQmHg?t=168
Сможет ли дизайнер не знающий код, сделать рабочий лендинг?
Да. Но прямо сегодня он может столкнуться с тем, что вот прям все как он хотел без "позвать знающего код" не получается. Но таких мест\ситуаций с каждым апдейтом будет все меньше и меньше.
И еще, не могу не сказать, что идея в том, что все больше и больше дизайнеров (тот случай когда на западе это уже полностью устоявшийся тренд, но и у нас это вполне прослеживается) становятся знакомы с фронтом, и зачастую очень даже глубоко. В первую очередь, именно среди таких дизайнеров мы видим свою аудиторию. Но не только. Просто тут прям 10 из 10 попадение.
Есть возможность быстрой отправки репортов?
Приветствую, Максим. Да, конечно: https://quarkly.io/contact-form
буду тестить. если норм, готов платить
Ух ты, интересненько, поковыряем )) А чем он лучше Webflow? (вопрос от дизайнера)
Прочитал статью(целиком), но так и не понял. Для кого в итоге продукт? Если для дизайнеров или менеджеров, то им же придется учить реакт? А разработчик и сам в силах написать проект на реакте. Конструктор сайтов для лендосов, а ваш конструктор приложений для чего?
Для продуктовых команд, я так понимаю. В агентствах сайтоделов как правило есть верстальщик, и есть кодер. Кодер пишет и верстальщик верстает. На текущий момент им довольно сложно вместе работать т.к. разные компетенции. Кваркли же дает возможность разрабу и дизайнеру работать в одной среде.
Не работает деплой.
а можно скрин или еще что-то?
можно в личку, если тут не хочется.
Вроде как работает, хорошо бы воспроизвести вашу ситуацию
Ух тыыыыыы!! Это же РЕЕЕААААААКККТ!!!1
Каждой козе по баяну, а этой корове –по седлу
Молодцы парни! Так держать, рад, что у вас получается!
Спасибо, Кирилл!)
Привет, а в чем в 2-х словах отличие от webflow?
Сбросимся на капли для глаз людям, которые по десятому кругу про вебфлоу спрашивают. Ребят, напрягитесь листануть ради приличия
Всегда рад новым начинаниям в этом направлении и потратил некоторое время на изучение проекта. Проблема одна и та же что у всех - "сейчас все сложно, хотим сделать проще", получаем в итоге еще более громоздкую штуку...
По конкретике:
- нет возможности "удобно" добавить сторонний css фреймворк и другие зависимости, ну кроме как через изврат.
- подключение шрифтов, сохранение кода в компоненте, добавление компонентов к слою, конвертация слоя в компонент... это просто боль, не интуитивно, никакой заметной обратной реакции интерфейса
- результирующий код, ну это же фарш ребята, я молчу про atomize в компоненте (бред полный), но даже на выводе зачем реакт там где он ВООБЩЕ не нужен
Лень продолжать, если что пишите в личку, помочь всегда рад, надеюсь до ума доведете и этим можно будет пользоваться ) Удачи!
Алексей, спасибо за ваш отзыв! По порядку:
1. Да, пока такой возможности нет, но и css-фреймворки в чистом виде мы вряд ли будем добавлять, скорее популярные библиотеки компонентов;
2. Подключение своих шрифтов есть в планах;
3. По остальному спрошу в личку.
Если интерфейс английский то пожалуйста и англоязычным юзерам его и представляйте на аналогичной площадке. Медиум допустим. Ведь у всех планы именно там расти, за счёт кого?
Хорошая идея. Визивиг для html
Здравствуйте! Уверены на 100%, что многих это заинтересует, мы хотим предложить уникальные и недорогие статьи по цене 8 рублей за 1000 символов. Заходите в магазин статей textlog.ru!
Всех приветствую! 100% уверены, что многих это заинтересует, хотим предложить дешевые, но качественные тексты по 8 рублей за 1000 символов. Заходите в магазин статей textlog.ru!