Зачем я сделал еще один велосипед
Сегодня я хочу рассказать о том, почему я начал разрабатывать очередной конструктор сайтов и чем он отличается от других. В первую очередь, этот конструктор сайтов, в отличие от других, может принести пользу не только домохозяйкам и начинающим предпринимателям, но и разработчикам. Наверное, главной причиной этого стали мысли о том, что нужно мне самому, а не другим. И не смотря на то, что я прошел через крутые и сложные проекты, в последнее время все чаще приходится заниматься простыми проектами — лэндингами и корпоративными сайтами. Ну и еще интернет-магазины, а если быть более точным, то интернет-витрины (такой себе интернет-магазин без корзины, но с возможностью оставить заказ на товар), так как они более эффективны на начальном этапе. Каждый раз при разработке подобного проекта сталкиваешься в выбором фреймворка, настройкой хостинга и кучей другой рутины, которую очень хотелось автоматизировать. За время работы мне пришлось столкнуться с двумя проектами-конструкторами. Один разрабатывался для немца и был предназначен для такой аудитории, как стоматологи, адвокаты, парикмахеры, которым нужен сайт визитка. Второй же работает с 2002 года на рынке США и является настоящим монстром. Но это было все не то, поэтому было решено создать свой конструктор, который позволит максимально ускорить разработку простых типовых веб-проектов, при всем этом сохранив гибкость, без которой смысл такого сервиса для разработчиков теряется полностью.КонцепцияМне не раз говорили, что есть куча готовых решений, некоторые даже бесплатны, пользуйся ими. Однако у всех этих решений есть одна проблема — они созданы только для людей, которые ничего не понимают в сайтах. А это накладывает большие ограничения. Мы можем выбрать только тот шаблон, стиль шапки и меню, который заготовили нам разработчики. Именно поэтому было решено уделить основное внимание гибкости решения. Технически это означало то, что пользователь должен иметь доступ ко всех исходникам сайта, от HTML-кода макета до статических JavaScript и CSS файлов. При этом всегда есть возможность создавать и усложнять инструменты, которые позволят генерировать этот самый код, позволяя добиться тех преимуществ, которые предоставляют остальные сервисы.Ко всему этому, я видел, что делают неопытные люди, когда им дают напрямую поработать с дизайном сайта. Такое чувство, что они специально стараются сделать его пострашнее. Чтобы прям смотреть было невозможно и хотелось как можно быстрее закрыть вкладку. Если мы хотим, чтобы неопытные люди могли сами сделать красивый сайт, у нас есть только один вариант — дать выбор ограниченного количества элементов (макет, шапка, лого, меню) любые комбинации которых будут заведомо удачны. Стоит нам дать пользователю больше свободы и сайт моментально начинает отдавать девяностыми. Именно по этой причине я не захотел ориентироваться на эту аудиторию, дабы не стать причиной появления еще одной волны убогих сайтов в рунете.
Реализация Основная суть заключается в том, что каждая страница сайта состоит из нескольких частей, одни из которых меняются, а другие нет. Например, на примере самого простого сайта-визитки, на каждой странице у нас одна и та же шапка, лого, футер. Однако на каждой странице у нас прописаны свои теги title и description, а так же свое содержание основного контейнера с контентом. Исходя из этого была построена архитектура системы. У каждого сайта есть свой код макета и список страниц, у каждой страницы есть свой URL и произвольное количество блоков. При переходе на какой-либо URL, если страница находится в базе, подгружаются все ее блоки (блок title, блок description, блок content) и подставляются на свои места в макет сайта, для этого используется шаблонизатор. Затем страница отдается пользователю. Это, конечно, очень упрощенное описание, однако оно дает понять суть работы.В случае интернет-магазина система позволяет настроить для каждого сайта свой набор полей, то есть для одного сайта у товара будет два поля — название и описание, а для другого все десять — цена, количество, цвет и так далее. Динамический набор аттрибутов позволяет решить эту задачу. Благодаря использованию шаблонизатора, мы можем вывести весь список продуктов на странице, использую следующую конструкцию:
![{{ product['name'] }}](/uploads/medium/{{ product['images'].first }})
Минутное видео с демонстрацией функции создания сайта в один клик напоследок:
[embedded content]
