A few months ago I wrote about the modern front-end development technology stack. I think that this post is still quite up to date but recently one of my readers sent me a question about what tools he should know as a front-end developer and what the best workflow of modern web development is. I wrote him the answer in a separate email but I think this subject might be interesting for my other readers. That’s why I decided to write a whole post about it.
What tools should I know? It depends…
Yes. Actually everything depends on what technologies (frameworks) you use in your project. We usually say: “ReactJS/Angular/Ember/Backbone (delete the unnecessary) technology stack”. This implies that all these frameworks (but others too) have their own tool-sets.
First example: if you have a project in ReactJS you will usually use Webpack to bundle resources with Babel to make ES6 available. Additionally, you may want to use Gulp for task automation but more likely it will just be NPM scripts.
Second example: if you work in Angular 2 you will probably use TypeScript to provide static type checking and ES6 support.
So what should I learn?
Well… There are plenty of great tools for front-end development available on the market. I think it’s impossible to know all of them. You are lucky if you join an existing team which has already chosen all the tools. You just have to learn them (this is also a good foundation for further discovery of new tools). But if you just want to become a front-end developer and want to prepare to do this, I have a solution for you…
I am a huge fan of Yeoman and I advise you to use it to learn what tools are usually used in the world of your technology. Please see below how to do it:
Yeoman is a scaffolding tool for modern web applications. It provides you with a huge ecosystem of generators for every modern front-end technologiy such as Angular, React, Backbone, Polymer etc. These generators can be used to scaffold complete projects (or their parts – you can combine generators which are compatible).
So if you want/have to start working on, e.g. a ReactJS project, you could just pick one of the available React generators, scaffold the project and analyze it. Check the structure of the project, what tools are used and how they are utilized. Now, when you know what tools you should know, you can start learning about them. You can do this by working on a project or just reading the manual (I prefer the first option).
I think it is good to check a handful of generators so that you see different approaches. And it would be nice to try the freshest of them – tools evolve so it is always better to know the most modern way of using them.
This is the way I started my first React project. At the time I had no knowledge about Webpack and Babel at all. I started with the generator which used Gulp but the second one I checked used NPM scripts and I loved this approach. That’s why I think it is good to check more than one generator.
I wonder what you think about the described approach?