Useful Data & Analysis from Ashley Nolan’s 2019 Survey

Leave a Comment / CSS, JavaScript / By

The Front-End Tooling Survey 2019

Ashley Nolan has continued her annual front-end tooling survey tradition. In 2019 it had 3,005 participants and consisted of 27 questions.

Please see Nolan’s original survey for the full results and her analysis. Also more accurate numbers – to make the analysis easier at a glance I’ve rounded to one decimal point.

In this post I simply want to analyze the data from a specific angle – what tools are people using now / should we expect people to be using in the future? If we are working on bringing our CSS skills up-to-date what do we need to be aware of?

CSS Processor – Usage (Question 3)

  • Sass – 77.3% (+11.9%)
  • PostCSS – 28.7% (+20%)
  • Less – 14% (+7.5%)
  • No Preprocessor – 13.1% (-1.4%)
  • Other Options – Stylus, Other.

CSS Frameworks – Usage (Question 5)

  • No Framework – 35% (+2.2%)
  • Bootstrap – 28% (-7%)
  • Custom Framework – 16.5% (1.3%)
  • Tailwind CSS – 4.3% (NA)
  • Other Options – Bulma, Foundation, Materialize, Sematic UI, Tachyons, PureCSS, Other.

CSS Methodologies/Naming Scheme – Experience (Question 9)

  • BEM – 44% (+5.4%)1Originally BEM was included under CSS Tools as well (Q10) where it had 45.5% (+2%). For simplicity I’ve only retained it here.
  • CSS-in-JS – 27.5% (+7.6%)
  • Atomic Design – 14.5% (+2.5%)
  • Other Options – SMACSS, OOCSS, ITCSS, SUIT CSS.

CSS Tools – Usage (Question 10)

  • Autoprefixer – 57% (+0.1%)
  • Stylelint – 27.5% (+4.7%)
  • Modernizr – 21.1% (-8.2%)
  • Atomic Design – 15% (+0.2%)
  • None of These – 22.1% (+5.2%)
  • Other Options – SMACSS, OOCSS, ITCSS, SUIT CSS.

CSS-in-JS – Usage (Question 11)

  • Don’t use CSS-in-JS – 55.3%
  • Styled Components – 27%
  • CSS Modules – 9.7%
  • Emotion – 4%
  • Other Options – JSS, Aphrodite, Radium, Other.

CSS Features – Usage (Question 12)

  • Flexbox – 80.4% (+12.8%)
  • CSS Grid – 28.6% (+10.1%)
  • CSS Custom Properties – 27.9% (8.9%)
  • Other Options – CSS Houdini.

CSS Task Runner – Preferred (Question 14)

  • NPM Scripts – 64.3% (+16.4%)
  • Gulp – 18.5% (-11%)2Note that the decline in Gulps popularity is not reflected when referring to JS usage (Q19).
  • Don’t use one – 9.1% (-1.6%)
  • Other Options – Grunt,3Only 2.5%, a decrease of 3.3%. Somewhat surprising as I still see Grunt used somewhat frequently. GUI Application (e.g. CodeKit), Make, Other.

JavaScript Frameworks – Usage (Question 16)

  • React – 52.2% (+4.8%)
  • jQuery – 36.8% (-14.2%)
  • Lodash – 32.8% (-1%)
  • Vue.js – 27.1% (+4.2%)
  • Angular (v2+) – 15.7% (+1.6%)
  • Other Options – D3.js, Ember, Underscore, AngularJS, Preact, Backbone, Polymer, Knockout, Aurelia, MeteorJS, None.

JavaScript Module Bundlers & Task Runners – Experience (Question 19)

  • NPM Script – 64.4% (+8.3%)
  • Webpack – 52.4% (+5.7%)4When looking at usage of module bundlers apart from task runners, Webpack is out front with 73.3% (+7.7%), see Q18.
  • Gulp – 45.8% (-3.8%)
  • Grunt – 24.6% (-4%)
  • Browserify – 9.4% (-2.4%)5When looking only at module bundlers, Browserify, Rollup, RequireJS, SystemJS, etc. are barely apparent.
  • Parcel – 7.1% (+4.3%)6When looking only at module bundles Parcel’s share drops to 2.8% (+1.8%).
  • None – 14.6% (-5.9%)7These numbers come from Q18 when looking at only module bundlers.

JavaScript Extension Languages – Experience (Question 21)

  • TypeScript – 31.9% (+10%)
  • Flow – 4.3% (-0.3%)
  • Other – Elm, ClojureScript, Dart.

JavaScript Linting – Usage (Question 22)

  • ESLint – 76% (+15.4%)
  • None – 12% (-3.4%)
  • Other – JSLint, JSHint, StandardJS, Other.

JavaScript Testing – Usage (Question 23)

  • Jest – 44.9% (+22.9%)
  • None – 35.6% (-8%)
  • Mocha – 26.1% (+12.2%)
  • Jasmine – 19.5% (+8.5%)
  • Enzyme – 18.6% (+16.9%)
  • Cypress – 12.6% (NA)8I have heard particularly good things about Cypress, but time will tell.
  • Other – QUnit, Ava, Tape, Other.

Performance Testing – Usage (Question 24)

  • Lighthouse – 52.1%
  • None of These – 31.7%
  • WebPageTest – 24.3%
  • Service Workers – 23.1%
  • Others – Pingdom, AMP, Other.

Accessibility Testing – Usage (Question 25)

  • None – 63.1%
  • Color Contrast Checker – 22.2%
  • Screenreader – 15.4%
  • WAVE – 9.5%
  • Other – 9.4%

Primary JavaScript Package Manager – Usage (Question 26)

  • NPM – 65.4% (+2%)9NPM holds 87% (+2.2%) for Misc Tools (Q27).
  • Yarn – 29.8% (-0.4%)10Yarn holds 50.6% (+4.3%) for Misc Tools (Q27).
  • None – 4.5% (-1.2%)
  • Other – 0.3% (-0.4%)

Miscellaneous Tools – Experience (Question 27)

  • Babel – 49.6% (+4.1%)
  • Prettier – 40.4% (+16.5%)
  • Yeoman – 7.9% (-1.4%)

So What Should I Learn?

Now I’m not bringing into this what I know external from the survey (at least trying not to). If our only source of knowledge was this survey, then I’d think the following would be the tools/features/frameworks/etc. we should be learning:

CSS

  • Methodologies/Naming Schemes: BEM.
  • Extension Languages: Sass.
  • Tooling: PostCSS, Stylelint, Autoprefixer.
  • Features: Flexbox, Grid, Custom Properties.
  • Frameworks:
    • Bootstrap, its fairly easy and widely used across the web though not for newer projects.
    • Maybe Tailwind.
  • CSS-in-JS: Styled Components.
    • CSS Modules because they are part of CSS.

CSS and JS

  • Module Bundlers/Task Runners: NPM Script, Webpack.
    • Gulp if you can find time.
  • Performance Testing: Lighthouse.
  • Accessibility Testing: Color Contrast Checker, maybe Screenreader.
  • Package Manager: NPM.
    • Yarn if you prefer, but learn NPM too.
  • Frameworks: React, maybe Vue.

JS

  • Extension Languages: TypeScript – maybe.
  • Testing: No clear winner, pick one.
  • Tooling: ESLint, Babel, Prettier.
  • Frameworks:
    • jQuery still useful for legacy projects.
    • Lodash is a maybe.

Leave a Reply