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 можно по ссылке.
Проблему с SEO написанных приложений решили? Они у вас только на клиенте рендерятся? Так как если так, но написанные с помощью вашего конструктора приложения хер продвинешь дальше гугла (да с с гуглом проблематично).
Вы сейчас серьезно не знаете, что кроулеры уже лет пять как умеют запускать JS код и парсить оттуда данные? Эй, звонили из 2015, просили напомнить, что даже в то время кроулеры уже умели так делать.
https://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157
Почему же тогда все сайты которым важна поисковая оптимизация до сих пор рендерят на сервере и даже агресивно их кешируют. Так же очень интересно почему на сайтах используют микроразметки. Думаете все вокруг дураки?
Основная проблема при выполнение js гарантировать детерменированность кода и получения всегда одного и того же результата что в случае слаботипизированного языка js практически невозможная задача. К примеру в поиске у вас будет текст который внезапно исчез на целевой странице и на такое гугл никогда не пойдёт.
Второй аспект - стоимость индексирования, запускать настроящее окружение очень дорого и используется редко, в основном тексы парсяться с сайтов в результате анализа html - между прочим это отчетливо видно по логам, крайне редко гугл заправшивает js скрипты. Анализировать текст на несколько порядком дешевле чем поднимать виртуальное окружение.
Именно для предказуемости и приоритизации того, что должно попасть в выдачу и для удешевления работы со стороны поисковика рендер на сервере хоронить рано.
Второй довольно важный аспект это время когда ваш пользователь после белого экрана видит ваш сайт или приложение, и если у вас клиенсткое приложение на реакте без ленивой подгрузки может спокойно пройти секунд 10 на средней мобилке пока весь код скачается, скомпилируется и выполниться.
Чувака совершенно не смутило что тут ответил официальный представитель на мой вопрос что "проблему они решили", то есть люди знают про проблему клиентского рендеринга, сео и прочих штук, но пытается показаться умным.