Frontender Magazine

О jQuery и Bootstrap: расставляем точки над «i»

Цель этой статьи — доступно рассказать о том, когда и почему следует использовать jQuery и Bootstrap. Я написал её не для разжигания холиваров, мне хотелось максимально прояснить вопрос необходимости этих инструментов. Но если у вас всё же возникнет желание с негодованием опровергнуть её содержимое и хорошенько поспорить — сначала прочтите статью до конца, а затем выскажитесь в комментариях.

Для кого эта статья

Классификация типов фронтендеров:

  1. Новички: только начинают знакомиться с миром фронтенд-разработки.
  2. Дилетанты: клепают однотипные лендинги, интернет-магазины и прочие сайты, не особо задумываясь о качестве кода.
  3. Профессионалы: работают над сложными проектами, выбирают для них подходящие инструменты и отвечают за результат в долгосрочной перспективе.

Эта заметка в первую очередь адресована новичкам, которые хотят стать профессионалами, а не дилетантами. Я расскажу о том, что такое jQuery и Bootstrap, а также зачем они нужны и когда их использовать не следует.

Краткий экскурс в прошлое и обзор инструментов

jQuery

Это JavaScript-библиотека, вышедшая в свет в далеком 2006 году (другие библиотеки тех лет уже давно на пенсии). В те времена стандарты, и так не очень удобные, были реализованы в каждом браузере по-своему, из-за чего разработчикам приходилось писать отдельный код для каждого браузера. Кроссбраузерная работа с DOM превращалась в ад. AJAX-запросы было проще не делать вообще. jQuery была создана для решения проблемы кроссбраузерности; она была словно волшебной палочкой, заставляющей браузеры работать так, как нужно. Её программный интерфейс восхищает любого, кто знакомится с ним. Помните, как вы в первый раз узнали о возможности объединять вызовы методов jQuery в цепочки? Просто космос! Она позволяет работать с DOM, навешивать на элементы события, создавать анимации, отправлять запросы к серверу, и всё это — абсолютно без всяких заморочек вроде «А в IE это будет работать?». Да, jQuery — действительно крутая штука, которая экономит нам (и нашим заказчикам) деньги. Заказчикам — потому что мы тратим меньше времени на решение разных проблем, связанных с кроссбраузерностью. Нам — потому что теперь не нужны лекарства от головной боли.

Bootstrap

CSS-фреймворк, появился в 2011 году («Ну и сосунок!», — презрительно вклинивается jQuery). Возможно вы не знаете, но раньше он назывался «Twitter Blueprint», что явно намекает на его принадлежность к понятно какому сервису. Действительно, Bootstrap изначально был внутренней библиотекой компонентов твиттера. Всякие кнопочки, изображения, формы — в общем, всё, из чего делался интерфейс сервиса. В какой-то момент ребята из твиттера решили сделать его опенсорсным и не прогадали (лучше бы они этого не делали, ей богу). Со временем Bootstrap становился всё более универсальным, обрастал новыми компонентами; появилась сетка и поддержка адаптивности, дизайн компонентов несколько раз перерабатывался под текущие тренды, появилась возможность использовать Bootstrap вместе с препроцессорами. Теперь Bootstrap — это отличный набор компонентов и вспомогательных классов, позволяющих быстро и не особо заморачиваясь набросать какой-нибудь интерфейс.

Крутые же инструменты? Что с ними не так?

Да, сами по себе инструменты крутые. Но соль в другом: jQuery начинают использовать до знакомства с основами JavaScript, а Bootstrap вообще используют не по назначению.

Ок, давайте разберёмся с этим. Очень многие приходят в веб-разработку просто из-за того, что им это интересно. Они изучают всё сами. В вузах не учат делать фронтенд, а качественных курсов очень мало. Зачастую новичок не знает, в какую сторону ему двигаться и что изучать, поэтому он просто тычется во всё, что попадётся на пути, словно слепой котёнок. В процессе такого обучения у него может сформироваться неправильная картина мира, в которой jQuery — язык программирования, а Bootstrap — единственный способ верстать адаптивно.

Диалог в чате:

— Ребят, с чего начать изучение адаптива?
— С Bootstrap

Что не так с jQuery

Сама по себе jQuery — замечательная библиотека с развитой экосистемой плагинов (правда их качество иногда оставляет желать лучшего). Многие считают её этаким стандартом для разработки сайтов. Из-за этого у новичков может сложиться впечатление, что JavaScript учить не нужно, достаточно уметь пользоваться jQuery и всё будет в шоколаде. Так вот: это в корне неверно. Да, если вы хотите верстать шаблонные лендинги, вам не придётся использовать ничего сложнее jQuery и пары десятков плагинов к ней. А если вы хотите стать крутым фронтендером? Тогда нужно в первую очередь изучить основы языка (или основы программирования, если вы с ними не знакомы). Без понимания фундаментальных механизмов JavaScript вы не сможете эффективно решать возникающие проблемы.

Если вы не знакомы с ним — начните его изучение с прекрасного учебника на русском языке. Даже английский учить не придётся, вот радость-то!. Не беритесь за jQuery, пока не освоите основы языка. Если у вас совсем нет опыта в программировании, начните с (тоже русскоязычных) курсов на Хекслете. Так вы заложите хорошую базу, с которой сможете без проблем изучить любую библиотеку или фреймворк. Без знания языка нет смысла пытаться освоить jQuery или что-нибудь другое.

Можно сколь угодно учиться пользоваться строительными инструментами, но без фундаментальных знаний дом построить не получится. jQuery — это инструмент, отвечающий за небольшой спектр задач. Остальные задачи требуют более широких знаний, чем $(document).makeCoolSite().

Если вы, дорогой читатель, имеете мало опыта и только учитесь — jQuery в будущем вам, скорее всего, не понадобится. Практически все популярные браузеры умеют автоматически обновляться. Нововведения появляются в браузерах быстрее, чем в официальных стандартах. Сегодня есть прекрасные нативные методы для работы с DOM, например, document.querySelector() работает даже в IE8!. Использовать для простых анимаций JavaScript теперь считается плохим тоном — лучше использовать CSS. AJAX-запросы к серверу уже давно перестали быть болью, а на смену XMLHttpRequest пришёл fetch. Если вам не нужно поддерживать старые браузеры — jQuery не нужен, потому что большинство возможностей этой библиотеки уже доступны нативно (или с полифиллами). Даже тратить время на изучение jQuery без осознанной необходимости не нужно: лучше потратьте его на изучение нативных API.

Что не так с Bootstrap

«CSS-фреймворки экономят время! Мне не нужно каждый раз изобретать кнопку! Адаптивность из коробки! БУЦТРАП НАВСИГДА!» — вот что я слышу в ночных кошмарах.

Для начала разберёмся с терминологией. Фреймворк — понятие довольно мутное. Я буду называть CSS-фреймворком набор инструментов для упрощения и ускорения вёрстки. CSS-фреймворк предоставляет разработчику инструменты для написания кода, а не сам код. Bootstrap же, по большей части, как раз предоставляет готовый код. Неудивительно, ведь изначально он был набором визуальных компонентов твиттера. Да, в Bootstrap есть всякие вспомогательные классы и примеси для препроцессоров, но его основа — именно готовая вёрстка.

Bootstrap можно использовать правильно и неправильно. К сожалению, новички по незнанию начинают использовать его неправильно.

Bootstrap можно использовать, если:

Bootstrap не подходит, если:

Многие считают Bootstrap инструментом для решения всех проблем, и стараются использовать его везде, где только можно. На практике это грозит большим количеством костылей в стилях. Bootstrap ведь не следует никакой методологи, вроде БЭМ, — его стили очень сильно завязаны на контексте и каскаде. Рано или поздно вы столкнётесь с проблемой переопределения стилей. Если вы верстаете макет с уникальным дизайном, всё, что может вам пригодиться из Bootstrap — это вспомогательные классы, которых не так много, и сетка, которую целиком заменяет флексбокс, и это ещё мы не рассматриваем случай с макетом не по сетке. Стили каких-то готовых компонентов всё равно по большей части придётся переписывать согласно дизайну. Кстати, новички не всегда знают о том, что из Bootstrap можно взять только необходимые модули — например, только сетку. А если и знают, не всегда хотят заморачиваться с этим. В итоге в проекте используется только сетка, а подключается весь Bootstrap с кучей ненужных зависимостей вроде иконочных шрифтов и jQuery-плагинов. Неиспользуемый код — это плохо: он является потенциальным источником проблем и багов в будущем, это лишние килобайты, которые приходится загружать посетителям вашего сайта. И не нужно мне говорить, что в 21 веке смешно беспокоиться о каких-то там килобайтах — это вы сидите за компьютером с широкополосным доступом в Интернет, а кто-то пользуется 3G-модемом или бесплатным вайфаем в отеле.

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

Резюме

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

Буду рад выслушать альтернативные мнения в комментариях. Спасибо за чтение!

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Андрей Романов
Автор:
Андрей Романов
Сaйт:
http://andrew-r.ru/
GitHub:
andrew--r
ВКонтакте:
http://vk.com/andrew_r

Комментарии (51 комментарий, если быть точным)

Автар пользователя
stas-webdev

Не заметил особенной зависимости от каскада в Bootstrap. Вообще, можно сказать что Bootstrap в какой-то степени использует БЭМ, вернее только Б - "блок". Каждый компонент бутстрапа, по-сути, является блоком из БЭМ.

Автар пользователя
sherkhan

Стас, Ну-ну https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L5777

Автар пользователя
stas-webdev

sherkhan, хороший пример, спасибо. Будем надеятся, что в версии 4 от этого избавятся

Автар пользователя
iamstarkov

@stas-webdev @sherkhan не надейтесь https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css#L3361-L3394

Автар пользователя
Tertiumnon

Характерно неверное суждение, будто новички должны использовать ванильный JS. Новички используют и будут использовать наиболее простые инструменты для решения своих задач. И таковые есть JQuery и Bootstrap. Другое дело, что каждому инструменту своё место. Далеко не всегда нужно подключать даже LESS/SASS.

Автар пользователя
stas-webdev

Tertiumnon, согласен. Более того, замечу, что, в моей практике, западные заказчики с Upwork, на простых проектах (например лендингах) очень часто просят НЕ использовать LESS/SASS и Browserify/RequireJS, стремясь к простоте кодобазы.

Автар пользователя
vyakymenko

Многие считают Bootstrap инструментом для решения всех проблем, и стараются использовать его везде, где только можно. На практике это грозит большим количеством костылей в стилях. Bootstrap ведь не следует никакой методологи, вроде БЭМ, — его стили очень сильно завязаны на контексте и каскаде. Рано или поздно вы столкнётесь с проблемой переопределения стилей. Если вы верстаете макет с уникальным дизайном, всё, что может вам пригодиться из Bootstrap — это вспомогательные классы, которых не так много, и сетка, которую целиком заменяет флексбокс, и это ещё мы не рассматриваем случай с макетом не по сетке. Стили каких-то готовых компонентов всё равно по большей части придётся переписывать согласно дизайну. Кстати, новички не всегда знают о том, что из Bootstrap можно взять только необходимые модули — например, только сетку. А если и знают, не всегда хотят заморачиваться с этим. В итоге в проекте используется только сетка, а подключается весь Bootstrap с кучей ненужных зависимостей вроде иконочных шрифтов и jQuery-плагинов. Неиспользуемый код — это плохо: он является потенциальным источником проблем и багов в будущем, это лишние килобайты, которые приходится загружать посетителям вашего сайта. И не нужно мне говорить, что в 21 веке смешно беспокоиться о каких-то там килобайтах — это вы сидите за компьютером с широкополосным доступом в Интернет, а кто-то пользуется 3G-модемом или бесплатным вайфаем в отеле.

Обращаюсь к автору, а что мешает вам даже в Enterprise проекте переконфигурировать Bootstrap, ведь вы выше говорили что мы работем с предпроцессорами. Bootstrap можно сконфигурировать под свои нужды и цели. Хотите только сетку и только инпут группы, пожалуйста, достаточно лишь закоментировать пару строк в _bootstrap.sass конфиге. И модуль не будет компилироватся в ваш .css.

Далее лишние килобайты .gzip x20, CDN ?

Автар пользователя
vyakymenko

И это не полный список того какие чудеса можно сделать, к примеру можно сделать Dynamic CSS и динамический подгружать CSS в каждый компонент и дело не в Bootstrap (Ярким примером тому есть @Angular(Angular2)).

Автар пользователя
sherkhan

@stas-webdev не использовать препроцессоры сродни не использовать бензопилы при валке леса

Автар пользователя
stas-webdev

@sherkhan, используя вашу аналогию - не обязательно заводить бензопилу если тебе нужны только жерди для забора, а не бревна на сруб. Можно и ручной обойтись :)

Автар пользователя
Globik

@Tertiumnon пишет: Новички используют и будут использовать наиболее простые инструменты для решения своих задач.

Ложь. Я как новичок пользуюсь чистым яваскриптом, каскадными стилями и хтмл. А все эти бутстрапы, ангулярисы, реактивы, полимеры, джиквери и плагины только раздражают. Не пользуюсь препроцессорами. Написано ж в статье, что не у всех широкополосный быстрый интернет. Иной раз заходишь на чей-нибудь простенький сайтоблог, думаешь, а чо это страница так долго загружается? Чуть ли не вечность. Глядь в разметку, а там, в хэде столько скриптов подключаемых нашпиговано, что мама дорогая. За сотню с лишним. Ну и куда это всё? Ну ладно там, если одностраничное приложение, какой нибудь админ-дашборд с кучей функционала и анимашками, тогда понятно присутствие ста скриптов. Разработчик, типа, старается, чтоб всё кроссбраузерно было. Но когда простеньки сайты грузятся вечность, это уже выше моего понимания, хотя догадываюсь в чем дело.

Автар пользователя
Tertiumnon

Что-то вы не смахиваете на новичка... Или у нас разные представления о новичках. Для меня новичок - тот, кто только что пришёл в веб и видит, что jquery выглядит зачастую лаконичнее и понятнее, чем тот же код в чистом js. К тому же, готовых, работающих плагинов к jquery не сосчитать. Согласитесь, проще подключить плагин, чем писать что-то самому - по тому же принципу работают коробочные CMS. Новичок не будет заботиться об оптимизации и считать милисекунды загрузки страницы, потому что это не его уровень. Его уровень - это скачать и прикрутить.

В защиту препроцессоров скажу следующее, что нужно уметь их готовить. Уже давно выдумали nodejs-минификаторы, которые превратят less/sass в минифицированный и правильный css. В большинстве случаев, этого хватает для комфортной и быстрой работы.

Автар пользователя
SomeAndyLom

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

Меня самого коребит тот факт, что они отжирают скорость загрузки сайта, но решений лучше пока не найти.

Автар пользователя
Globik

В сем вся и суть, что ради скорости разработки и комфорта весь этот фреймворк. Ну, ладно, что уж теперь. Ну и да, коробочные cms сплошь и рядом из джиквери и бутстрапа, как минимум. Как новичок лезешь под капот, а там черт ли что. Хочется свой дизайн оформить для какой-нибудь спецзадачи, а тут нате вам бутстрат с кучей вложенных друг в друга дивок(о какой там хтмл5 семантике может, вообще, идти речь?). Плюс многокилометровые классы, многосоставные, к дивкам. В глазах рябит - жуть. Ну, таки да насчет скорости загрузки, ясно, что не только от количества скриптов в заголовке оное зависит.

Еще одна практика в веб-разработке это стили в один файл пихать. Нужно отказываться от такой практики. Стили попроще и к месту нужно применять. А не так, что один стиль на все уголки сайта. Одним файлом. upd. Не ставлю себе целью стать профессиональным разработчиком сайтов и работать на заказ.

Автар пользователя
zell0

т.е. если использовать только сетку Bootstrap, то БЭМ нормально вписывается в это?

Автар пользователя
andrew--r

Обращаюсь к автору, а что мешает вам даже в Enterprise проекте переконфигурировать Bootstrap, ведь вы выше говорили что мы работем с предпроцессорами. Bootstrap можно сконфигурировать под свои нужды и цели. Хотите только сетку и только инпут группы, пожалуйста, достаточно лишь закоментировать пару строк в _bootstrap.sass конфиге. И модуль не будет компилироватся в ваш .css.

Далее лишние килобайты .gzip x20, CDN ?

Мне ничего не мешает переконфигурировать его. Просто у меня нет в этом нужды :)

Есть много способов избавиться от неиспользуемого в проекте кода, но новички обычно о них не знают (или препочитают не заморачиваться).

Автар пользователя
andrew--r

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

Меня самого коребит тот факт, что они отжирают скорость загрузки сайта, но решений лучше пока не найти.

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

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

Автар пользователя
andrew--r

Еще одна практика в веб-разработке это стили в один файл пихать. Нужно отказываться от такой практики. Стили попроще и к месту нужно применять. А не так, что один стиль на все уголки сайта. Одним файлом. upd. Не ставлю себе целью стать профессиональным разработчиком сайтов и работать на заказ.

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

Если вы разрабатываете что-то поменьше Фейсбука, вполне нормально класть все стили в один файл и подключать только его.

Автар пользователя
andrew--r

т.е. если использовать только сетку Bootstrap, то БЭМ нормально вписывается в это?

Сам Бутстрап не следует соглашению по именованию классов из БЭМа, но ничего не мешает использовать его сетку. Проблема лишь в том, что тогда разметка будет несколько неконсистентно выглядеть — классы бутстрапа вперемешку с БЭМ-классами могут ввести в заблуждение.

Автар пользователя
artuska

Автор статьи объективно прав, это так и никак иначе. Если кто-то не согласен с этой статьей, то он не прав.

Про жиКвери не буду писать, уже несколько лет не использую за ненадобностью. А вот с Бутстрапом столкнулся на текущем проекте и вижу, какой это вселенский ужас.

Понимаете, Бутстрап это удел быдло-программистов — обычно это пехапешники, которые начали заниматься фронтендом. Вот смотрите, какой менталитет у пехапешников, которые пишут бэкенд-код — «так, есть задача → надо её решить → а есть ли уже готовый модульчик или плагинчик или компонентик? → опа! есть! → композер инсталл → нормально, работает!». И вот с таким менталитетом и логикой они приходят во фронтенд-мир и тоже начинают искать что-то готовое, готовые плагинчики и модульчики, на любой пук они ищут готовые плагинчики, плагинчики, плагинчики. «Посмотри, есть ли уже готовый плагинчик для этого», «Заюзай плагинчик, вот ссылка» — вот типичный ход мыслей пехапешника-фронтендера. Они совершенно не соображают, что нельзя во фронтенде подключать кучу килобайтов плагинчиков на каждый пук. Они не соображают, что любые плагинчики не дают тебе свободы сделать шаг влево шаг вправо. Главное, что работает же!

Вот так же и с Бутстрапом — он для быдлокодеров как святой грааль, в котором уже всё готово и всёжиработает!!1 Они не понимают, что эта махина была создана для прототипирования страничек, а не для реальной верстки рабочих проектов. Они не понимают, что верстка флоатами left это плохо. Они вообще не понимают вёрстку, стили, CSS-методологии, каскад и прочее. Для них просто есть плагинчик, который сделает их сайт :)

В общем, из-за дилетантства горе-фуллстекеров мы имеем кучу говносайтов — смотришь в код... тадааам, всё ясно, написано на Бутстрапе.

Бутстрап это индикатор быдлокодного сайта.

Автар пользователя
Globik

Согласен с @artuska В заголовках, то есть в хэде иной раз можно увидеть всю братию от бутстрапа. То бишь сам бутстрап.js, далее какой-нибудь вспомогательный суб-бутстрап.js, джиквери(агась), спец-джиквери-под-бутстрап.js, джиквери-бутстрап-фото-карусель.js, джиквери-виджет-а-ля-кнопка-отправить-с-css-эффектом-бабочки.js - ну, и далее по html-cписку. Причем к той самой кнопке при желании еще несколько скриптов и фреймворкобиблиотек до кучи. Ага, полимер.js ... А так как бабочка в опера-мини никак не полетит, нужно не забыть еще модернайзер.js подцепить и полифилл.

Автар пользователя
vyakymenko

Понимаете, Бутстрап это удел быдло-программистов — обычно это пехапешники, которые начали заниматься фронтендом. Вот смотрите, какой менталитет у пехапешников, которые пишут бэкенд-код — «так, есть задача → надо её решить → а есть ли уже готовый модульчик или плагинчик или компонентик? → опа! есть! → композер инсталл → нормально, работает!». И вот с таким менталитетом и логикой они приходят во фронтенд-мир и тоже начинают искать что-то готовое, готовые плагинчики и модульчики, на любой пук они ищут готовые плагинчики, плагинчики, плагинчики. «Посмотри, есть ли уже готовый плагинчик для этого», «Заюзай плагинчик, вот ссылка» — вот типичный ход мыслей пехапешника-фронтендера. Они совершенно не соображают, что нельзя во фронтенде подключать кучу килобайтов плагинчиков на каждый пук. Они не соображают, что любые плагинчики не дают тебе свободы сделать шаг влево шаг вправо. Главное, что работает же!

А теперь давайте подумаем, на основании вашего коментария про Front-End разработчик... Вы что то сказали про композер? Ну окей, если Вы уважающий себя разработчик то как же npm. Допустим ваш Enterprise-Галера проект юзает Gulp/Grunt. Окей давайте по минимуму его сконфигурируем npm i gulp gulp-sass(gulp-less) gulp-jade(может вы пользуетесь) и многие другие нужные модули для вашего проекта ( не в этом суть) --save-dev ( конечно мы крутые перцы npm init все дела что бы засейвить дев депенденси :) ) , а теперь к чему я это все веду. Вы взяли качнули модуля которые сделали какие то разработчик, более того я даже процентов на 75+ уверен что вы даже не смотрели а что они делают, а билдят ли бинарники и делают ли какие то shell операции, Вы просто запускаете все это чудо и будь что будет. Соответственно мой конклюжен ведется к тому что это не корректно по отношению к другим разработчикам, которих Вы так ярко описали в вашем комментарии..

Вот так же и с Бутстрапом — он для быдлокодеров как святой грааль, в котором уже всё готово и всёжиработает!!1 Они не понимают, что эта махина была создана для прототипирования страничек, а не для реальной верстки рабочих проектов. Они не понимают, что верстка флоатами left это плохо. Они вообще не понимают вёрстку, стили, CSS-методологии, каскад и прочее. Для них просто есть плагинчик, который сделает их сайт :)

Тут я с вами не согласен, есть множество примеров в которых правильное использование бустрапа показывает ошеломительные результаты для быстрой верстки интересных Web App's. По поводу CSS методологии, Вы о чем говорите? Методологию можно посмотреть лишь в исходниках .less/.sass кому что по душе. И там исользуется методология "Коктейль Хьюго", более того посмотрите на исходники к примеру font-awesome ( любителям тролить это пример, не надо рассуждать что пример настолько плох ) он использует ту же методологи. Приведите Ваши аргументы подкрепленный фактами почему эта методология плоха или может у вас есть резуьтаты "Квадранта Гартнера" по этой методологии что бы все посмотрели.

В общем, из-за дилетантства горе-фуллстекеров мы имеем кучу говносайтов — смотришь в код... тадааам, всё ясно, написано на Бутстрапе.

Бутстрап это индикатор быдлокодного сайта.

Это лишь ваше личное мнение и не более... В котором нету ниодного аргумента и факта.

Автар пользователя
Globik

Ну а как же. Часто приходится иной раз под капот какого-нибудь npm модуля лезть. Благо новичок в этом деле - временем располагаю. Посмотреть, а че это под виндоуз аддон никак не собирается? Аааа, так и есть. Линукс прежде всего. Ищешь другой модуль. Не находишь, кодишь сам, глядя на образец и допиливая под свои нужды. А сам бутстрап только с толку сбивает и всё. Агась, быстрое прототипирование. Проще хтмл и стили подучить и попрактиковать, чем монстра какого-то юзать. Ну, это я так, поворчать. На самом деле понятно, что юзают бутстрап скорее под заказ. Для быстроты разработки и на стол заказчику. Нате, распишитесь.

Автар пользователя
artuska

@vyakymenko, вы абсолютно всеобъемлюще путаете composer-плагинчики и Grunt/Gulp-таск раннеры с npm-пакетами для этих тасков — это две разные вещи. Я же говорил про плагинчики а-ля «джиквери-виджет-а-ля-кнопка-отправить-с-css-эффектом-бабочки.js», как уже красноречиво выразился юзернейм выше.

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

«использование бустрапа показывает ошеломительные результаты для быстрой верстки интересных Web App's» — серьезно? Использование бутстрапа показывает лишь некомпетентность во вронтенде того пехапешника, которому сказали делать фронтенд.

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

Автар пользователя
stas-webdev

Господа, по-моему дело скатывается в холивар а ля "похапе г*но, асемблир рулезз", который, в сущности, не отличается от совсем уж детского "рэп кал, мятал форева" :) Давайте не забывать, что мы, как профессионалы, прежде всего, работаем в интересах бизнеса. И если бизнесу нужны 5 однотипных лендигов в день, то почему бы не использовать связку Bootstrap + тот же Wordpress на PHP. А если бизнес строится на разработке и поддержке одного супер-пупер сложного SPA, с кучей требований по лицензированию и поддержке кода, то можно задуматься и о методологии БЭМ, и о React и даже о выборе между пробелами и табуляциями. Профессионализм разработчика заключается, в том числе, в выборе подходящего инструмента для оптимального, по времени разработки и трудозатратам на поддержание, решения. Не забывайте об этом и будет вам счастье :)

Автар пользователя
vyakymenko

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

@artuska Я здесть больше соглашусь с @stas-webdev который подчеркнул:

И если бизнесу нужны 5 однотипных лендигов в день, то почему бы не использовать связку Bootstrap + тот же Wordpress на PHP. А если бизнес строится на разработке и поддержке одного супер-пупер сложного SPA, с кучей требований по лицензированию и поддержке кода, то можно задуматься и о методологии БЭМ, и о React и даже о выборе между пробелами и табуляциями.

@artuska И опять таки, Вы сказали бутсрат это говно и это плохо но вы не привели ни единого аргумента.

@artuska По поводу плагинчиков, теперь я понял о чём Вы говорите вначале не вьехал.

Автар пользователя
artuska

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

Автар пользователя
artuska

Вот еще ссылочку подкинули в dev-ua-гиттере: https://gist.github.com/iAdramelk/d328b73c72cab92ef95f

Автар пользователя
vyakymenko

@artuska ну и вот вам пример, работал с похожего вида проектом из статьи которую Вы порекомендовали https://gist.github.com/iAdramelk/d328b73c72cab92ef95f:

Когда Boostrap можно использовать

Чтобы не отстрелить себе ногу Bootstrap'ом и получить от него пользу нужно чтобы проект соответствовал ряду требований: 1. На проекте много страниц. 2. Страницы собираются из простых базовых элементов. Базовый – это кнопка или таблица. Сложный – это пост в фейсбуке или комментарий к нему, они состоят из нескольких тегов и их нужно переносить и реиспользовать все вместе. 3. Нет мест, где изменение и эксперименты с дизайном могут сильно повышать/понижать конверсию или другие важные метрики. Как корзина или страница товара в интернет магазине. 4. Никогда не будет глобального редизайна. 5. Типизация страниц окупается скоростью их внедрения.

Автар пользователя
vyakymenko

@artuska соотвественно мы вернулись к исходной точке, где все опять таки зависит от задачи/требований и от разработчка(ов) которые над этим работают, а так же их умение этим пользоватся.

Автар пользователя
Hooter

Перефразируя знаменитую фразу скажу: "Вам не нравится Bootsrap? может Вы не умеете его готовить?" Для примера открываем: https://themes.getbootstrap.com/products/dashboard смотрим код, и удивляемся, а где привычные классы bootstrap? А нет их там. Bootsrap это всегда набор миксинов, изначально на Less, сейчас на SASS, и как пример использования оных представляется готовый набор, который прекрасно подходит для прототипирования, да еще и конфигурируется в широких пределах.

Автар пользователя
Globik

@Hooter ну как нету-то? Есть. Все атрибуты бутстрапа. И джиквери, и бутстрап.js и дивки не семантические и многокилометровые классы. Это что? Что за параша:

div class="col-md-12 text-center" А это: div class="popup text-muted visible-md-inline-block visible-lg-inline-block ?? А это что за дерьмо: -ms-flex-align:center? Если уж пользоваться флекс-боксами, то никак не старыми префиксными "стандартами". Поломают дизайн и всего лишь. У меня вот андроид браузер 4.3 и половины стандарта флекса не понимает. Хоть ты там до посинения префиксов понаставь. Я к тому, что строго индивидуально к теме нужно подходить, а не слепо тянуть тонну зависимостей на "все случаи жизни". Которые отнюдь не в пользу.

Гы, и ведь не поленился с андроид браузера версии 4.3 зайти. Косяк всего один, но реально бесит. Когда в режиме портрет пальчиком скролишь страницу либо вверх, либо вниз, вся это братия с надписями поверх кругляшек-диаграмм начинают дергаться туды-сюды и на изображение наезжать. Типичный косяк бутстрапа вообще и яваскриптовых "решений" в частности. Когда скрипт пытается в процессе скролла "динамически" нормализовать положения надписей и прочего контента. Е**ал я в рот такую динамику. Чо, мля, глаза тоже в такт дрыганьям страницы должны плясать? И вся эта тема страничная у меня на планшете за 13 сек загрузилась. Гы, фейсбук за пару сек загружается. upd. Дык а с опера-мини, вообще, тихий ужас. Блоки отображаются "нормально", но в секции quick stats графики не отрисовываются. Нужно под оперу-мини текстовую статистику рендерить. Это раз. А второе, рекламный блок с предложением купить тему ровно посередке странице торчит прям перед взором. Мешает. Куевая практика. Для опероидов мобайл прячь все окошки. Или отрисовывай в нормальный блок. Короче, бутстрап гавно. Я не знаю, че все пытаются подсесть на него. То, что бутстрап можно и нужно широко конфигурировать . Это фигня. Мало конфигурировать. Нужно вникать полностью, без бутстрапа. @vyakymenko ну вот от скорости внедрения и получаются говносайты. С попап окошками кривыми и дрыгающимся контентом по странице.

Автар пользователя
vyushin

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

Автар пользователя
SergeyNekrasoff

Спасибо за статью. От себя хочу добавить, что рациональное использование популярных библиотек, фреймворков о которых пишут в статье это всё сугубо индивидуально, и если ты не умеешь их готовить - это твоя проблема, обычно у таких инклюдится туева хуча плагинов(некоторые из которых весят по 40кб), нужно этого избегать, но я не призываю писать всё на чистом js.

Автар пользователя
keslo

Чего вы, профи, дое*бались-то до JQ и BS? Оба эти инструменты использует просто туева хуча разработчиков во всем мире. Или вы будете травить байку про миллионы лемингов?

Автар пользователя
iamstarkov

@keslo уверен, что очень мало разработчиков тянут jquery в новые проекты

Автар пользователя
Globik

@keslo ну и пусть дальше используют, если им нравится. Лично мне не нравится с планшета делать заходы на сайты, состряпанные на бутстрапе. Мордокнига и то быстрее грузится, чем бс сайт.

Автар пользователя
Globik

Я хрен знает, как в бутстраповские div'ки schema.org встраивать. А многосоставные и многокилометровые названия классов эт вообще феерический звездец.

Автар пользователя
Globik

Кстати, что пхпшники, что фронтендчики на яваскрипте - как муж и жена одна сатана. Кучу плагинов и инклюдов - всё в одно лыко. И на все случаи жизни. А как, собственно, код самих плагинов работает, покую. Тормозит ли, не тормозит ли процесс...

Автар пользователя
keslo

@Globik как по мне, то посыл автора в том, что библиотеки/фреймворка и т.п. приходят и уходят, поэтому необходимо осваивать основы. А JQ и BS взяты как наиболее популярные библиотеки в сети.

Автар пользователя
Theea

Я правильно понял - если уже года 2-3 писал на чистом htlm, css, sass, если учил что такое резиновая верстка и медиазапросы и даже вручную заадаптивил пару сайтов, то в том, чтобы использовать ТОЛЬКО ЛИШЬ бутстраповскую стеку нет ничего страшного? (О том, чтобы брать весь бутстпрап не может быть и речи, всякие аккордеоны и табы лучше самому сделать) Ну а с js сложнее... Я когда его учил, прочитал несколько раз учебник Кантора, смотрел специалиста, в конце концов написал пару велосипедов, да только сейчас использую jquery :)

Автар пользователя
alexanderisora

Все правильно, автор молодцом! Но не соглашусь с местом jquery в буднях новичка-фрондентере. Для начинающего важно получить результат, чтобы увериться в своих силах, воспрять духом и, самое главное, уложиться таки в дедлайн (если речь об уже получающем задачи кодере). jquery с его 1000000 ответами на STO и 10000001 плагином для ВСЕГО позволяет проще и быстрее добиться этого и двигаться дальше. Важно только, чтобы рядом был более опытный ментор, который в нужный момент положит на клаву лапу и промурлыкает "it's time to stop jquerying" и укажет нужный путь.

Автар пользователя
Globik

Гы, а без джиквери новичку, значит, не судьба первого результата добиться? Лан раньше ие мутное было, а счас-то чего? Кодь и радуйся в любимом браузере. Я вот как новичок не с первого раза вкурил, что такое знак доллара. Проще полностью переменную из дома взять и работать с нею автономно. Без мегатонны джиквери плагинов плюс бутстрапы там всякие. С толку как раз меня как новичка сбивают. Да кули там плагины? Не в плагинах счастие.

Автар пользователя
botyaslonim

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

Bootstrap совершенно не мешает делать сложный дизайн. Его стили легко переопределяются. Всё, что делает bootstrap, можно (а хорошему фронтендеру и нужно уметь) делать самому, но опять же, в массовой разработке это только дополнительный риск исполнителя и лишнее время, затраченное на правильное соблюдение всяких media-queries.

В целом, считаю, оба инструмента нужно знать и уметь использовать при необходимости.

Автар пользователя
harmerok

Что это за бред. Такое ощущение, что ТС сам вчера улышал про js

Автар пользователя
Globik

Бред впихивать бутстрап на любой сайт. С мобилы зайди на такой сайт и вкуришь о чем речь. То контент дрыгается, то страница тормозит. Хуль далеко ходить, зайди на mybeeline.ru и прочувствуй, какого это. Да ладно там тормозит и контент скачет. Еще и медленно все грузится. Совсем не юзабельно и отнюдь не мобайл фрэндли. На вскидку еще парочка сайтов, на которые обязательно с мобилы зайти и прочувствовать. Цэ livejournal.com и 20min.ch

Автар пользователя
harmerok

Globik, не позорься. Если ты нагуглил frontender и смог зарегистрироваться на гитхабе, это не значит что ты стал хотя бы верстальщиком. А про то, что ты написал про mybeeline.ru - просто под столом. лол

Автар пользователя
Globik

А причем тут позорься?

Автар пользователя
Globik

@harmerok ты сам не позорься и сходи с мобилы сюда http://m.20min.ch и убедись какую хуету представляет из себя бутстрап и ко и спа.

Автар пользователя
Kadarlatino

Отличная статья! Все правда! Попалась бы она мне лет так 8 назад ))) А то у меня сейчас реальная проблема - мне как попался jQuery на глаза в далеком 2008-м - так я на него подсел и слезть не могу ((( еще и проекты с которыми работает команда по умолчанию юзают jquery (( Теперь вот мучаюсь, так как еще года 3 назад без знания vanila js тебя еще считали фронтендером, то сегодня уже все - назад в верстальщики (хотя на западе такого разделения нет - там по умолчанию все - front-end developers).

Автар пользователя
alvinwhite

На самом деле бутстрап можно использовать и с БЭМ-ом, посредством использования @extend, вес итогового файла при этом будет определятся тем, сколько компонентов bootstrap мы импортировали в наш .scss/.sass/.less. Сами классы бутстрапа можно при этом вообще не использовать.