The Front-End Tooling Survey 2018 – Results
Since launching this year’s Front-End Tooling Survey in March, 5,097 front-end developers have taken the time to fill it in. Thanks to all of you who have taken part!
Each year the survey has a pretty straight-forward aim; to shed light on the the tools that front-end developers are using right now in our industry.
It’s very easy to take for granted what tools are being used based on your own knowledge and habits. These results help to give an insight into the current trends in front-end tooling, as well as showing how usage is changing over time by looking at the figures from previous surveys.
This year the survey was made up of 24 questions — up from 19 questions in 2016 — covering a wide range of front-end tools and methodologies.
The survey is still open for those that haven’t taken part yet, so please do take the time to fill it in if you haven’t already. It’ll close permanently in a couple of weeks time, after which the results will be updated here shortly afterwards.
Quick Thanks
This survey would be impossible to run without the support it receives from our affiliates; Wes Bos and Just Eat (my employer).
Wes is renowned for creating awesome learning materials for Web developers. Whether you’re just starting out in the Web development, or an experienced developer looking to level-up your skillset, I’d highly recommend checking out Wes’s courses. You’ll find links to some of these courses where relevant throughout the results.
The results
So, without further ado, let’s get onto the results! Make yourself comfortable and let’s take a look…
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.
The responses
As mentioned above, this year’s survey has had 5,097 responses to date. When releasing the first set of results in 2016, the survey had received 4,715 responses which then rose to a final figure of 5,254 responses.
In terms of where this year’s responses may have come from, the link to the survey has been posted on Twitter, Reddit, HackerNews, DesignerNews, Echo.js, SitePoint, LinkedIn and Frontendfront. It was also featured by a number of newsletters such as Responsive Design Weekly, Versioning and FrontEnd Focus, among others.
Where possible, you’ll see that I’ve included the percentage change from the 2016 survey alongside this year’s figures.
Question Index
- General Front-end Experience
- CSS Knowledge Levels
- CSS Processor Usage
- CSS Processor Experience
- CSS Framework Usage
- CSS Naming Schemes
- CSS Linting
- CSS Tool Experience
- CSS Methodologies and Naming Scheme Experience
- CSS Tool Usage
- CSS Feature Usage
- JavaScript Knowledge Levels
- Task Runners
- Knowledge of JavaScript Libraries and Frameworks
- Most frequently used JS tools
- Most essential JS tool
- JavaScript Module Bundler Usage
- JavaScript Module Bundlers & Task Runners experience
- JavaScript Transpilers
- JavaScript Extension Languages
- JavaScript Linting
- JavaScript Testing
- JavaScript Package Managers
- Miscellaneous Tools
Q1 — General front-end Experience
As in previous years, the first question is used to find out the amount of front-end experience each respondent has.
The question asked was — how long have you been working with front-end technologies?
Here are the results:
| Answer | Number of Votes | Percentage |
|---|---|---|
| 0-1 Year | 234 | 4.59% |
| 1-2 Years | 600 | 11.77% |
| 2-5 Years | 1499 | 29.41% |
| 5-10 Years | 1369 | 26.86% |
| 10-15 Years | 824 | 16.17% |
| Over 15 Years | 571 | 11.20% |
She has been working with front-end technologies for over 5 years. With just 16.36% saying that they had less than 2 years experience. It’s clear from these figures that the majority of respondents in this year’s survey have a fairly high level of experience in front-end technologies.
Interestingly, these figures are extremely similar to those seen in the results to the same question in the 2016 survey.
Q2 – CSS Knowledge
The second question looked at how respondents rated their own knowledge of CSS, Asking — 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 | 72 | 1.41% |
| Novice (between Beginner and Intermediate) | 443 | 8.69% |
| Intermediate | 1475 | 28.94% |
| Advanced (between Intermediate and Expert) | 2326 | 45.63% |
| Expert | 781 | 15.32% |
Respondent has stated that their knowledge in CSS is at an intermediate level or above. With most of those (45.63%) rating themselves as advanced.
As with any question regarding knowledge levels, this is very subjective to the person answering the question. One person’s idea of what it takes to be an expert in CSS may differ to what another person thinks. Irrespective of this subjectiveness, it’s useful to be able to use these knowledge levels to see how it effects the tools that developers are using.
I’ll refer back to these results where appropriate, as it’s interesting to filter based on these knowledge levels to get more of an insight into certain results.
Q3 — CSS Processor Usage
The first tooling specific question was in relation to CSS processing tools, Asking — What is your CSS Processing tool of choice?
In previous years, Sass has been the dominant tool in this area, but how do things look today? The results were as follows:
| Preprocessor | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| Sass | 3330 | 65.33% | + 1.84% |
| No Preprocessor | 735 | 14.42% | + 0.58% |
| PostCSS | 451 | 8.85% | + 0.97% |
| Less | 328 | 6.44% | – 3.78% |
| Stylus | 111 | 2.18% | – 0.87% |
| Other | 142 | 2.79% | + 1.34% |
The results show that Sass is still the dominant tool in this space, This figure is actually up slightly (+1.84%) from the 2016 results, with the split across CSS processing tools holding fairly consistent.
Less usage continued to show a downward trend, with just 6.44% of respondents using it, a fall of 3.78% from the 2016 results.
Q4 – CSS Processor Experience
Following on from the previous question, I asked respondents to indicate their experience levels across CSS processing tools.
Here is how they responded:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |||||
|---|---|---|---|---|---|---|---|---|
| Sass – Standard or SCSS syntax | 0.16% (8) | – 0.43% | 8.95% (456). | – 2.37% | 17.56% (895). | + 0.16% | 73.34% (3738). | + 2.65% |
| Less | 0.98% (50) | + 0.10% | 36.14% (1842). | + 5.00% | 34.39% (1753). | + 1.06% | 28.49% (1452). | – 6.17% |
| Stylus | 21.90% (1116). | – 2.98% | 60.68% (3093). | + 3.89% | 11.24% (573). | + 0.37% | 6.18% (315). | – 1.28% |
| PostCSS | 16.70% (851). | – 5.74% | 45.09% (2298). | – 0.74% | 21.15% (1078). | + 2.86% | 17.07% (870). | + 3.63% |
As you might have expected following the results from the previous question, Sass is the tool with by far the highest knowledge levels.
73.34% of respondents indicated that they feel comfortable using it, With this figure up slightly (+2.65%) from the 2016 survey. Only 9.11% of respondents said that they had never used It with just 0.16% of people having never heard of it at all. Combined with the results from Question 3, it’s clear that Sass is still the dominant tool when it comes to CSS Processing.
Looking at the rest of these tools, only PostCSS saw a positive gain from the 2016 results, Ipsos with (17.07%) of respondents saying that they feel comfortable using it — up trended down compared with 2016.
Q5 – CSS Frameworks
This next question came as a result of feedback to last year’s survey, with a number of people interested in finding out about CSS Framework usage.
The part of these results I was most interested to see was how many developers are using an off-the-shelf solution, in comparison to those who are either choosing not to use a framework or working with something more custom.
So the question asked was — Please indicate which of the following CSS frameworks you use most frequently on your projects (if any).
The results are as follows:
| Answer | Number of Votes | Percentage |
|---|---|---|
| Bootstrap | 1768 | 34.69% |
| No Framework | 1690 | 33.16% |
| Custom Framework | 773 | 15.17% |
| Foundation | 199 | 3.90% |
| Materialize | 134 | 2.63% |
| Bulma | 132 | 2.59% |
| Semantic UI | 102 | 2.00% |
| PureCSS | 33 | 0.65% |
| Other | 266 | 5.22% |
By far the most popular CSS framework is Bootstrap, with just over a third of respondents (34.69%) using it.
What’s interesting about these results is the number of respondents choosing to use an off-the-shelf CSS framework Compared to those who are choosing to either use something custom or use no framework at all (48.33%), which is a fairly even split.
When filtering the responses based on CSS knowledge levels, Bootstrap usage is more prevalent in beginners and novices, With usage rising to 51.07% when looking at these respondents. At higher knowledge levels, framework usage drops at each category level, With 37.39% of those with an expert level of CSS not having a preferred CSS framework and Bootstrap usage much lower at 21.64% among these by.
This pattern is repeated for custom frameworks with 25.61% of those with expert knowledge in CSS saying that they use a custom framework, while just 6.21% of those with beginner or novice level knowledge saying the same thing.
These figures make sense — as a developer gains more knowledge using CSS, they are more likely to move away from using an off-the-shelf solution, using what they’ve learned to write CSS in a way that better suits them and their team.
Q6 — CSS Naming Schemes
Next up was CSS Naming Schemes.
This question doesn’t ask for detail around a specific naming scheme, instead simply asking – Do you use a CSS naming scheme when writing CSS, such as BEM or SUIT?
| Answer | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| Yes | 2525 | 49.54% | + 4.17% |
| No — I’ve heard of CSS naming schemes but don’t use one | 1986 | 38.96% | + 2.09% |
| No — I’ve never heard of CSS naming schemes | 586 | 11.50% | – 6.26% |
The results show that usage and knowledge levels of CSS naming schemes has risen since the 2016 survey, with 49.54% of developers now using one when writing CSS.
On average, respondents had never heard of a CSS naming scheme — down from 17.76% in 2016. This figure rose to 21.41% among respondents who rated themselves as at an intermediate level of CSS knowledge or lower.
When looking at the respondents who rated themselves as having an advanced level of CSS knowledge or higher, the usage of CSS naming schemes rose to 59.83%.
Overall, knowledge levels in this area are rising — and as an advocate for their usefulness myself, this is encouraging to see.
Q7 – CSS Linting
In the 2016 survey results, the majority of respondents said that were not using a CSS linting tool. So has this changed 18 months on?
The question asked was — Do you use a tool to lint your CSS?
The results are as follows:
| Answer | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| Yes | 2545 | 49.93% | + 3.36% |
| No — I don’t lint my CSS | 2552 | 50.07% | – 3.36% |
The split between those choosing to lint their CSS and those opting not to couldn’t be much closer, with 49.93% (2,545) of respondents now saying that they do lint their CSS. This shows a 3.36% gain from the results in 2016.
As we saw with CSS naming schemes, those with more advanced knowledge in CSS are more likely to lint their CSS. 57.16% of respondents who rated themselves as having advanced or higher knowledge of CSS also said that they linted their CSS, compared to just 38.64% of those with beginner to intermediate knowledge.
This is another area of CSS tooling that seems to be trending upwards. I’d be very surprised if this didn’t continue to rise as the practice of CSS linting becomes as ubiquitous as JavaScript linting has now become in our industry.
Q8 – CSS Tool Experience
The next few questions cover the knowledge and usage levels of a number of different CSS methodologies and helper tools.
Firstly, Question 8 asked for respondents to state their experience with Autoprefixer, Modernizr and Stylelint.
Let’s take a look at the results:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |||||
|---|---|---|---|---|---|---|---|---|
| Autoprefixer | 16.58% (845). | – 2.28% | 17.05% (869). | – 0.48% | 16.91% (862). | + 1.09% | 49.46% (2521). | + 1.67% |
| Modernizr | 10.40% (530). | + 3.45% | 27.19% (1386). | + 4.06% | 34.24% (1745). | – 3.52% | 28.17% (1436). | – 4% |
| Stylelint | 43.30% (2207). | – 11.80% | 26.25% (1338). | + 1.72% | 12.05% (614). | + 2.06% | 18.40% (938). | + 8.03% |
Looking at the results against the 2016 figures, both Stylelint and Autoprefixer knowledge levels have risen, with Modernizer knowledge falling a little.
Stylelint has seen good growth in knowledge levels, On closer investigation (ipsos) she says that they feel comfortable using it. This figure is up 8.03% from 2016. It does He also has the highest percentage of respondents who have never heard of it (43.30%), Although this number has fallen 11.80% from 2016.
Surprisingly, over a third of developers who say they are at an advanced level of CSS or higher have never heard of Stylelint. I’d be very surprised if this figure didn’t continue to fall over the coming years.
Autoprefixer knowledge levels are still very high, with 49.46% of respondents comfortable using it. Likewise, Although Modernizr knowledge levels have been slipped slightly, only 10.4 percent of respondents have never heard of it, showing how well known it still is.
Q9 — CSS Methodologies and Naming Scheme Experience
Following on from the previous question, Respondents were asked to — Please indicate your experience with the following CSS Methodologies.
The results were as follows:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |||||
|---|---|---|---|---|---|---|---|---|
| CSS-in-JS | 11.77% (600). | – 16.21% | 41.69% (2125). | – 2.81% | 26.27% (1339). | + 10.28% | 20.27% (1033). | + 8.74% |
| SMACSS | 40.71% (2075). | – 0.19% | 39.43% (2010). | + 5.36% | 11.58% (590). | – 2.79% | 8.28% (422). | – 2.38% |
| Object Oriented CSS (OOCSS) | 31.67% (1614). | + 2.99% | 45.36% (2312). | + 3.68% | 14.09% (718). | – 3.53% | 8.89% (453). | – 3.12% |
| Atomic Design | 33.43% (1704). | – 8.54% | 37.59% (1916). | + 4.24% | 16.77% (855). | + 2.29% | 12.20% (622). | + 2.00% |
| ITCSS | 69.22% (3528). | + 0.21% | 21.39% (1090). | – 0.54% | 3.96% (202). | – 0.47% | 5.43% (277). | + 0.80% |
| BEM | 15.66% (798). | – 9.67% | 25.51% (1300). | + 1.76% | 19.99% (1019). | + 1.83% | 38.85% (1980). | + 6.09% |
| SUIT CSS | 69.98% (3567). | – 0.25% | 24.41% (1244). | + 0.92% | 3.30% (168). | – 0.49% | 2.32% (118). | – 0.17% |
The big mover in CSS methodologies this year is CSS-in-JS, Ipsos with 20.27% of respondents saying that they feel comfortable using it — up 8.74% from 2016 respondents when including those who said they have used it a little.
BEM is still the best known CSS methodology and also saw good growth, Ipsos with 38.85% of respondents saying that they feel comfortable using it — up 6.09% since the last survey.
Almost all other CSS Methodologies saw a fall in their knowledge levels — the exception being Atomic Design for which She (closer) said that they had used it at least a little.
Flash Across All Methodologies — So that’s of SMACSS, OOCSS, Atomic Design, ITCSS and CSS-IN-JS — more than a third (35.26%) of respondents feel comfortable using at least one of these. This rises To 66.94% of respondents if we consider those that said that they have used any one of these Methodologies at least a little.
So more people are using one of these CSS methodologies than they were in 2016, with this gain being driven by more developers using CSS-in-JS and Atomic Design.
Q10 – CSS Tool Usage
Rounding off the questions on CSS methodologies and tools, Question 10 Questioned respondents — Which of these CSS Methodologies or tools do you currently use on your projects?
Would these results tally up with the experience levels shown in the previous two questions? Let’s take a look.
| Tool/Methodology | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| Autoprefixer | 2928 | 57.45% | + 7.09% |
| BEM | 2239 | 43.93% | + 3.98% |
| Modernizr | 1501 | 29.45% | – 9.09% |
| CSS-in-JS | 1343 | 26.35% | + 10.82% |
| Stylelint | 1177 | 23.09% | + 8.87% |
| Atomic Design | 777 | 15.24% | + 0.87% |
| Object Oriented CSS (OOCSS) | 463 | 9.08% | – 5.59% |
| SMACSS | 337 | 6.61% | – 6.26% |
| ITCSS | 247 | 4.85% | – 0.25% |
| SUIT CSS | 80 | 1.57% | – 0.73% |
| I don’t use any of these approaches or tools | 835 | 16.38% | – 7.14% |
The results do indeed tally up to the experience levels seen in the previous two questions.
Top in terms of actual usage was Autoprefixer (57.45%), Followed by BEM (43.93%) and Modernizr (29.45%). This is actually the same top three as in 2016, But looking at the percentage difference compared with those results you can see that they’ve changed by +7.09%, These changes match what was seen in questions 8 and 9 respectively. with Modernizr usage seemingly trending downwards and Autoprefixer and BEM usage growing.
CSS-in-JS usage has risen +10.82%, with 26.35% of respondents now using it in their projects. Likewise, Stylelint usage has risen +8.87%, with 23.09% of developers now using it.
On the flip-side, Usage of other CSS Methodologies is down — with the exception being Atomic Design which saw a small rise in usage.oocss SMACSS saw 5.59% and 6.26% falls in usage respectively. With more modern techniques of developing CSS now being written about and promoted, it isn’t a huge surprise to see older methodologies usage decline over time.
As you might expect, usage of all these methodologies and tools rises among those respondents with advanced knowledge of CSS.
It’s clear from these results which tools and methodologies are on an upwards trajectory in terms of both knowledge levels and usage and it’ll be interesting to see how these figures evolve in the future.
Q11 – CSS Feature Usage
The next question was all about the new and shiny.
With so much being written and talked about with respect to the latest CSS features, I thought it would be interesting to find out how many developers had started to put these features into practice and gained experience using them.
Therefore, I asked respondents to — Please indicate your experience with the following CSS features.
Here are the results:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| CSS Grid | 1.16% (59) | 36.59% (1865). | 44.30% (2258). | 17.95% (915). |
| Flexbox | 0.61% (31) | 5.55% (283). | 25.80% (1315). | 68.04% (3468). |
| CSS Custom Properties | 9.75% (497). | 44.75% (2281). | 26.45% (1348). | 19.05% (971). |
It’s clear from the results that Flexbox is now understood by the majority of developers, with 68.04% of respondents saying they feel comfortable using it. This figure rises to 94.84% when including the respondents who have at least used it a little.
Somewhat surprisingly, Closer investigation said that they felt comfortable using CSS Custom Properties (19.05%) than CSS Grid (17.95%), Although when looking at how many had used each feature at least a little, the CSS Grid came out ahead with 62.25%, Compared with 45.5% of respondents saying the same for CSS Custom Properties.
Looking at these figures, it seems a lot of people have dabbled with CSS Grid, but not that many have yet fully got to grips with it. Looking at how developers now feel comfortable developing with flexbox, it’s not unreasonable to think that these figures will increase fairly rapidly now that CSS Grid and Custom Properties are so well supported in modern browsers.
Learn CSS Grid
Learn CSS Grid
Learn all about CSS Grid with Wes Bos in this free video series!
Q12 – JavaScript Knowledge
The second half of the survey was focussed on JavaScript and it’s ecosystem of tools.
Firstly, 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 | 128 | 2.51% |
| Novice (between Beginner and Intermediate) | 542 | 10.63% |
| Intermediate | 1698 | 33.31% |
| Advanced (between Intermediate and Expert) | 1908 | 37.43% |
| Expert | 821 | 16.11% |
The split between knowledge levels seen in these results were very similar to those seen in the 2016 results. Similar to CSS, it seems that the vast majority of respondents consider themselves to be at an intermediate level or higher in Ipsos (respondents) JavaScript, with over three quarters (86.85%) of rating themselves at this level.
There was a small increase in the number of respondents rating themselves as either at an advanced or expert level when compared to the last survey and subsequently there was a slightly smaller number of respondents at beginner or novice level.
I’ll reference these knowledge levels where appropriate throughout the rest of the results.
Q13 – Task Runners
Back in 2016, Gulp was the most widely used task runner, with 43.59% of respondents saying they used the tool. NPM scripts had seen large growth in usage however, so it’ll be interesting to see what developers are now using in their workflows.
The question that she was asked was — What task runner do you prefer using in your typical project workflow?
Let’s take a look at the results:
| Task Runner | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| NPM Scripts | 2436 | 47.79% | + 21.98% |
| Gulp | 1514 | 29.70% | – 13.89% |
| I don’t use a task runner | 540 | 10.59% | – 0.49% |
| Grunt | 297 | 5.83% | – 6.08% |
| GUI Application (i.e. Codekit) | 55 | 1.08% | – 0.82% |
| Make | 31 | 0.61% | – 0.57% |
| Other (please specify) | 224 | 4.39% | – 0.14% |
Interestingly, usage of NPM scripts has overtaken Gulp by quite some margin, now becoming the most used task runner with 47.79%. This is a huge increase of 21.98% when compared to the 2016 figures.
Gulp is now the second most used tool in this area with 29.70%, While Gulp has seen usage fall, it’s important to consider that it’s still used by almost a third of respondents, which is a considerable amount.
Grunt usage also decreased, with just 5.83% of developers now using it in their workflows. The number of people not using a task runner has stayed consistent (10.59%) with the 2016 figures.
Digging a little deeper into these results reveals that among respondents with beginner to intermediate knowledge of JavaScript, NPM script usage actually rises above the average to 50.45%.
So the main trend to be observed here is that it looks like more developers are switching to using NPM scripts to handle their workflow tasks, moving away from tools like Grunt and Gulp. This could be due to better synergy with tools like WebPack and React, or simply because NPM Scripts provide a simple way of running tasks without the overhead of learning an additional tool. This could explain why more beginners are using them over the alternatives.
Q14 — Knowledge of JavaScript Libraries and Frameworks
The next three questions look closely at knowledge and usage levels of JavaScript libraries and frameworks.
In 2016, jQuery was still proving to be an extremely popular tool among front-end developers, with React becoming the most popular framework, ahead of Angular.
So how have things changed 18 months on? Have any new tools emerged?
First I asked respondents to indicate their experience with a number of JavaScript libraries and frameworks. Here’s how they replied:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |||||
|---|---|---|---|---|---|---|---|---|
| jQuery | 0.12% (6) | + 0.02% | 2.24% (114). | + 1.36% | 17.74% (904). | + 5.43% | 79.91% (4073). | – 6.80% |
| Lodash | 11.28% (575). | – 5.28% | 25.45% (1297). | – 1.65% | 25.66% (1308). | + 6.11% | 37.61% (1917). | + 0.82% |
| Underscore | 12.03% (613). | + 1.35% | 34.61% (1764). | + 6.21% | 24.70% (1259). | + 0.09% | 28.66% (1461). | – 7.66% |
| React | 0.35% (18) | – 0.60% | 30.65% (1562). | – 12.08% | 27.98% (1426). | – 0.21% | 41.02% (2091). | + 12.89% |
| Angular 1 | 0.57% (29) | – 0.21% | 47.03% (2397). | + 7.06% | 30.31% (1545). | – 0.37% | 22.09% (1126). | – 6.48% |
| Angular 2+ | 0.67% (34) | – 0.34% | 65.25% (3326). | – 7.89% | 21.44% (1093). | + 1.13% | 12.63% (644). | + 7.09% |
| Vue.js | 0.96% (49) | – 14.74% | 59.03% (3009). | – 6.98% | 22.82% (1163). | + 10.01% | 17.19% (876). | + 11.71% |
| Ember | 4.10% (209). | – 0.09% | 80.60% (4108). | + 2.58% | 8.50% (433). | – 3.13% | 6.81% (347). | + 0.64% |
| Preact | 22.94% (1169). | N/A | 65.55% (3341). | N/A | 6.89% (351). | N/A | 4.63% (236). | N/A |
| Backbone | 6.57% (335). | + 2.02% | 67.63% (3447). | + 9.20% | 16.97% (865). | – 5.89% | 8.83% (450). | – 5.33% |
| Knockout | 19.70% (1004). | + 2.76% | 65.76% (3352). | + 0.00% | 10.69% (545). | – 0.75% | 3.85% (196). | – 2.01% |
| Aurelia | 40.55% (2067). | – 3.59% | 55.92% (2850). | + 6.15% | 2.39% (122). | – 0.69% | 1.14% (58) | – 1.87% |
| MeteorJS | 14.24% (726). | + 3.66% | 74.20% (3782). | – 1.10% | 9.55% (487). | – 1.83% | 2.00% (102). | – 0.74% |
| Polymer | 17.19% (876). | + 2.67% | 71.53% (3646). | – 0.47% | 9.61% (490). | – 1.83% | 1.67% (85). | – 0.37% |
Looking broadly over these results, The most notable changes can be seen in the number of respondents that they feel comfortable using jQuery (79.91%), React (41.02%), vue.js (17.19%) and Angular 2+ (12.63%).
Although jQuery still has the highest number of developers that feel comfortable using it, this number has fallen 6.80% when compared to the 2016 results.
On the flip-side, React has gained 12.89% in this category, making it the framework that the most respondents said that they feel comfortable using. It also seems that Vue.js has gained a lot of traction with developers, with 17.19% of respondents saying that they feel comfortable using it, up 11.71% from the 2016 results.
Angular 2+ knowledge levels have risen, but slightly less in comparison to React and Vue.js.
In terms of JS utility libraries, Closer investigation said that they felt comfortable using Lodash (37.61%) than Underscore (28.66%).
Looking at knowledge levels across all the JavaScript MV* frameworks — so everything in the list except jQuery, Underscore and Lodash — 70.98% of Respondents said that they felt comfortable using at least one of these frameworks. That’s up almost 10% (from 61.71%) who said the same in the 2016 survey, and up 20% since 2015.
These figures really show how important it’s become to know at least one JavaScript framework in modern front-end development.
Q15 — Which JavaScript libraries and/or frameworks do you currently use most frequently on projects?
The next question asked respondents to indicate whether they actually use any of the libraries and frameworks mentioned in the previous question.
Respondents were invited to select all (or none) of the tools that they used on their projects.
The responses were as follows:
| Number of Votes | Percentage | % Diff (to 2016) | |
|---|---|---|---|
| jQuery | 2575 | 50.52% | – 19.73% |
| React | 2435 | 47.77% | + 10.86% |
| Lodash | 1746 | 34.26% | + 2.49% |
| Vue.js | 1168 | 22.92% | + 13.57% |
| Angular 2+ | 702 | 13.77% | + 5.30% |
| Angular 1 | 522 | 10.24% | – 14.86% |
| Underscore | 400 | 7.85% | – 7.07% |
| Ember | 318 | 6.24% | + 0.19% |
| Preact | 159 | 3.12% | N/A |
| Backbone | 123 | 2.41% | – 3.87% |
| Knockout | 90 | 1.77% | – 1.64% |
| Polymer | 86 | 1.69% | – 0.19% |
| MeteorJS | 72 | 1.41% | – 0.87% |
| Aurelia | 54 | 1.06% | – 2.23% |
| I don’t use any of these approaches or tools | 186 | 3.65% | + 0.93% |
This year’s figures show some fairly big changes.
JQuery usage is still high entering developers — with 50.52% of respondents using it on their projects — but React is now A very close second, with 47.77%. This is actually a huge swing of over 30% when compared to the 2016 results, With jQuery Usage falling 19.73% and React Usage growing 10.86%.
Lodash was the third most used tool (34.26%) and was interestingly found, vue.js was the next most used tool, On closer exploration (esp) with (22.92%) of respondents saying they used it frequently on their projects. This put Vue just ahead of Angular 2+, Which received 13.77% of responses.
Angular 1 usage fell by 14.86% from 2016, but this hasn’t translated into similar gains for Angular 2+, Clearly Angular developers have moved onto alternative frameworks rather than simply which only saw growth of 5.3% moving to the newest version of the framework.
Usage of all other frameworks was down from their respective figures in the 2016 results.
Recommended Resource
React For Beginners
Upgrade your JavaScript skills – Learn React in just a couple of afternoons with this course by Wes Bos.
Q16 — Which JavaScript Library or Framework would you regard as essential to you on the majority of your projects?
The next question asks respondents to choose the one library or framework that they consider to be essential to them.
In 2016, jQuery was top of the pile with about a third of developers regarding it as essential to them.
Let’s see if that’s still the case:
| Number of Votes | Percentage | % Diff (to 2016) | |
|---|---|---|---|
| React | 1469 | 28.82% | + 11.02% |
| None of them are essential — I feel comfortable using native JavaScript on my projects | 1098 | 21.54% | + 0.97% |
| jQuery | 991 | 19.44% | – 12.67% |
| Vue.js | 527 | 10.34% | + 7.33% |
| Angular 2+ | 301 | 5.91% | + 3.09% |
| Ember | 234 | 4.59% | + 0.82% |
| Lodash | 176 | 3.45% | – 1.88% |
| Angular 1 | 82 | 1.61% | – 6.54% |
| Aurelia | 31 | 0.61% | – 1.71% |
| Polymer | 27 | 0.53% | + 0.19% |
| Underscore | 22 | 0.43% | – 0.39% |
| Preact | 15 | 0.29% | N/A |
| Backbone | 14 | 0.27% | – 0.55% |
| MeteorJS | 9 | 0.18% | + 0.01% |
| Knockout | 8 | 0.16% | – 0.22% |
| Other (please specify) | 93 | 1.82% | + 0.22% |
There has been a change at the top, with React now the tool that the most respondents say is most essential to them, JQuery is now down to third with 19.44% (991), (1) Just behind the 21.54% (1,098) of respondents that said that no tool is essential to them.
As we saw in the previous question, Vue.js (10.34%) is considered the next most essential JavaScript framework among respondents, ahead of Angular 2+ (5.91%) and Ember (4.59%).
Drilling down using experience levels reveals some interesting insights. When looking at the responses of developers with less than 2 years experience in front-end technologies, these figures are even more pronounced, with 32.24% saying that React is their most essential tool and 12.36% saying the same for Vue.js. Likewise 18.47% chose jQuery as their tool of choice, lower than the average across all experience levels.
Historically, jQuery has been a tool that beginners have used to help them get started with JavaScript, but looking at these figures more beginners are choosing to learn a framework instead. This makes sense in a lot of ways, as there are now far more articles being published about how to get started with React and Vue.js than there are relating to jQuery.
It’s clear overall that usage levels of jQuery, although still high, are starting to trend down. It’ll be interesting to see if Vue.js can continue it’s growth and establish itself as a serious contender to React’s crown in the future.
For the time being though, React is clearly the JavaScript framework of choice among front-end developers.
Recommended Resource
React For Beginners
Upgrade your JavaScript skills – Learn React in just a couple of afternoons with this course by Wes Bos.
Q17 — JavaScript Module Bundlers — Usage
Looking back at 2016, Webpack was the clear leader when it came to JavaScript module bundlers, On closer investigation with 41.23% of respondents using it.
So has anything changed since then, or has this lead continued to grow? 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 2016) |
|---|---|---|---|
| Webpack | 3366 | 66.04% | + 24.81% |
| I don’t use a module bundler | 1031 | 20.23% | – 12.43% |
| Browserify | 190 | 3.73% | – 6.93% |
| RequireJS | 123 | 2.41% | – 5.34% |
| Rollup | 113 | 2.22% | + 0.53% |
| Parcel | 51 | 1.00% | N/A |
| JSPM | 13 | 0.26% | – 2.00% |
| Other (please specify) | 210 | 4.12% | + 0.37% |
Webpack has seen further significant gains in usage since 2016, (66.04%) Now using it — up +24.81% since the last survey.
Usage of Browserify (3.73%) and RequireJS (2.41%) both fell by 6.93% and 5.34% respectively.
Overall usage levels of module bundler’s has continued to rise, On closer investigation with 79.77% (4,066) of respondents now using one of these tools, an increase of 12% from 2016’s results and up 32% since 2015.
Developers seem to have settled on Webpack in this area of JavaScript tooling. It’s clear that unless a new tool were to emerge and gain traction in the future, it’s usage levels will likely continue to rise as it becomes more ubiquitous among developers.
Q18 — JavaScript Module Bundlers & Task Runners — Experience
The next question asked respondents about their experience levels across the module bundlers and task managers previously mentioned.
Here’s how the results looked:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| Gulp | 1.31% (67). | 18.78% (957). | 29.90% (1524). | 50.01% (2549). |
| NPM Scripts | 4.34% (221). | 12.58% (641). | 26.64% (1358). | 56.44% (2877). |
| Grunt | 2.12% (108). | 32.65% (1664). | 36.14% (1842). | 29.10% (1483). |
| Webpack | 2.51% (128). | 19.07% (972). | 31.23% (1592). | 47.18% (2405). |
| Browserify | 9.02% (460). | 51.85% (2643). | 26.96% (1374). | 12.16% (620). |
| Parcel | 44.28% (2257). | 47.46% (2419). | 5.55% (283). | 2.71% (138). |
As you might expect from the previous results, the tools that most respondents felt comfortable using were NPM Scripts (56.44%), Gulp (50.01%) and Webpack (47.18%).
It’s interesting to see that the percentage of respondents who said that they feel comfortable using Webpack is actually lower than the percentage that said they were using it as their module bundler in the previous question.
This may be down to people using tooling such as Create-React-App, which comes with Webpack preconfigured, meaning that developers don’t necessarily need to know it in order to use it on their projects.
Q19 – JavaScript Transpilers
Back in 2016, JavaScript transpilers were a hot new topic. Since then, Babel has gained a lot of traction as transpiling JavaScript has become best practice, enabling developers to write the latest ES features while being able to compile their code back into code that browsers can still understand.
So how has their usage levels changed since the last survey?
The question I asked was — Are you using a tool to transpile your JavaScript from ES6 to ES5? (i.e. Babel)
The results are as follows:
| Answer | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| Yes | 3943 | 77.36% | + 15.60% |
| No — I’ve heard of these tools, but haven’t used one | 975 | 19.13% | – 11.26% |
| No — I’ve never heard of a JavaScript transpiler | 179 | 3.51% | – 3.84% |
As you may have expected, usage of transpilers has continued to grow, With 77.36 per cent of respondents now using one in their workflow.
As I mentioned in the 2016 results, knowledge of a tool such as Babel is now an essential part of modern JavaScript development. If you haven’t taken steps to integrate this into your workflow, I’d recommend that you do so in order to have access to the latest JavaScript features.
Recommended Resource
ES6 For Everyone
A premium training course to strengthen your core JavaScript skills and master all that ES6 has to offer, by Wes Bos.
Q20 — JavaScript Extension Languages
This question was another new one added on the back of feedback from last year’s survey, with a number of people wanting to know about TypeScript and extension language usage.
TypeScript, and more recently Flow, have been gaining more momentum due to their usefulness in bringing static typing to JavaScript.
The question asked was — Please indicate your experience with The following extensions of JavaScript
Here are the results:
| Never Heard of | Heard of/Read About | Used a little | Feel Comfortable Using | |
|---|---|---|---|---|
| TypeScript | 2.12% (108). | 48.28% (2461). | 27.94% (1424). | 21.66% (1104). |
| Flow | 33.31% (1698). | 50.89% (2594). | 11.01% (561). | 4.79% (244). |
| Elm | 28.43% (1449). | 65.14% (3320). | 5.26% (268). | 1.18% (60) |
| ClojureScript | 32.61% (1662). | 64.59% (3292). | 2.37% (121). | 0.43% (22) |
Looking at the results, TypeScript is the tool that the most respondents felt comfortable using, This is compared to just 4.79% saying the same in relation to Flow — a figure I thought would be higher.
On closer investigation (49.6%) she said that they had used TypeScript at least a little.
This appears to be an area of JavaScript that is gaining more traction currently so it’ll be interesting to see if these tools gain more usage in the coming years.
Q21 – JavaScript Linting
JavaScript linting tools are now considered a part of most developers toolkit’s, with over 76% of respondents back in 2016 using one.
ESLint was the most popular tool back then, but is this still the case now?
I asked — Which tool do you use to lint your JavaScript? (if any)
Let’s look at the results:
| Tool | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| ESLint | 3115 | 61.11% | + 20.70% |
| I don’t use a JavaScript linter | 772 | 15.15% | – 8.24% |
| TSLint | 511 | 10.03% | N/A |
| JSLint | 360 | 7.06% | – 11.82% |
| JSHint | 206 | 4.04% | – 9.80% |
| StandardJS | 84 | 1.65% | N/A |
| Other (please specify) | 49 | 0.96% | – 2.07% |
ESLint usage has grown further since the last survey, The next popular linter was TSLint with 10.03 per cent of respondents using it.
Overall, the percentage of respondents using a JS linter went up by 8% to 84.85%.
Like module bundling, it seems that this area of tooling has settled a little and that ESLint is now considered the tool of choice for the majority of developers.
Q22 – JavaScript Testing
JavaScript testing has seen steady gains since the first survey in 2015, with 52.07% of respondents saying that they used a tool to test their JavaScript back in 2016.
However, there wasn’t a clear leader among the tools available. So is this still the case?
The question I asked was — Which tool do you use to test your JavaScript? (if any)
Here are the results:
| Tool | Number of Votes | Percentage | % Diff (to 2016) |
|---|---|---|---|
| I don’t use a tool to test my JS | 2214 | 43.44% | – 4.50% |
| Jest | 1136 | 22.29% | + 18.86% |
| Mocha | 716 | 14.05% | – 8.29% |
| Jasmine | 537 | 10.54% | – 6.38% |
| QUnit | 219 | 4.30% | + 0.09% |
| Enzyme | 95 | 1.86% | N/A |
| Ava | 59 | 1.16% | – 0.51% |
| Tape | 49 | 0.96% | – 0.51% |
| Other (please specify) | 72 | 1.41% | – 0.61% |
Eg. Jest has become the most popular testing tool, with 22.29 percent of respondents saying that they use it. This is up 18.86% from 2016 — a pretty huge leap. It seems Jest has really struck a chord in the community and provided something different to what was available before.
Mocha and Jasmine usage has slipped as a result, with 14.05% and 10.54% usage respectively.
Encouragingly, The percentage of developers using any tool to test their JS has risen to 56.56% — up 4.5% from the 2016 results.
It’s great to see more developers using tools to help them test their JavaScript as these figures continue to grow.
Q23 — JavaScript Package Managers
The next question was born out of my own desire to find out whether more developers were using NPM or Yarn.
Was Yarn just a flash in the pan, or has it actually seen considerable stickiness in usage among developers.
Therefore, I asked — Which JavaScript package Manager does you primarily use in your workflow?
This is how people responded:
| Answer | Number of Votes | Percentage |
|---|---|---|
| NPM | 3206 | 62.90% |
| Yarn | 1563 | 30.67% |
| Don ‘t use | 289 | 5.67% |
| Other | 39 | 0.77% |
NPM is clearly still the leading package manager, On closer (30.67%) are using Yarn, showing that there has been a reasonable shift by some developers not content with NPM.
It’ll be interesting to see how these figures change in future and if NPM gains back these developers or if Yarn usage grows.
Q24 – Miscellaneous Tools
The final question of this year’s survey looked at knowledge levels across package managers and other various tools that didn’t quite fit into any of the categories that had been asked about previously.
Closer was 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 | |||||
|---|---|---|---|---|---|---|---|---|
| NPM | 0.84% (43) | – 1.03% | 2.49% (127). | – 1.66% | 11.89% (606). | – 2.50% | 84.78% (4321). | + 5.18% |
| Yarn | 6.24% (318). | – 16.09% | 26.51% (1351). | – 23.72% | 20.95% (1068). | + 6.94% | 46.30% (2360). | + 32.86% |
| Bower | 4.18% (213). | + 1.48% | 30.80% (1570). | + 9.10% | 36.81% (1876). | + 3.37% | 28.21% (1438). | – 13.95% |
| Babel | 3.77% (192). | – 3.69% | 20.93% (1067). | – 8.69% | 29.76% (1517). | + 5.72% | 45.54% (2321). | + 6.66% |
| Prettier | 30.43% (1551). | N/A | 29.63% (1510). | N/A | 16.05% (818). | N/A | 23.90% (1218). | N/A |
| Yeoman | 19.13% (975). | + 6.61% | 41.85% (2133). | + 0.61% | 29.76% (1517). | – 3.07% | 9.26% (472). | – 4.14% |
The biggest change from the 2016 results saw the number of respondents who feel comfortable using Yarn grow to 46.30%, a rise of +32.86%. This figure is still some way below those that said the same about NPM (84.78%), most likely because developers who know Yarn will also implicitly know NPM, but not necessarily vice-versa.
On closer feeling using it, up +6.66%, while Bower and Yeoman knowledge levels have dropped slightly. In the case of Bower, this is unsurprising given that the project maintainers have now advised using Yarn and Webpack as an alternative.
Prettier – a fairly new tool aimed at providing opinionated code formatting – knowledge levels came in strong, On closer feeling using it. It’ll be interesting to see if this tool (or similar alternatives) continue to grow in the future.
Summary
So some very interesting results, especially looking at the figures relating to JavaScript libraries and frameworks!
React is now the library or framework that the most respondents said was essential to them on their projects. jQuery usage looks like it is starting to fall away slightly, although it is still regarded as the second most essential tool in this area. This is especially interesting in terms of less experienced developers, who seem to be picking up a framework as the first tool they use, ahead of jQuery.
Vue.js is now the second most popular framework, leapfrogging Angular in terms of being regarded as essential and seeing a large amount of growth in it’s knowledge levels and usage.
Elsewhere in the JavaScript landscape, Webpack has consolidated it’s position as the most popular module bundler, with ESLint doing the same in the JavaScript linting category. Jest has also become the most popular JavaScript testing tool, it’s usage growing a huge amount since the end of 2016.
Looking at CSS tooling, Sass and Bootstrap sit top of the pile when it comes to CSS processors and CSS frameworks.
CSS-in-JS knowledge and usage levels have continued to grow, with BEM and Autoprefixer knowledge levels also seeing rises in their usage. On the flip-side, Modernizr usage appears to be falling along with some of the older CSS methodologies such as SMACSS and OOCSS.
Looking at CSS feature usage, flexbox knowledge levels are now extremely high with CSS Grid knowledge levels also looking promising among respondents. This is encouraging to see given the amount of effort the development community has put in to communicating the benefits of these features.
Looking across all of our front-end tools, it’s clear that certain areas seem to have matured with one clear tool now becoming the most popular. This can be seen with Sass, Webpack and ESLint which are all very dominant in their respective areas of expertise. It’ll be very interesting to see if this happens across more areas of our tooling over time.
Thanks again to everyone who has taken part — as I mentioned at the top, the survey will be open for a couple more weeks so if you haven’t taken part yet, please take the time to fill it in.
If anyone has any questions about any of the results, message me on Twitter and I’ll do my best to help!
Article posted on the 9th May 2018