От автора: ваш опыт разработки более двух лет? В ваши продвинутые навыки CSS входит Sass и Autoprefixer? Вы хорошо знаете JS и используете Gulp, npm и jQuery? Если да, то по статье Эшли Нолан (опрос по front-end инструментам) вы типичный разработчик.
Ложь, статистика и опросы
Такие опросы полезны для поиска новых инструментов и восполнения очевидных пробелов в знаниях. На момент написания статьи опрошено 5 254 человека, что намного больше, чем в большинстве опросов. Но не стоит воспринимать все за чистую монету…
Мировые результаты
Опрос проводился по всему миру, но опирался в основном на англоговорящие страны. Некоторые популярные инструменты могут не упоминаться.
Знания разработчиков
Опрос был ориентирован на знающих разработчиков, понимающих, что у них спрашивают, которые знали про него, а также у которых было время и интерес пройти его.
83% опрошенных имеют опыт front-end разработки два и более года, 5% менее года.
Разработчики с минимальными навыками front-end, скорее всего, не закончили опрос. Результаты могут быть немного перекошены.
Мнения и убеждения
Опрошенных просили оценить их опыт. Некоторые были скромны и страдали от синдрома самозванца. Другие переоценивали свои технические умения, так как были единственными front-end разработчиками в большой команде новичков программистов. Самоуверенные убеждения могут усредняться, но этого никак не докажешь.
Прошлое не связано с будущими трендами
Результаты показывают, что разработчики использовали раньше. Это не значит, что это полезные инструменты, которые экономят время или которые будут использоваться в будущих проектах.
CSS
63% разработчиков оценили свои навыки CSS на уровне продвинутых и экспертов.
CSS довольно сложно освоить, несмотря на то, что это просто коллекция пар свойств и значений. CSS3 представил множество новых эффектов, и очень сложно освоить все. Например, я почти ничего не знаю о новом модуле CSS Grid, а для создания Flexbox макетов часто пользуюсь Force (или методом проб и ошибок)!
10% тех, кто отметил опыт менее года, заявляют, что имеют продвинутые знания в CSS! Думаю, скоро они поймут, что чем больше они узнают, тем больше они понимают, что ничего не знают!
CSS препроцессоры
Более 63% используют Sass – бесспорный чемпион среди препроцессоров. 8% работают с PostCSS, хотя он часто используется в паре с другими препроцессорами для получения полезных функций. Например, с Autoprefixer (65% разработчиков используют его).
Почти 14% не используют препроцессоры и предпочитают работать с обычным CSS кодом. Процент довольно низкий, если считать, что это самый легкий и лучший способ научиться front-end разработке. Среднестатистический сайт делает 7.2 запроса на CSS файлы. Я думаю, запросов было бы меньше, если бы 86% разработчиков использовали препроцессоры.
Почти 70% опрошенных пробовали работать с Less и 19% со Stylus.
Схемы именования CSS
46% разработчиков используют схемы именования. Однако у тех, кто считает свои знания в CSS на уровне продвинутых и эксперта, процент вырос до 57%.
Самая популярная схема – БЭМ 40%, дальше следует CSS Modules 16%, OOCSS 15% и SMACSS 13%.
Другие CSS инструменты
39% используют Modernizr в текущих проектах. Немного удивительно, ведь эта библиотека нужна в основном для старых версий IE, от которых уже почти отказались. (Microsoft прекратили поддержку IE10 и ниже в январе 2016)
14% используют Stylelint для валидации CSS. Результат довольно низкий. Хотя самые популярные IDE и редакторы используют CSS проверку, т.е. она, в принципе, не обязательна.
23% разработчиков вообще не используют CSS инструменты и методологии именования.
JavaScript
Если вы думали, что CSS инструменты слишком сложные, добро пожаловать в изумительный мир JS! Результаты более скромные, 51% людей оценили свои JS знания на уровне продвинутых и эксперт.
Несмотря на релевантность вопроса, более 99% разработчиков использовали jQuery в какой-то промежуток времени, а 31% считают эту библиотеку необходимой для большинства проектов. 70% до сих пор используют библиотеку в текущих проектах, что похоже на результаты W3Techs:
С фреймворкаи все намного запутаннее:
React используется в 38% текущих проектов. Хотя 29% разработчиков неудобно работать с этим фреймворком, а 18% считают его обязательным. Менее 0.1% сайтов было просмотрено с помощью React, но не забывайте, что опрос проводился с front-end разработчиками, а не всеми веб-разработчиками.
Angular 1 используется в 25% проектов, хотя только 8% считают фреймворк необходимым. Переход на Angular 2 был относительно спокойным и добавил еще 8%. Для большинства проектов данный фреймворк использует только 3%.
Vue.js используется в 10% проектов. Менее 6% нравится данный фреймворк, 3% считают его обязательным.
На следующий год, возможно, будет актуален вопрос «вы когда-нибудь бросали один фреймворк или переключались на другой в рамках одного проекта?».
Несмотря на большое количество JS экспертов, только 21% считают фреймворки необязательными и любят писать на простом JS. Тревожная ли это статистика? Считают ли 30% разработчиков свои знания фреймворков единственными необходимыми?
Таск раннеры и сборщики модулей
Gulp – бесспорный победитель, им пользуются почти 44% разработчиков. Более простой npm scripts поднялся за 2016 с 23% до 26%.
Grunt упал до 12%. Кроме того, спад на 9% говорит о том, что 11% опрошенных предпочитают не использовать этот таск раннер.
Количество разработчиков, пользующихся сборщиками модулей выросло на 20% за 2016 год и составило 68%. Самый популярный – Webpack 31%, Browserify 11% и RequireJS 8%.
Меня удивило, что остальные сборщики модулей занимают лишь 4%, в то время как есть несколько плагинов таск раннеров для легкого управления зависимостями. Например, gulp-deporder. Возможно, это потому, что все используют JS транспилер…
Транспилеры ES6 на ES5
62% разработчиков используют инструменты типа Babel для компилирования ES6 кода в ES5 код под старые браузеры. 31% слышали о такой возможности, но не пользовались инструментами, а 7% не знали об этом.
Цифры удивительно большие. IE и старые приложения не поддерживают последний синтаксис JS. Но если вы пишите ES6 код, то зачем думать о старых браузерах? Если нужно поддерживать IE11 и ниже, не будет ли проще писать на ES5?
Другие JavaScript инструменты
41% разработчиков используют ESLint для валидации кода (пропущенные скобки, точки с запятой, плохие отступы и т.д.), 19% используют JSLint, 14% — JSHint.
23% опрошенных не используют инструменты валидации кода. Но они могут проверять код в текстовом редакторе или IDE.
Количество людей, пользующихся инструментами для тестирования выросло на 12% за год и составило 52%. Исторически так сложилось, что тестирование в JS довольно сложная штука. Техники типа разработки через тестирование (TDD) могут отлавливать логические проблемы, но не проблемы, связанные с асинхронными событиями. Например, когда UI делает что-то неожиданное в определенном браузере. К счастью, возможности разработки, основанной на функционировании (BDD), выросли настолько, что теперь можно проверять действия в реальном браузере, а front-end тестирование стало более практичным. Самые популярные системы:
Mocha – TDD/BDD (23%)
Jasmine – BDD (17%)
QUnit – TDD (4%)
Jest – TDD/BDD (3%)
Ava – TDD/BDD (2%)
И наконец, 94% разработчиков использовали npm – пакетный менеджер на Node.js. Неожиданно, но 32% также работали с TypeScript.
Что использовать в 2017?!
Говоря о CSS, знания Sass, PostCSS и БЭМ должны быть точно. Разнообразие в разработке очень большое. Предлагаю вам изучить несколько препроцессоров и схем именования, чтобы понять, на что способны эти инструменты, даже если вы решите отказаться от них.
С JS все мене ясно. Есть несколько точных победителей:
Node.js и npm должны быть обязательно, если вы будете использовать много инструментов.
Стоит попробовать Gulp и/или Webpack.
Изучите ES6, даже если работаете над ES5 проектами.
Не завидую тем, кто будет подбирать библиотеки и фреймворки под следующий проект. Чисто по результатам опроса jQuery – явный фаворит. После ухода IE кроссбраузерность jQuery играет небольшую роль, а множество функций дублируются в браузерных API и CSS.
Можете взять фреймворк React, потому что он популярный, но от этого он не подойдет под ваше приложение. Даже на смену React придет что-то лучшее, большее и более яркое.
Мой совет: учите основы HTML, CSS, JS и разработки в браузере, прежде чем хвататься за один из множества фреймворков, которые появляются каждый день. Эти знания нельзя переоценить ни мнением, ни инструментами, принятыми в JS сообществе. Может быть, вы даже напишите свою улучшенную систему и станете частью фреймворк веселья!
Благодарю Эшли Нолан за ее опрос по front-end инструментам и результаты.
Автор: Craig Buckler
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
