The Front-End Web Developer Spectrum

Modern front-end web development is in constant change. The evolution is this area has been so rapid in the past years that sometimes it’s hard to keep up with the new kids on the block while maintaining focus on what needs to be done.

One example is this image, that gives you an overview of all the different tools and technologies that have a part in the front-end and JavaScript ecosystem.

(Since there is a huge chance that, while I am writing this article, there are 100325 new front-end tools being released, it’s possible that this image is already not completely up to date.)

The Front-End Developer Tools Spectrum

Front-End Spectrum

– image from (Check them website, they are great!)

  • UI and CSS
    • HTMLCSS, JavaScript, Bulma, Bootstrap, Ionic, Foundation, PureCSS, MUICSS, Motion UI
  • Templating
    • Mustache, Handlebars, doT, EJS, Jade
  • CSS Preprocessors
    • Sass, Less.js, Stylus, Compass
  • Version Control
    • Git, SVN, Mercurial
  • Package Managers
    • Npm, Bower, Yarn
  • JS Frameworks and Libraries
    • VueJS, Angular, React, Meteor.js, Ember, jQuery, Backbone, Lodash
  • Mobile
    • Ionic, Quasar, React Native, Xamarin, Framework7, Onsen UI, Kendo UI, Sencha Touch
  • JS Preprocessors
    • CoffeeScript, TypeScript, Babel, Traceur
  • Linters and Hinters
    • JSHint, JSLint, JSCS, ESLint
  • Build Automation and Module Bundlers
    • RequireJS, Browserify, Webpack, Grunt, Gulp, Broccoli
  • Tests
    • QUnit, Jasmine, Mocha, Karma, Jest, Ava


Not in shock yet after this list, so the next link is for you. The frontend-dev-bookmarks repository on github, has an even more comprehensive list in terms of front-end tools and resources.

Finally, if you want more that just a list and you’re looking for some concrete knowledge and concepts of front-end developing, than nothing better then to take a look at the Front-End Developer Handbook 2017. This is a free gitbook that has been kept up to date by the community and can be a great starting point if you’re planning to dive deep into this dangerous and mysterious world.

Bonus Video (The myth of the “Real JavaScript Developer” – Brenna O’Brien)

If you went through this list and you thought that it is just crazy overwhelming, this video is for you!

Content inspired by: hackernoon / @withinsight1 / usersnap / Among others…

Happy coding 😉

  • Stas Gavrylov

    Nice overview, thanks.

    I’d want to point out that it’s really hard to distinguish links in your post. I know that we, front-end devs, do not like default underline, but it’d be nice if they were a bit more noticeable.

  • Hi Joao! I created the graphic you’re using in this post, and am the author of the original post (

    Could you remove this post from your site, or redirect traffic from your URL to mine (or both!)? You’re essentially duplicating my content. Thanks!

    • Hey,
      The image was removed, post content updated and a link to you was added at the end, together with the other sources of inspiration I used.
      Best regards,