Тренды front-end инструментов в 2017

Тренды front-end инструментов в 2017

От автора: ваш опыт разработки более двух лет? В ваши продвинутые навыки CSS входит Sass и Autoprefixer? Вы хорошо знаете JS и используете Gulp, npm и jQuery? Если да, то по статье Эшли Нолан (опрос по front-end инструментам) вы типичный разработчик.

Ложь, статистика и опросы

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

Мировые результаты

Опрос проводился по всему миру, но опирался в основном на англоговорящие страны. Некоторые популярные инструменты могут не упоминаться.

Знания разработчиков

Опрос был ориентирован на знающих разработчиков, понимающих, что у них спрашивают, которые знали про него, а также у которых было время и интерес пройти его.

83% опрошенных имеют опыт front-end разработки два и более года, 5% менее года.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

Тренды front-end инструментов в 2017

Разработчики с минимальными навыками front-end, скорее всего, не закончили опрос. Результаты могут быть немного перекошены.

Мнения и убеждения

Опрошенных просили оценить их опыт. Некоторые были скромны и страдали от синдрома самозванца. Другие переоценивали свои технические умения, так как были единственными front-end разработчиками в большой команде новичков программистов. Самоуверенные убеждения могут усредняться, но этого никак не докажешь.

Прошлое не связано с будущими трендами

Результаты показывают, что разработчики использовали раньше. Это не значит, что это полезные инструменты, которые экономят время или которые будут использоваться в будущих проектах.

CSS

63% разработчиков оценили свои навыки CSS на уровне продвинутых и экспертов.

Тренды front-end инструментов в 2017

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 знания на уровне продвинутых и эксперт.

Тренды front-end инструментов в 2017

Несмотря на релевантность вопроса, более 99% разработчиков использовали jQuery в какой-то промежуток времени, а 31% считают эту библиотеку необходимой для большинства проектов. 70% до сих пор используют библиотеку в текущих проектах, что похоже на результаты W3Techs:

Тренды front-end инструментов в 2017

С фреймворкаи все намного запутаннее:

React используется в 38% текущих проектов. Хотя 29% разработчиков неудобно работать с этим фреймворком, а 18% считают его обязательным. Менее 0.1% сайтов было просмотрено с помощью React, но не забывайте, что опрос проводился с front-end разработчиками, а не всеми веб-разработчиками.

Angular 1 используется в 25% проектов, хотя только 8% считают фреймворк необходимым. Переход на Angular 2 был относительно спокойным и добавил еще 8%. Для большинства проектов данный фреймворк использует только 3%.

Vue.js используется в 10% проектов. Менее 6% нравится данный фреймворк, 3% считают его обязательным.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее

На следующий год, возможно, будет актуален вопрос «вы когда-нибудь бросали один фреймворк или переключались на другой в рамках одного проекта?».

Несмотря на большое количество 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

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Современные технологии веб-разработки

AngularJS, Webpack, NodeJS, ReactJS, TypeScript, Gulp, Git, Github...
Узнайте все о современных технологиях в веб-разработке

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по NodeJS. Основы

Прямо сейчас посмотрите курс по NodeJS!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree