Релиз Bootstrap 4 Beta

16 августа 2017г.  ui     релиз беты     bootstrap4     ui system   


Скромно и без лишнего шума состоялся релиз beta-версии популярной UI-системы Bootstrap 4. Для меня релиз не был каким-то совсем уж долгожданным, благо всяческих конкурентов сейчас хватает. Но нельзя отрицать тот факт, что Bootstrap вдохновлял многих из них. Поэтому, давайте посмотрим, что изменилось со времен третей версии.


Статья написана по мотивам официального анонса и по моим собственным наблюдениям. Начну с перечисления плюсов.

Переезд с LESS на SASS/SCSS

Не буду утверждать, что данный переезд это какое-то очевидное преимущество перед другими системами. Но лично мне этого точно давно не хватало, так как в своих проектах я использую SASS. Во многом еще из-за того, что его из коробки поддерживает Angular CLI. И было немного неудобно собирать bootstrap отдельно. Еще, разработчики Bootstrap пишут, что компиляция благодаря Libsass стала быстрее, что наверное тоже правда, хотя и вряд ли сильно критично.

Улучшенная система сеток

Большим, хотя и не сразу заметным изменениям подверглась система сеток:

  • Теперь ячейки сетки это не тупо float-блоки, а вполне себе современные flexbox-ы. Да, обладатели браузеров древнее IE10 будут не в восторге, да ну и черт с ними, это уже давно не смешно. Благодаря flex-ам теперь будет довольно просто выравнивать все и вся по нужным направлениям, менять порядок блоков, адаптивно подгонять размеры произвольных ячеек и т.д. Одни сплошные плюсы.
  • Добавились новые размеры ячеек сетки. К привычным xs/md/sm/lg добавились еще размеры для экранов менее 576px и более 1200px (xl)
  • Если вам не хватает сеток (например, что деление осталось по прежнему на 12 колонок), то загляните в раздел Utilities / Flex, там вы найдете кучу полезнейших классов, чтобы реализовать сетку своей мечты.

Новые компоненты

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

Normalize.css вынесен отдельно

Разработчики сделали форк своего Normalize.css в отдельный sass-модуль, который вы можете использовать у себя, даже если не собираетесь подключать весь Boostrap 4 целиком. Не то чтобы какое-то большое достижение, но все равно приятно.

Убрана поддержка устаревших браузеров

Boostrap 4 Beta не поддерживает браузеры древнее IE10, а также древнее Safari 9. Это хорошо, так как поддержка старья раздувает проекты всякими хаками и прочими костылями, чтобы пара процентов пользователей со всего мира смогла бы насладиться красотой современного веба. Если вам все же очень нужно, чтобы все работало под IE8/9 и Safari 8, то разработчики предлагают остаться на Bootstrap 3.

Рефакторинг js-кода

Хорошая новость: были переписаны все js-модули практически с нуля, с учетом новых веяний и наборов стилей. Плохая новость: вам все еще нужен jQuery, чтобы все это работало (но теперь хотя бы можно подключить jQuery.slim@^3)

Куча новых утилит в разделе утилит

Множество новых полезных классов (про flex, например, я уже писал выше), не буду перечислять их все, тут как раз тот случай, когда лучше один раз самому увидеть. Будет полезно не для каждого проекта и местами будет даже слегка избыточно, но все же часто полезно иметь уже готовые классы, не конфликтующие с остальными, чем писать свои.

Иконография

Выпилили скудный glyphicons, теперь по-умолчанию никаких иконок нигде не будет. Что тоже хорошо, а то в третей версии приходилось их выпиливать вручную. Тут предлагают небольшой список альтернативных вариантов. Немного удивлен отсутствию font-awesome в списке, вероятно, по каким-то причинам не смогли договориться. А вы сами выбирайте, что нравится вам больше.


К сожалению, не обошлось и без минусов. 

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

Другой минус, необходимость других библиотек, вроде jquery, для своих компонентов. Вот ни за что не поверю, что нельзя было написать их лаконично и кроссбраузерно без использования последнего. Все же не с поддержкой IE6/7 создается проект. Я уж даже не упоминаю про создание готовых angular- или react-компонентов. Да, сообщество со временем напишет их своими силами, но это все же не то же самое, что официальная поддержка.


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