Why do we have npm, bower and grunt in the very same application?

[nmingazov]

http://stackoverflow.com/questions/21198977/difference-between-grunt-npm-and-bower-package-json-vs-bower-json

Looks like it gets a little bit outdated right now. Probably we should consider reducing the number of tools needed.

[nmingazov]

I've researched a little bit here. AFAIK inside Yandex.Toloka we have an iframe, so, theoretically, everything could be inserted there, even things such as React + ES6.
Moreover, tools that got an attention recently and could be considered are yarn and webpack. Probably we could check them out after tests would be written.

[AlNedorezov]

@nmingazov, we actually use ES6 as a code standard and, at least for now, it works fine within iframe inside Yandex.Toloka. However it is worth noting that we use a small number of ES6 features and some could actually lead to some bugs, since browser support for ES6 is still incomplete (see the Kangax compatibility table).
As for React, theoretically, yes, it may work. But operability of any JS library should be checked in Yandex.Toloka before usage, since projects with some libraries (e.g. Snap.svg) may work fine on the server, but crash with many bugs inside Yandex.Toloka.

@aykbadalyan will publish results of his research on the tools soon.

[nmingazov]

Ok, seems fine. Honestly, didn't check for ES6 as is.
I will wait for the research results and then, most probably, will switch this task to the delighters.

[aykbadalyan]

Bower - Package Manager

This tool is being used in order to add all the necessary dependencies to the project.

Usage of NPM was considered by me to be a worse approach for the particular case of our project, since in Toloka-based version we are not responsible for the back-end and in stand-alone version, if any, we are going to use Python on the back-end. In contradiction, NPM is being mostly used for a case when both back and front end(s) is written in JS.
The explanation for this is in fact that NPM installs the dependencies directly in the “system” (in some folder, for connecting to which we have a special path at the OS level). And bower installs the required dependencies into the application, which is more rational in our case.

Grunt - Build Automatization

This tool cannot be replaced by any one out of the two other tools. Grunt is considered to be an automatization tool with the help of which developers are able to write tasks such as testing, concatenation and/or minification of files. Throughout usage of this tool all the required tasks are being gone through each time there is a need and thereby the process removes any mistakes developers could do in case of working manually / doing mechanical job.
This tool cannot, for instance, install jQuery library in an adequate way - it may be possible, but is not considered to be a right approach and needs some additional time, which is most probably not going to bring worthy value.

NPM - Package Manager

NPM is used for installation of the bower tool.

Webpack - Module Bundler

Webpack is able to stand instead of Grunt and has a restriction of ES6 to be used.
In order for the modern browsers to correctly work with JS6, Babel should be installed.
Even in case if we decide to switch to Webpack, we will have to install NPM so that we can install the Babel and Webpack modules.

All the above mentioned information considers that in case if we want to switch the tools in an appropriate manner, pretty much work should be done (so that everything is implemented, tested and works properly).

I don’t find any sense in all those transformations because the true result we may reach is to use Webpack instead of Grunt, and due to the mentioned reasons both NPM and Bower should remain.

@nmingazov , overall, I assume that the integrated tools do and will do the whole job we need not worse than any available alternatives.

[nmingazov]

Ok, looks fine to me now. I will check this once again after we implement tests.

[AleksandrShepelev]

when I installed bower to run this project, it reported to me following warning:

npm WARN deprecated [email protected]: ..psst! While Bower is maintained, we recommend Yarn and Webpack for *new* front-end projects! Yarn's advantage is security and reliability, and Webpack's is support for both CommonJS and AMD projects. Currently there's no migration path but we hope you'll help us figure out one.
/usr/bin/bower -> /usr/lib/node_modules/bower/bin/bower
/usr/lib
└── [email protected]

so, it is better to replace this library.