Bootstrap в готовом решении зло? Да ладно!

14.08.2016
Уже неоднократно к нам обращались клиенты со следующим диагнозом.

"У вас используется Bootstrap, а вот там сказали, что это тормозит сайт и плохо и громоздко, и предлагают верстку, оптимизированную на уровне handmade" 
Итак, 
я могу лишь предполагать, почему и откуда "растут ноги", но не буду никого критиковать, сам тоже когда-то таким был. 

И все же Bootstrap придется хоть как-то "обелить" расставив точки над i и осветив один из самых его интересных моментов. 

Начнем

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

И одна из них - сетки. 

framework.jpg

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

Для чего нужны сетки?

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

Отказаться от стандартов и создать верстку, прописав поведение всех (или только ключевых) блоков, ручками тоже можно, Но вы получите handmade проект, к которому кроме "создателя" остальные будут относиться с опаской, так как кто знает, что произойдет, если поправить этот стиль, заменить пимпочку на что-то другое. 

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

Но главный выигрыш от использования стандартов - скорость, универсальность. 
Если речь не идет о простеньких страничках или сайтах. 
Теперь отметим второй момент, когда популярность сеток резко выросла: 

Адаптивность

И тут преуспел Bootstrap, хотя есть и другие сеточные фреймворки (например 960.gs) 

Ах да. 
Забыл сказать следующее: 
Bootstrap - достаточно широкий фреймворк,в котором сетки просто один из "пунктиков", не считая адаптивности. 
Я редко встречал проекты, которые используют все 100% возможностей фреймворка. 
Но самое интересное, что многие сходу воспринимают Bootstrap именно как набор кнопочек, формочек и прочей всячности. Тем не менее, можно брать от него лишь то, что вам требуется. 

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

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

Есть и интересные моменты. 
Если использовать готовые промышленные сетки вместо handmade верстки, то вес CSS, к примеру, наоборот может уменьшиться, а CSS могут стать проще, также как и "архитектура" верстки. 
Но самое главное - верстка на основе сеток читается верстальщиками гораздо легче чем хендмейд. Это преимущества любой стандартизации, когда освоив стандарт, можно легко работать с любым проектом, его поддерживающим 

Ну и живой пример на нашем опыте. 
Для решения TopShop мы создавали свои сетки, но... на базе промышленных стандартов. 

Но, начиная с решения Корп сайт, уже работаем строго с сетками Bootstrap (в первую очередь, чтобы встать на рельсы стандартизации, во вторую, он нам нравится, в третью - теперь это тоже "частичка" Битрикса, хотя на момент принятия нашего решения этого еще не было) 

А в решении Bxready: Маркет у нас даже есть свои хуки и патчи, корректирующие поведение родного Битриксовского Bootstrap. 

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

Пока мы использовали только: 
Сетки и часть типографики (вес очень мизерный и даже меньше чем хендмейдовская адаптивная верстка с CSS) 
Если понадобится что-то еще готовое, добавим. 
Но... делаем мы это осмысленно. 


Еще раз отметим почему это выгодно: 

1. Простота сборки макетов

Попробуйте провести модернизацию или перепланировку handmade верстки и правильно собранного сайта на сетках bootstrap. 

Это покажет вам выгоду от использования стандартов. 
Сравнить это можно с модульными гарнитурами, когда вы можете формировать модули в соответствии с дизайном интерьера или как уже писал ранее - свободной планировкой. 

2. Простота модернизации и адаптации

Попробуйте поуправлять поведением блоков при адаптивности и поэкспериментировать при этом с АБ тестированием. 
И представьте handmade адаптив, когда боишься, что банальная перестановка стены обрушит все здание. 
Сравните скорости и затраты. 

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

Т.е. они как нельзя кстати подходят к современным реалиями 

Нейтральный итог:
В приницпе.... на многие моменты в Bootstrap существуют более крутые аналоги, но сетки... 
Мне вот просто нравятся и все тут :)

Вы еще верите, что Bootstrap это зло?

Если у вас новый Битрикс, попробуйте сдать его на анализы. 
А вдруг где-то в его клеточках притаился этот злобный и ужасный Bootstrap? ;)

Я же обычно интересуюсь, каким образом реализован дизайн и как работает адаптивность? 

Ну и еще интересный момент про bootstrap: 
Есть у него еще набор шрифтовых иконок GlyphIcon 

glyphicon.jpg

Прикольная штука, но одно "но". Набор состоит только из бесплатных иконок. 
Тем не менее есть альтернатива, которую знают многие: fontawesome (и радует, что этот набор теперь тоже в ядре битрикс и не надо его тащить извне) 

fontawesome.jpg

А еще я искренне поддерживаю разработчиков Битрикс в их решении в отношении сеток Bootstrap.

С уважением, Алексей Коваленко 

P.S. 
  • На самом деле не всем проектам или сайтам нужны промышленные технологии (сетки, адаптивность и прочее)
  • Сеточные технологии, в том числе и сетки Bootstrap, начинаются именно с дизайна. Поэтому сначала надо знать, как они работают и самое важное - это должен знать и соблюдать веб-дизайнер, иначе верстка превратится в "как бы эту картинку впихнуть в невпихуемое, или ну его нафиг, мне платят за точность, а не за пропаганду стандартов".
  • Настало время, когда до заказчика уже надо доводить, что есть моменты, в которых верстка должна быть строго по дизайну, а какие моменты варьируемые (резиновые, масштабируемые и т.д.), а это тоже труд.
  • Для меня до сих пор является непоняткой, если веб-мастер не знаком с сетками. При подготовке программистов я ранее использовал задания такого плана: сверстать простенький адаптивный макет, изучить Bootstrap, сделать тоже с помощью Bootstrap - и сделать соотв. выводы по простоте и скорости и когда это выгодно.
  • Реально встречал случаи некорректного использования bootstrap в модулях, отрицать не буду,, хотя также как и бездумное использование любого другого фреймворка, в том числе и Битрикс. 

Вернуться обратно
ОПУБЛИКОВАТЬ В СОЦ.СЕТЯХ
Подпишись на рассылку!
Новости, обзоры, акции
Выберите рассылку: