Блочная модель разработки на CMS Vi-Site 5.0

1. Предыстория

До недавнего времени мы разрабатывали сайты по стандартной схеме, назовем её – «шаблонная модель разработки».

Сайт разбивался на шаблоны, допустим: главная страница, контакты, раздел новостей, отдельная новость, какая-то контентная страница и так далее, а количество таких шаблонов могло доходить до сотни на больших проектах. Затем оценивали каждый шаблон, верстку и программирование, и так же разрабатывали их, верстали и программировали каждый шаблон по отдельности.

В командной работе это выглядело примерно так.

Верстальщик Иннокентий верстает главную страницу, верстальщик Гавриил верстает страницу контакты, и так далее. После верстки программист Афанасий программирует главную страницу, а программист Женаида берет в работу страницу контактов. И так шаблончик к шаблончику, и получался сайт.

2. Проблема

Все было классно, но если посмотреть на шаблоны внимательнее, то можно заметить, что многие блоки у этих шаблонов повторяются, а меняется только контент в них. Шапку и футер сайта не берем во внимание, ведь они почти всегда одинаковые на всех шаблонах страниц.

Шаблон #1

Шаблон #2

Как видим, это разные шаблоны, но блоки баннер, хлебные крошки, заголовок h2 одинаковые, а меняется только контент.

Разрабатывая по шаблонному методу верстальщики Иннокентий и Гавриил делали бы одно и тоже, или им бы приходилось как-то договариваться между собой, чтобы не выполнять двойную работу. Та же проблема была и у программистов.

Бывали случаи когда все уже сверстано и запрограммировано, а клиент вдруг захотел поменять блоки местами или решил на одной странице сайта больше не использовать верхний баннер.

Обычно наша реакция такая: "Блин, мы ведь уже все запрограммировали и дизайн был ранее утвержден!". В итоге приходилось создавать новый шаблон, где були реализованы все пожелания клиента. А что делать если таких будет с десяток или сотня?

В итоге дедлайны переносятся, клиент не доволен, что мы не успеваем в срок сдать сайт и приходится переделывать по несколько раз один и тот же шаблон.

3. Решение проблемы

На помощь пришла «блочная модель разработки». Мы уже пробовали её внедрять ранее на некоторых сайтах и зачатки были сделаны 1-2 года назад, но сейчас с появлением новой версии нашей CMS «Vi-Site 5.0» и с учетом нюансов, которые были с этой моделью разработки на прошлых проектах, мы смогли сделать новое и близкое к идеалу решение. Но ясное дело, что идеала не существует, и эта модель будет постепенно дорабатываться и развиваться.

4. В чем суть нового решения?

Мы перестали разрабатывать шаблоны, а теперь разрабатываем только блоки.

В CMS вместо 50-70 разных шаблонов, которые клиент может применять для отображения страниц, теперь существует только один шаблон для выбора, мы его назвали «универсальный шаблон». Его можно применить к любой странице на сайте и наполнить доступными блоками. При этом можно менять порядок отображения и контент блоков так, как пожелает клиент, и не привязываться к изначальному дизайну.

Например, для страниц выше в CMS шаблон будет выглядить примерно так.

Каждый блок имеет предпросмотр, в котором видно, как он будет выглядеть на странице сайта. Все блоки сгруппированы по типам, для упрощения поиска по ним.

5. Что это дает?

Преимущества для клиента:

• Возможность наполнять страницы сайта блоками и контентом так, как он захочет сам, без вмешательства верстальщика и программиста.
• Экономия времени, ведь не нужно разрабатывать новый шаблон, а нужно всего лишь из доступных блоков сложить страницу, как из конструктора.
• Экономия денег, такой подход позволяет снизить время человеко-часов на разработку сайта в 2-3 раза! Как? Поясню ниже.
• Меньше багов, исключаются ситуации когда правят код в одном месте, а сломалось что-то в совершенно другом. Так как каждый блок живет своей жизнью и он никак не связан с другими блоками.
• Дополнительное преимущество в новой CMS Vi-Site – редактирование контента возможно прямо на фронте сайта, если администратор при этом авторизированный в CMS.

Преимущества для верстальщика:

• Теперь не нужно верстать шаблоны, а нужно верстать только блоки из которых состоят шаблоны.
• Над проектом одновременно могут работать много верстальщиков, не мешая друг другу.
• Задачи можно разделять на более мелкие, и выполнять их быстрее.

Преимущества для программиста:

• Программисты получают задачу на программирование блока, а не запрограмировать весь шаблон, а это упрощает разработку.
• Принципы DRY (не повторяться) и SRP (принцип единственной ответственности) работают в полную силу, код не дублируется и каждый блок независимый. За функционал каждого блока отвечает отдельный класс, который ничего не знает про другие блоки, и редактируя код в классе одного блока невозможно что-то сломать в другом блоке.
• Принципы MVC. Рекомендую использовать «толстую модель и тонкий контроллер», вот как выглядит контролер нашего универсального шаблона.

​​

Мне кажется, что это самый тонкий контроллер в мире программирования который только можно придумать.

Преимущества для тестировщика

Тестировать такой код намного проще. На каждый блок пишется функциональный тест, при этом тест очень простой и в совокупности они покроют функционал всего сайта, что упростит разработку и рефакторинг кода.

6. Что имеем в результате?

• Разработка сайта упрощается в разы.
• Клиент имеет возможность конструировать страницы сайта на свой вкус, без обращения к нам.
• Сопровождение и доработка таких сайтов упрощается.
• Багов в десятки раз меньше из-за того, что каждый блок покрыт тестом.
• Рефакторить код можно без боязни что-то сломать.
• Менеджерам проекта легче ставить задачи. Не нужно разрабатывать весь шаблон, нужно разработать только новые блоки для "универсального шаблона".
• Все счастливы и довольны! :)

Статью подготовил: Артур Щаблевский