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.
(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
– image from hackernoon.com (Check them website, they are great!)
- UI and CSS
- 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
- 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
- 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.
If you went through this list and you thought that it is just crazy overwhelming, this video is for you!
Happy coding 😉