Bootstrap в готовом решении зло? Да ладно!
18 августа 2016
Автор: Коваленко Алексей
Давно хотел написать этот пост, но все руки не доходили.
Уже неоднократно к нам обращались клиенты со следующим диагнозом
"У вас используется Bootstrap, а вот там сказали, что это тормозит сайт и плохо и громоздко, и предлагают верстку, оптимизированную на уровне handmade"
Но самое страшное, когда такие вопросы задают веб-мастера и со стажем
Итак,
я могу лишь предполагать, почему и откуда "растут ноги", но не буду никого критиковать, сам тоже когда-то таким был.
И все же Bootstrap придется хоть как-то "обелить" расставив точки над i и осветив один из самых его интересных моментов.
Начнем
Современная адаптивная верстка может быть выполнена как в полностью handmade исполнении с точностью вылизывания каждого блока, так и с использованием готовых "промышленных" технологий.
И одна из них - сетки.
Не стоит их отвергать или хаять, так как дизайн на основе сеток является стандартом де-факто уже далеко не один год, еще до популяризации адаптивности, и по сути уже баян, о котором никто не пишет.
Для чего нужны сетки?
Чтобы ваш сайт превратить в аналог монолитного здания со свободной планировкой, которую может безопасно и просто перепланировать любой веб-мастер, и при этом с соблюдением единых стандартов.
Отказаться от стандартов и создать верстку, прописав поведение всех (или только ключевых) блоков, ручками тоже можно, Но вы получите 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
Прикольная штука, но одно "но". Набор состоит только из бесплатных иконок.
Тем не менее есть альтернатива, которую знают многие: fontawesome (и радует, что этот набор теперь тоже в ядре битрикс и не надо его тащить извне)
А еще я искренне поддерживаю разработчиков Битрикс в их решении в отношении сеток Bootstrap.
С уважением, Алексей Коваленко
P.S.
Уже неоднократно к нам обращались клиенты со следующим диагнозом
"У вас используется Bootstrap, а вот там сказали, что это тормозит сайт и плохо и громоздко, и предлагают верстку, оптимизированную на уровне handmade"
Но самое страшное, когда такие вопросы задают веб-мастера и со стажем
Итак,
я могу лишь предполагать, почему и откуда "растут ноги", но не буду никого критиковать, сам тоже когда-то таким был.
И все же Bootstrap придется хоть как-то "обелить" расставив точки над i и осветив один из самых его интересных моментов.
Начнем
Современная адаптивная верстка может быть выполнена как в полностью handmade исполнении с точностью вылизывания каждого блока, так и с использованием готовых "промышленных" технологий.
И одна из них - сетки.
Не стоит их отвергать или хаять, так как дизайн на основе сеток является стандартом де-факто уже далеко не один год, еще до популяризации адаптивности, и по сути уже баян, о котором никто не пишет.
Для чего нужны сетки?
Чтобы ваш сайт превратить в аналог монолитного здания со свободной планировкой, которую может безопасно и просто перепланировать любой веб-мастер, и при этом с соблюдением единых стандартов.
Отказаться от стандартов и создать верстку, прописав поведение всех (или только ключевых) блоков, ручками тоже можно, Но вы получите 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
Прикольная штука, но одно "но". Набор состоит только из бесплатных иконок.
Тем не менее есть альтернатива, которую знают многие: fontawesome (и радует, что этот набор теперь тоже в ядре битрикс и не надо его тащить извне)
А еще я искренне поддерживаю разработчиков Битрикс в их решении в отношении сеток Bootstrap.
С уважением, Алексей Коваленко
P.S.
- На самом деле не всем проектам или сайтам нужны промышленные технологии (сетки, адаптивность и прочее)
- Сеточные технологии, в том числе и сетки Bootstrap, начинаются именно с дизайна. Поэтому сначала надо знать, как они работают и самое важное - это должен знать и соблюдать веб-дизайнер, иначе верстка превратится в "как бы эту картинку впихнуть в невпихуемое, или ну его нафиг, мне платят за точность, а не за пропаганду стандартов".
- Настало время, когда до заказчика уже надо доводить, что есть моменты, в которых верстка должна быть строго по дизайну, а какие моменты варьируемые (резиновые, масштабируемые и т.д.), а это тоже труд.
- Для меня до сих пор является непоняткой, если веб-мастер не знаком с сетками. При подготовке программистов я ранее использовал задания такого плана: сверстать простенький адаптивный макет, изучить Bootstrap, сделать тоже с помощью Bootstrap - и сделать соотв. выводы по простоте и скорости и когда это выгодно.
- Реально встречал случаи некорректного использования bootstrap в модулях, отрицать не буду,, хотя также как и бездумное использование любого другого фреймворка, в том числе и Битрикс.
Предлагаем еще прочесть
