Quick Thanks
This survey would have been a whole lot harder to put together without the support of Just Eat (my employer) and Wes Bos, who has kindly affiliated with this years survey, which has enabled me to spend more time analysing the results. Wes is renowned for creating great learning materials for web developers. His courses are a great place to start if you’re looking to learn more about topics such as React and ES6.The Responses
This years survey has had over 4,700 responses. In comparison, when I released the first set of results in 2015, the survey had received just 648 responses which then rose to a final figure of 2,028 responses when the survey closed. So that’s almost 2 and a half times the number of responses in comparison to last years final numbers, or a 132% increase for people who like percentages. In terms of where the responses have come from, I posted the survey on Twitter, Reddit, HackerNews, DesignerNews, Echo.js, LinkedIn and Frontendfront. It was also featured by a number of newsletters such as Responsive Design Weekly, Sitepoint Weekly and FrontEnd Focus, among others. The reason I want to highlight these sources is to show that there has been a good spread of response across various channels; respondents haven’t all come from one social channel.The Results
Pre-amble disclaimer: These results represent a sample of front-end developers working in the industry – therefore, they shouldn’t be taken as gospel, simply as pointing towards a rough trend.
So, without further ado, let’s take a look at the results! Grab yourself a cup of tea/coffee and let’s take a look…Q1: General Front-end Experience
The first question I asked was to get an idea of the experience level of those responding; something that wasn’t recorded in last year’s survey. The question was Roughly how long have you been working with front-end technologies? Here are the results:Answer | Number of Votes | Percentage |
---|---|---|
0-1 Year | 232 | 4.92% |
1-2 Years | 589 | 12.49% |
2-5 Years | 1,508 | 31.98% |
5-10 Years | 1,323 | 28.06% |
10-15 Years | 673 | 14.27% |
Over 15 Years | 390 | 8.27% |
![Roughly how long have you been working with front-end technologies? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q1.jpg)
Q2: CSS Knowledge
The second question was a subjective look at how respondents rated their own knowledge of CSS. It goes without saying that this question is pretty relative, as this can be interpreted differently by each respondent as well as relying on a level of modesty when it comes to rating your own skill level – but it is none-the-less interesting to see the results! The question was How do you rate your own knowledge of CSS and its associated tools and methodologies? Here’s what the responses looked like:Level | Number of Votes | Percentage |
---|---|---|
Beginner | 78 | 1.65% |
Novice (between Beginner and Intermediate) | 424 | 8.99% |
Intermediate | 1,243 | 26.36% |
Advanced (between Intermediate and Expert) | 2,203 | 46.72% |
Expert | 767 | 16.27% |
![How do you rate your own knowledge of CSS and its associated tools and methodologies? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q2.jpg)
Q3: CSS Processor Usage
The next question was the first technology specific question, asking What is your CSS Processing tool of choice? This question was asked on last years survey, with Sass being the choice for the majority of developers back in 2015. The possible answers included all of those available last year plus the addition of PostCSS and Rework, two more modular CSS Processors. The results below also show the percentage difference between this year’s and last year’s results where applicable.Preprocessor | Number of Votes | Percentage | % Diff (to 2015) |
---|---|---|---|
Sass | 2,989 | 63.39% | -0.56% |
Less | 478 | 10.14% | -5.05% |
Stylus | 137 | 2.91% | -0.84% |
PostCSS | 392 | 8.31% | N/A |
Rework | 3 | 0.06% | N/A |
No Preprocessor | 643 | 13.64% | -1.4% |
Other | 73 | 1.55% | -0.52% |
![What is your CSS Processing tool of choice? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q3.jpg)
Q4: CSS Processor Experience
Following on from the last question, I wanted to find out more detail about knowledge levels across CSS processing tools with respondents asked to give their experience in each. Here is how people responded when asked – Please indicate your experience with the following CSS Processing tools:Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
---|---|---|---|---|
Sass – Standard or SCSS syntax | 0.57% (27) | 11.11% (524) | 17.16% (809) | 71.16% (3,355) |
Less | 0.81% (38) | 30.86% (1,455) | 33.32% (1,571) | 35.02% (1,651) |
Stylus | 24.22% (1,142) | 57.26% (2,700) | 11.11% (524) | 7.40% (349) |
PostCSS | 21.76% (1,026) | 45.37% (2,139) | 18.73% (883) | 14.15% (667) |
Rework | 78.43% (3,698) | 20.17% (951) | 0.91% (43) | 0.49% (23) |
![Please indicate your experience with the following CSS Processing tools – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q4.jpg)
Q5: CSS Naming Schemes
The next question was an area of CSS that I have a lot of interest in – CSS Naming Schemes. Having used a naming scheme in my own work for a number of years now, I was interested to see if this was something that other front-end developers had adopted too. The question asked was – Do you use a naming scheme when writing CSS, such as BEM or SUIT?Answer | Number of Votes | Percentage |
---|---|---|
Yes | 2,170 | 46.02% |
No – I’ve heard of CSS naming schemes but don’t use one | 1,731 | 36.71% |
No – I’ve never heard of CSS naming schemes | 814 | 17.26% |
![Do you use a naming scheme when writing CSS, such as BEM or SUIT? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q5.jpg)
Q6: CSS Linting
Next up was CSS Linting – is this a tool that a lot of developers use in their workflows? I asked Do you use a tool to lint your CSS? The results were as follows:Answer | Number of Votes | Percentage |
---|---|---|
Yes | 2,232 | 47.34% |
No – I don’t lint my CSS | 2,483 | 52.66% |
![Do you use a tool to lint your CSS? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q6.jpg)
Q7: CSS Tool Experience
The next three questions in the survey covered the knowledge levels and usage across a number of CSS tools and methodologies. Firstly question 7 asked respondents to Please indicate your experience with the following CSS tools. Let’s look at the results:Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
---|---|---|---|---|
Autoprefixer | 18.28% (862) | 17.18% (810) | 15.93% (751) | 48.61% (2,292) |
Susy | 55.02% (2,594) | 29.78% (1,404) | 9.69% (457) | 5.51% (260) |
Modernizr | 6.64% (313) | 22.93% (1,081) | 37.96% (1,790) | 32.47% (1,531) |
Stylelint | 54.68% (2,578) | 24.35% (1,148) | 10.39% (490) | 10.58% (499) |
![Please indicate your experience with the following CSS tools – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q7.jpg)
Q8: CSS Methodologies and Naming Scheme Experience
This next question followed on from the last by asking respondents to Please indicate your experience with the following CSS methodologies. The results looked like this:Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
---|---|---|---|---|
SMACSS | 40.57% (1,913) | 33.91% (1,599) | 14.74% (695) | 10.77% (508) |
Object Oriented CSS (OOCSS) | 28.27% (1,333) | 41.80% (1,971) | 17.77% (838) | 12.15% (573) |
Atomic Design | 41.53% (1,958) | 33.74% (1,591) | 14.34% (676) | 10.39% (490) |
ITCSS | 68.34% (3,222) | 22.38% (1,055) | 4.50% (212) | 4.79% (226) |
CSS Modules | 27.42% (1,293) | 44.77% (2,111) | 15.95% (752) | 11.86% (559) |
BEM | 24.90% (1,174) | 23.52% (1,109) | 18.49% (872) | 33.09% (1,560) |
SUIT CSS | 69.42% (3,273) | 24.14% (1,138) | 3.90% (184) | 2.55% (120) |
![Please indicate your experience with the following CSS methodologies – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q8.jpg)
Q9: CSS Tool Usage
Rounding off the survey’s questions on CSS, I asked respondents Which of these CSS methodologies or tools do you currently use on your projects? Here are the results:Tool/Methodology | Number of Votes | Percentage |
---|---|---|
SMACSS | 613 | 13.00% |
Object Oriented CSS (OOCSS) | 696 | 14.76% |
Atomic Design | 680 | 14.42% |
ITCSS | 248 | 5.26% |
CSS Modules | 740 | 15.69% |
BEM | 1905 | 40.40% |
SUIT CSS | 111 | 2.35% |
Autoprefixer | 2,414 | 51.20% |
Susy | 237 | 5.03% |
Modernizr | 1,828 | 38.77% |
Stylelint | 682 | 14.46% |
I don’t use any of these approaches or tools | 1,095 | 23.22% |
![Which of these CSS methodologies or tools do you currently use on your projects? – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q9.jpg)
Q10: JavaScript Knowledge
The second half of the survey focussed on JavaScript and it’s ecosystem of tools. First up, I asked respondents How do you rate your own knowledge of JavaScript and its associated tools and methodologies? These were the results:Knowledge | Number of Votes | Percentage |
---|---|---|
Beginner | 197 | 4.18% |
Novice (between Beginner and Intermediate) | 553 | 11.73% |
Intermediate | 1555 | 32.98% |
Advanced (between Intermediate and Expert) | 1684 | 35.72% |
Expert | 726 | 15.40% |
![How do you rate your own knowledge of JavaScript and its associated tools and methodologies? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q10.jpg)
Q11: Task Runners
Task runners have become a very important part of many front-end developers’ workflows. But has this area changed much over the last 12 months, or has usage stayed consistent across tools and approaches? The question that respondents were asked was What task runner do you prefer using in your typical project workflow? Let’s take a look at the results – where possible I’ve included the percentage change from last years survey:Task Runner | Number of Votes | Percentage | % Diff (to 2015) |
---|---|---|---|
Gulp | 2,060 | 43.69% | -0.1% |
NPM Scripts | 1,223 | 25.94% | +22.78% |
Grunt | 554 | 11.75% | -15.81% |
Make | 54 | 1.15% | N/A |
GUI Application (i.e. Codekit) | 93 | 1.97% | N/A |
Other (please specify) | 214 | 4.54% | -0.34% |
I don’t use a task runner | 517 | 10.97% | -8.56% |
![What task runner do you prefer using in your typical project workflow? (if any) – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q11.jpg)
Q12: Knowledge of JavaScript Libraries and Frameworks
This was one of the questions I was most looking forward to seeing the responses to. How have knowledge levels across the most popular JavaScript libraries and frameworks changed in the last year? At the time of the 2015 survey, React was a relative newcomer still gaining ground on Angular. Since then, the Angular team has released version 2 of the framework, but have developers started to migrate over? Here’s what the results show:Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
---|---|---|---|---|
jQuery | 0.11% (5) | 0.85% (40) | 12.17% (574) | 86.87% (4,096) |
Underscore | 10.22% (482) | 28.12% (1,326) | 24.41% (1,151) | 37.24% (1,756) |
Lodash | 15.89% (749) | 26.70% (1,259) | 19.75% (931) | 37.67% (1,776) |
Backbone | 4.31% (203) | 58.13% (2,741) | 23.01% (1,085) | 14.55% (686) |
Angular 1 | 0.66% (31) | 40.21% (1,896) | 30.43% (1,435) | 28.70% (1,353) |
Angular 2 | 0.89% (42) | 73.59% (3,470) | 20.19% (952) | 5.32% (251) |
Ember | 3.75% (177) | 78.41% (3,697) | 11.71% (552) | 6.13% (289) |
React | 0.76% (36) | 42.29% (1,994) | 28.04% (1,322) | 28.91% (1,363) |
Polymer | 13.55% (639) | 72.68% (3,427) | 11.75% (554) | 2.01% (95) |
Aurelia | 43.71% (2,061) | 50.03% (2,359) | 3.20% (151) | 3.05% (144) |
Vue.js | 14.68% (692) | 66.55% (3,138) | 13.11% (618) | 5.66% (267) |
MeteorJS | 9.59% (452) | 75.91% (3,579) | 11.69% (551) | 2.82% (133) |
Knockout | 16.14% (761) | 66.62% (3,141) | 11.33% (534) | 5.92% (279) |
![Please indicate which JavaScript libraries and/or frameworks you have experience in – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q12.jpg)
Q13: Which JavaScript libraries and/or frameworks do you currently use most frequently on projects?
The next question referred to actual usage of the libraries and frameworks listed in the previous question. The question was, Which JavaScript libraries and/or frameworks do you currently use most frequently on projects? with respondents invited to select all that applied. Here are the results:Number of Votes | Percentage | |
---|---|---|
jQuery | 3284 | 69.65% |
Underscore | 714 | 15.14% |
Lodash | 1527 | 32.39% |
Backbone | 301 | 6.38% |
Angular 1 | 1180 | 25.03% |
Angular 2 | 387 | 8.21% |
Ember | 280 | 5.94% |
React | 1776 | 37.67% |
Polymer | 87 | 1.85% |
Aurelia | 154 | 3.27% |
Vue.js | 456 | 9.67% |
MeteorJS | 115 | 2.44% |
Knockout | 156 | 3.31% |
I don’t use any of these approaches or tools | 132 | 2.80% |
![Which JavaScript libraries and/or frameworks do you currently use most frequently on projects? – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q13.jpg)
Q14: Which JavaScript library or framework would you regard as essential to you on the majority of your projects?
Question 14 looked at what JavaScript library or framework respondents considered to be their most essential tool, with the question being Which JavaScript library or framework would you regard as essential to you on the majority of your projects? Let’s take a look at the results:Number of Votes | Percentage | |
---|---|---|
None of them are essential – I feel comfortable using native JavaScript on my projects | 985 | 20.89% |
jQuery | 1468 | 31.13% |
Underscore | 38 | 0.81% |
Lodash | 262 | 5.56% |
Backbone | 38 | 0.81% |
Angular 1 | 386 | 8.19% |
Angular 2 | 129 | 2.74% |
Ember | 178 | 3.78% |
React | 857 | 18.18% |
Polymer | 16 | 0.34% |
Aurelia | 113 | 2.40% |
Vue.js | 148 | 3.14% |
MeteorJS | 8 | 0.17% |
Knockout | 17 | 0.36% |
Other (please specify) | 72 | 1.53% |
![Which JavaScript library or framework would you regard as essential to you on the majority of your projects? – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q14.jpg)
Q15: JavaScript Module Bundlers
Looking at the results of last years survey, JavaScript module bundlers were still a tool used by a minority of front-end developers, with just 46.1% of respondents saying that they used one in their own workflow. Will this have changed just over 12 months on? The question asked was Do you use a JavaScript module bundler in your workflow? Let’s take a look at the results:Module Bundler | Number of Votes | Percentage | % Diff (to 2015) |
---|---|---|---|
I don’t use a module bundler | 1516 | 32.15% | -21.75% |
RequireJS | 359 | 7.61% | -5.85% |
Browserify | 510 | 10.82% | -5.65% |
Webpack | 1962 | 41.61% | +31.11% |
Rollup | 79 | 1.68% | N/A |
JSPM | 108 | 2.29% | +0.07% |
Other (please specify) | 181 | 3.84% | +0.39% |
![Do you use a JavaScript module bundler in your workflow? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q15.jpg)
Q16: JavaScript Transpilers
The next question in the survey is a subject that has been talked about a lot over the last 12-18 months. The use of a JS transpiler, such as Babel, enables developers to transpile their JavaScript from ES6 (ES2015) back to ES5 so that they can use the latest JS features while still providing support for older browsers. The question I asked was Are you using a tool to transpile your JavaScript from ES6 to ES5? (i.e. Babel) Here are the results:Answer | Number of Votes | Percentage |
---|---|---|
Yes | 2,942 | 62.40% |
No – I’ve heard of these tools, but haven’t used one | 1,443 | 30.60% |
No – I’ve never heard of a JavaScript transpiler | 330 | 7.00% |
![Are you using a tool to transpile your JavaScript from ES6 to ES5? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q16.jpg)
Q17: JavaScript Linting
JavaScript Linting, once a polarizing topic, is now firmly embedded in many developers workflows. But just how many people use one and is there a clear leader among tools that front-end developers use? The question I asked was Which tool do you use to lint your JavaScript? (if any) Here are the results:Tool | Number of Votes | Percentage |
---|---|---|
I don’t use a JavaScript linter | 1,076 | 22.82% |
JSLint | 894 | 18.96% |
JSHint | 657 | 13.93% |
ESLint | 1,927 | 40.87% |
xo | 24 | 0.51% |
Other (please specify) | 137 | 2.91% |
![Which tool do you use to lint your JavaScript? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q17.jpg)
Q18: JavaScript Testing
The next subject provided some of the most interesting results in last years survey. Last year the majority of respondents – 59.66% – said that they weren’t using a tool to help test their JavaScript. Are more developers using JS testing tools a year on? The question I asked was Which tool do you use to test your JavaScript? (if any) Let’s take a look at the results:Tool | Number of Votes | Percentage | % Diff (to 2015) |
---|---|---|---|
I don’t use a tool to test my JS | 2,241 | 47.53% | -12.13% |
Jasmine | 802 | 17.01% | +0.64 |
Mocha | 1,061 | 22.50% | +7.46% |
Tape | 69 | 1.46% | -0.02% |
Ava | 84 | 1.78% | N/A |
QUnit | 199 | 4.22% | +0.37% |
Jest | 164 | 3.48% | +2.69% |
Other (please specify) | 95 | 2.01% | +0.33% |
![Which tool do you use to test your JavaScript? – Pie Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q18.jpg)
Q19: Miscellaneous Tools
The final question of the survey was to find out more information on tools that don’t quite fit into the questions that have been asked so far. The list this year consisted of package management tools – Bower, NPM and Yarn – as well as Babel, a popular JS transpilation tool, Yeoman and TypeScript. Respondents were asked to Please indicate your experience with the following front-end tools. Here is how people responded:Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
---|---|---|---|---|
Bower | 2.52% (119) | 21.34% (1,006) | 33.96% (1,601) | 42.18% (1,989) |
NPM | 1.76% (83) | 4.01% (189) | 14.15% (667) | 80.08% (3,776) |
Yarn | 21.40% (1,009) | 50.56% (2,384) | 14.32% (675) | 13.72% (647) |
Babel | 7.15% (337) | 29.20% (1,377) | 24.16% (1,139) | 39.49% (1,862) |
Yeoman | 11.56% (545) | 41.53% (1,958) | 33.47% (1,578) | 13.45% (634) |
TypeScript | 6.68% (315) | 60.87% (2,870) | 19.53% (921) | 12.92% (609) |
![Please indicate your experience with the following front-end tools – Bar Chart showing the results](https://ashleynolan.co.uk/assets/img/blog/tooling-survey/2016/q19.jpg)
Summary
So that’s it – you made it through! But what conclusions can we make from the survey overall? As with last years results, the adoption rate of front-end tools shows no signs of letting up, with tools such as Webpack and JavaScript transpilers becoming ever more essential in our workflows. Although there has been a lot of talk about front-end developers moving away from using jQuery, the results show that usage and knowledge levels are still unrivalled in comparison with any other JavaScript tool of it’s kind. The great news is that more people seem to be using a JavaScript testing tool than not, showing that more front-end developers are embracing the value that these tools provide. Looking specifically at CSS, the adoption of methodologies, linting and naming schemes seems to be a bit slower. This is most noticeable when comparing the number of respondents linting their CSS compared to those doing the same with their JavaScript. Whether this is down to developers seeing less value in investing their time in learning these tools is unclear. I’d encourage anyone reading this to put the time into learning some of the more popular CSS methodologies and tools such as SMACSS, OOCSS, CSS Modules and BEM. They really do help broaden your knowledge of CSS in terms of learning ways to structure and maintain your CSS, so that you can then choose the approach that best works for you. If anyone has any questions about any of the results, or would like me to look at other cross sections of the responses, message me on Twitter and I’ll do my best to help! Originally published here, republished with the writer’s permission.Ashley Nolan
Ashley specialises in architecting large front-end projects and is passionate about emerging front-end technologies. He is the co-author of the Kickoff front-end framework, blogs over at ashleynolan.co.uk and can be found tweeting about whatever pops into his head as @AshNolan_.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…