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

34

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

Брехня, статистика та опитування

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

Світові результати

Опитування проводилося по всьому світу, але спирався в основному на англомовні країни. Деякі популярні інструменти можуть не згадуватися.

Знання розробників

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

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

Тренды 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% вважають його обов’язковим.

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

Незважаючи на велику кількість 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 інструментів і результати.