Верстальщиков больше не осталось – только фронтенд-инженеры. Первая страница простенького сайта весит как полный архив ленинской библиотеки. Технологии создания такой странички могут поставить в тупик даже Анатолия Вассермана.

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

Во-вторых, стандартом считается поголовное применение различных препроцессоров и шаблонизаторов. Например, CSS вам наверняка посоветуют верстать с помощью препроцессоров LESS или SASS, поскольку они «открывают дополнительные возможности». Для HTML порекомендуют подключить шаблонизатор Pug. Особо продвинутые товарищи ещё и предложат использовать JSX вместо того, чтобы писать на простом HTML.

В-третьих, для корректного подключения фреймворков, препроцессоров и постпроцессоров придётся подключить кучу рабочего окружения. Для начала это будет пакетный менеджер NPM. Для продолжения, системы контроля задач Gulp или Webpack. А они которые сами по себе настраиваются достаточно нетривиально. Потом вам понадобится транспиллер Babel или ему подобный, чтобы обеспечить совместимость современного кода со старыми браузерами. Потом окажется, что нужны ещё и инструменты вроде Browserify для того, чтобы разные куски JavaScript кода начали понимать друг друга. Потом минификаторы, чтобы хоть немного ускорить неподъёмный код. Потом окажется что вам как воздух нужен какой-нибудь SystemJS или Flow…

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

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

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

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

Вот что выдаёт мой любимый w3techs.com по разделу JavaScript libraries.

Распространение библиотек и фреймворков JavaScript (2011-2019 гг)

Что же, давайте смотреть и делать выводы.

1 Устаревший и никому уже не нужный «дельфинчик» плавает на 74.2% всех сайтов в мире! При этом не только не сдаёт позиции, но ещё и продолжает свой рост. Причины очевидны – кроссбраузерность, простой и удобный механизм ajax-запросов, быстрое освоение, компактность, простота в установке и работе. Достаточно просто скачать либо подключить из CDN и можно разрабатывать, не проходя никакие дополнительные круги ада.

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

3 Бронза у библиотеки Modernizr, которая стоит на 11% всех сайтов. Применяется для кроссбраузерности. При подключении формируется скрипт, который дописывает к тегам HTML список используемых и неиспользуемых тегов для дальнейшей работы. Подробнее про эту полезную библиотеку можно почитать, например, здесь.

4 Библиотека Underscore – содержит «синтаксический сахарок» для работы с коллекциями и массивами. Опенсорсный проект с открытым кодом и хорошей документацией на русском языке. Рекомендуется если вы пишите сложную логику и хотите расширить стандартный функционал языка. Подробности здесь.

5 MooTools небольшая библиотека, также созданная для достижения кроссбраузерности. В рунете иногда попадаются забавные статьи, вроде того «Как MooTools заборол jQuery». Но кто кого заборол на самом деле – хорошо видно на трендах.

6 Moment.js – лёгкая библиотека для работы с датами. Подробнее здесь.

7 ASP.NET Ajax – библиотека для разработчиков на ASP.NET. Учитывая трудные времена, которые испытывает C# в области веб-разработки, и этот дочерний проект находится на вполне объяснимом спаде популярности.

8 Далее идут аутсайдеры рынка, не набравшие 1%. Среди них, к сожалению, видим React, Angular и Vue.js. Доли процентов такие, что пока делать выводы о какой-то динамике не приходится.

Таким образом, в современном фронтенде существует много интересных и перспективных технологий. Однако практика существенно корректирует теоретические выкладки. Многим модным разработкам ещё предстоит побороться за место под солнцем. В то же время есть простые и удачные технологии, которые это место завоевали и очень долго будут применяться в реальной практике.

jQuery и Bootstrap можно сравнить с автоматом «Калашникова» в мире веб-разработки. Простое и безотказное оружие, которыми не принято особо хвастаться, но в бою оно не подведёт.

Эта статья – третья в цикле обзора современных тенденций веб-разработки. Здесь можно прочесть о популярных CMS, а здесь – о серверных языках программирования.