What is NODE.JS doing in my UI stack?

Well, I have been doing client side development for a while. Knockout, jQuery, Bootstrap and alike.

Meanwhile I was learning Angular (the first version) too.

Then life happened, and I got busy in my day-to-day work.

I had heard about NODE.JS becoming popular among the JavaScript enthusiasts, as they could now write their favorite language for server side purposes. That sounded cool, but as I had .NET and C#, I never bothered.

Until now.

I picked up Angular 2 for including in my language cache, and I saw these plethora of client side libraries - Gulp, Bower, TypeScript, Node.js.

Wait a second! Node.js? Why? Isn't that for server side?

What is NODE.JS doing in my UI stack?

I started googling and binging around, and I got no answer that could quench my thirst. Finally, I turned to Jason Meckley. Jason is an Angular guru, who monthly presentations in our User Group got me excited to Angular in the first place.

And here is his reply to my email:

Node is a JavaScript engine. Its original intent was to execute JS on the server. However more client side developer are using node as a means to manage their UI projects. I haven't seen it being used directly for UI work. but it does play into frameworks like angular/emberJS etc. The most common usage of nodeJS for UI development is node package manager (npm). we are using npm on all our angular work. to get the local environment setup and running looks something like this

c:/projects/my-project

npm install

bower install

gulp --env=local run

within my-project is there are 3 files package.json, bower.json & gulpfile.js

package.json is the list of npm modules. 

bower.json is a list of bower modules bower is like npm but the packages are specific to web development.

usually npm will install bower and gulp and the bower will install client libraries.

These files are similar to nuget's package.config in .net projects.

gulpfile.js contains the build tasks. similar to ant, nant, rake, cake, psake, etc... we have tasks like

1. create distribution directory

2. jslint

3. minify js

4. transpile .less to css

5. copy output to distribution directory

6. run tests (karma, protractor, qunit, etc.)

7. run local web server

To sum it up, node common purpose for client side development is package management and executing compile time scripts like gulp.