О 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 — это обычные инструменты, неплохо решающие свои задачи. Если вы новичок, в первую очередь изучайте фундаментальные вещи, и только после этого знакомьтесь с инструментами. Ну и каждый инструмент используйте по его предназначению. Иначе однажды вы обнаружите себя, пытающегося пожарить яичницу огнемётом.

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