Сегодня я хочу рассказать о том, почему я начал разрабатывать очередной конструктор сайтов и чем он отличается от других. В первую очередь, этот конструктор сайтов, в отличие от других, может принести пользу не только домохозяйкам и начинающим предпринимателям, но и разработчикам. Наверное, главной причиной этого стали мысли о том, что нужно мне самому, а не другим. И не смотря на то, что я прошел через крутые и сложные проекты, в последнее время все чаще приходится заниматься простыми проектами – лэндингами и корпоративными сайтами. Ну и еще интернет-магазины, а если быть более точным, то интернет-витрины (такой себе интернет-магазин без корзины, но с возможностью оставить заказ на товар), так как они более эффективны на начальном этапе. Каждый раз при разработке подобного проекта сталкиваешься в выбором фреймворка, настройкой и кучей другой рутины, которую очень хотелось автоматизировать. За время работы мне пришлось столкнуться с двумя проектами-конструкторами. Один разрабатывался для немца и был предназначен для такой аудитории, как стоматологи, адвокаты, парикмахеры, которым нужен сайт визитка. Второй же работает с 2002 года на рынке США и является настоящим монстром. Но это было все не то, поэтому было решено создать свой конструктор, который позволит максимально ускорить разработку простых типовых веб-проектов, при всем этом сохранив гибкость, без которой смысл такого сервиса для разработчиков теряется полностью.
Концепция
Мне не раз говорили, что есть куча готовых решений, некоторые даже бесплатны, пользуйся ими. Однако у всех этих решений есть одна проблема – они созданы только для людей, которые ничего не понимают в сайтах. А это накладывает большие ограничения. Мы можем выбрать только тот шаблон, стиль шапки и меню, который заготовили нам разработчики. Именно поэтому было решено уделить основное внимание гибкости решения. Технически это означало то, что пользователь должен иметь доступ ко всех исходникам сайта, от HTML-кода макета до статических JavaScript и CSS файлов. При этом всегда есть возможность создавать и усложнять инструменты, которые позволят генерировать этот самый код, позволяя добиться тех преимуществ, которые предоставляют остальные сервисы.
Ко всему этому, я видел, что делают неопытные люди, когда им дают напрямую поработать с дизайном сайта. Такое чувство, что они специально стараются сделать его пострашнее. Чтобы прям смотреть было невозможно и хотелось как можно быстрее закрыть вкладку. Если мы хотим, чтобы неопытные люди могли сами сделать красивый сайт, у нас есть только один вариант – дать выбор ограниченного количества элементов (макет, шапка, лого, меню) любые комбинации которых будут заведомо удачны. Стоит нам дать пользователю больше свободы и сайт моментально начинает отдавать девяностыми. Именно по этой причине я не захотел ориентироваться на эту аудиторию, дабы не стать причиной появления еще одной волны убогих сайтов в рунете.
Реализация
Основная суть заключается в том, что каждая страница сайта состоит из нескольких частей, одни из которых меняются, а другие нет. Например, на примере самого простого сайта-визитки, на каждой странице у нас одна и та же шапка, лого, футер. Однако на каждой странице у нас прописаны свои теги title и description, а так же свое содержание основного контейнера с контентом. Исходя из этого была построена архитектура системы. У каждого сайта есть свой код макета и список страниц, у каждой страницы есть свой URL и произвольное количество блоков. При переходе на какой-либо URL, если страница находится в базе, подгружаются все ее блоки (блок title, блок description, блок content) и подставляются на свои места в макет сайта, для этого используется шаблонизатор. Затем страница отдается пользователю. Это, конечно, очень упрощенное описание, однако оно дает понять суть работы.
В случае интернет-магазина система позволяет настроить для каждого сайта свой набор полей, то есть для одного сайта у товара будет два поля – название и описание, а для другого все десять – цена, количество, цвет и так далее. Динамический набор аттрибутов позволяет решить эту задачу. Благодаря использованию шаблонизатора, мы можем вывести весь список продуктов на странице, использую следующую конструкцию:
<div class="row">
{% for product in {{ categories['Готовые решения'] }} %}
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="thumbnail">
<img alt="{{ product['name'] }}" src="/uploads/medium/{{ product['images'].first }}">
<h4><a href="/product/{{ product['slug'] }}">{{ product['name'] }}</a></h4>
<h4>{{ product['extra']['Цена'] }} рублей</h4>
</div>
</div>
{% endfor %}
</div>
Инфраструктура
Учитывая, что над проектом я работаю в одиночку, выбор однозначно пал на Ruby On Rails. В качестве базы данных было решено использовать PostgreSQL, решающим фактором здесь стало расширение hstore, которое как раз позволяет работать с динамическим набором аттрибутов и выстраивать по ним индексы. В качестве ОС был выбран Debian, веб-сервер nginx вкупе с puma, сам ruby работает через rbenv. Данная конфигурация неплохо показала себя во время нагрузочного тестирования.
Планы
На самом деле, уже есть куча идей, в какую сторону это все развивать. Есть даже одна революционная идея, правда вы о ней узнаете, когда она уже будет реализована. Данный проект будет полезен людям, которым нужен простой сайт, но они не хотят ни над чем думать кроме дизайна и верстки. Уже сейчас несколько моих проектов (персональный блог, лэндинг, интернет-магазин) работают на данной платформе и позволяют мне понять со стороны пользователя, какой все-таки функционал нужен в системе на первом этапе.
Я не просто так пишу данный пост во втором часу ночи. Я знаю, что на хабре очень отзывчивая аудиторая, поэтому расчитываю на то, что данный пост даст толчок проекту. Для всех заинтересовавшихся я готов предоставить доступ для закрытого бета-теста, а от остальных неравнодушных жду идей, советов и других светлых мыслей ;)
Минутное видео с демонстрацией функции создания сайта в один клик напоследок:
Автор: crashcube
