Front-End Tooling Trends for 2017
Lies, Damn Lies, Statistics and Surveys
Surveys such as this are useful to discover new tools and highlight obvious gaps in your knowledge. At the time of writing, the survey has received 5,254 responses which is a significantly better sample than most opinion polls. However, be wary about taking them as the gospel truth…
The survey was offered worldwide, but will be heavily biased toward English-speaking countries. A popular tool developed or used elsewhere may be omitted.
The survey appealed to knowledgeable developers who understood the questions, were aware of its existence, and had the time and inclination to complete it.
83% of respondents had two or more years’ front-end technology experience, with just 5% admitting to less than one year:
Developers with minimal front-end skills were less likely to complete the survey, so the results may be skewed accordingly.
Opinions and biases
Respondents were asked to judge their own experiences. Some may be modest and suffer imposter syndrome. Others may over-estimate their technical abilities because they’re the sole front-end developer on a large team of novice programmers. Self-opinionated biases may average out, but there’s no way to prove it.
Past activities don’t indicate future trends
The results highlight what developers have been using. It does not follow that the tools were useful, saved time or will be used in future projects.
63% of developers rated their CSS knowledge as advanced or expert:
Despite being a collection of seemingly simple property and value pairs, CSS is notoriously difficult to master. CSS3 introduced a slew of new effects, and it’s increasingly difficult to have experience in all. For example, I have minimal knowledge of the new CSS Grid module, and often use the Force (or random trial and error) when developing Flexbox layouts!
10% of those admitting to less than one year’s development experience claimed to having advanced CSS knowledge! I suspect they’ll soon discover that the more they know, the more they realize they don’t know!
More than 63% use Sass — the undisputed preprocessor champion. 8% also use PostCSS, although this is often used in conjunction with other preprocessors to provide useful functionality — such as AutoPrefixer (adopted by 65% of respondents).
Almost 14% use no preprocessor and prefer to work with raw CSS code. This seems a little low when you consider it’s the easiest (and best) way to start front-end development. The average website makes 7.2 CSS file requests which I would expect to be lower if 86% of developers used a preprocessor.
CSS naming schemes
46% of developers have used a naming scheme, but this rose to 57% for those who ranked their CSS knowledge as advanced or expert.
Other CSS tools
39% use Modernizr on current projects. This seems surprising when its primary use is for older editions of IE that have largely been abandoned. (Microsoft ended support for IE10 and below in January 2016.)
14% use Stylelint to check CSS validity. This seems low, but most popular IDEs and editors have some type of CSS checking, so it may not be necessary.
23% of developers don’t use any CSS tools or naming methodologies.
Libraries and frameworks
Despite having its relevancy questioned, more than 99% of developers have used jQuery at some point and 31% consider it essential for most projects. 70% continue to use it on current projects, which is similar to figures observed in the wild by W3Techs:
The framework situation is more confusing:
- React has been adopted for 38% of current projects. Yet, only 29% of developers feel comfortable using it and 18% consider it essential. Barely 0.1% of websites have been observed using React, but remember that the survey results are gathered from front-end developers — not all web developers.
- Angular 1 is being used on 25% of projects, although only 8% thought it was essential. Angular 2 uptake has been relatively sedate, adding another 8%. Just 3% use it for most projects.
- Vue.js has been adopted for 10% of projects, yet fewer than 6% of developers are comfortable with the framework and 3% consider it essential.
Perhaps a useful question for next year’s survey would be: “Have you ever abandoned one framework or switched to another in the same project?”
Task runners and module bundlers
Grunt has fallen from favor, slipping down to 12%. Also slipping by 9% are the 11% of respondents choosing not to use a task runner.
ES6 to ES5 transpilers
62% of developers are using a tool such as Babel to transpile terser ES6 code to old-browser-friendly ES5 code. 31% had heard of the possibilities but not used the tools, and 7% had never encountered the term.
23% of respondents do not use a code validation tool — although, again, it’s possible they rely on their text editor or IDE to spot the worst transgressions.
What Should You Use in 2017?!
With regard to CSS, knowledge of Sass, PostCSS and BEM seems obvious. That said, development diversity is broad. I suggest you research a number of preprocessors and naming schemes so you understand what each tool can achieve — even if you choose not to use them.
- Node.js and npm will become essential as you adopt more tools.
- It’s worth trying Gulp and/or Webpack.
- Learn about ES6 even if you continue to work on backward-compatible ES5 projects.
I don’t envy anyone trying to choose a library or framework for their next project. Going by survey results alone, jQuery is the clear favorite. Yet jQuery’s cross-browser assistance is less essential following IE’s demise, and many features have been duplicated in native browser APIs and CSS.
You could choose a framework such as React because it’s popular — but that doesn’t make it suitable for your application. Even React will eventually be superseded by something better, bigger and brighter.
Thanks to Ashley Nolan for his Front-End Tooling survey and results analysis.