Блочная модель разработки на CMS Vi-Site 5.0
13 Апреля 2020
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. Что имеем в результате?
- Разработка сайта упрощается в разы.
- Клиент имеет возможность конструировать страницы сайта на свой вкус, без обращения к нам.
- Сопровождение и доработка таких сайтов упрощается.
- Багов в десятки раз меньше из-за того, что каждый блок покрыт тестом.
- Рефакторить код можно без боязни что-то сломать.
- Менеджерам проекта легче ставить задачи. Не нужно разрабатывать весь шаблон, нужно разработать только новые блоки для "универсального шаблона".
- Все счастливы и довольны! :)
Статью подготовил: Артур Щаблевский
Понравилась статья? – Поделитесь ссылкой::