Node and Grunt What they are, and how to set up a JavaScript project with them 

Strategy • To get you started with setting up a basic project so that if you are interested, you can teach yourself more, hands-on 

Node • Server-side or native JavaScript – Not the first, but perhaps the most popular • A whole ecosystem – Fun, cutting-edge technologies • Built on the Chrome’s open-source V8 engine – JIT compilation to native bytecode 

npm • Node Package Manager – Like NuGet for JavaScript • Dependency model – Local, hierarchical dependencies, e.g.: • My project – Module A, v1.0.1 » Module C, v0.2.3 – Module B, v0.6.2 » Module C, v1.1.0 – Stored in ./node_modules directory – Configured in package.json at project root. 

Potential Uses of Node • Building native apps in JavaScript • Run the same code inside or outside the browser – E.g. command-line app with Node – Same app with GUI via the browser • Building services in JavaScript – e.g. MEAN technology stack • MongoDB, ExpressJS, AngularJS, NodeJS – Reduced impedance mismatch between frontend and backend – Or fake services, such as our mock API • Headless browser emulation 

Grunt • Written in pure JavaScript • Task-runner, mostly used as a build tool • You can register tasks from plugins • You can composite those tasks into other tasks • Plugin tasks are highly configurable • All configured in one JavaScript file – Gruntfile.js at project root 

Example Grunt tasks • Lint (CSS, HTML, JS…) • Compile (Less/Sass -> CSS, CoffeeScript -> JavaScript, Markdown -> HTML…) • Copy files • Concatenate files • Minify JavaScript • Run tests • Watch for changes and rebuild 

Prerequisites • Install Node and npm – Usually bundled together – Available on Node’s website: http://nodejs.org/ • Use npm to install the Grunt command line – npm install -g grunt-cli – -g is the global flag • Install for the whole system • Not in the individual repository (local) • Usually you won’t want to use this flag 

Configure your source control • Set up repo on GitHub or BitBucket or… • git clone or git init or hg init or… • If you’ve been meaning to learn Git, maybe this is the time 

Initialize your npm package • npm init – Interactively asks for the basic info – Creates package.json – You can hand tweak this however you want • Anyone who newly downloads your project can just: npm install – Restores the dependencies 

Configuring dependencies • Install dependencies – npm install --save ... – If no dependencies, I recommend adding dependencies: {} to the package.json • Development dependencies are separate – npm install --save-dev ... • (In case you are lost, next slide has example) 

{ "name": “helloworld", "version": "0.0.0", "description": “Hello world in Node.js", "main": “app.js", "scripts": { "test": "grunt specs" }, "author": “Kazark", "license": "MIT", "dependencies": {}, "devDependencies": { "grunt-contrib-jshint": "~0.10.0", "grunt": "~0.4.4", "grunt-contrib-watch": "~0.6.1", "grunt-contrib-jasmine": "~0.6.3" } } Example package.json for an npm project 

How to not check in dependencies • Make a .gitignore – Ignore node_modules and whatever else • Make npm ignore Git’s ignore file – Add a blank .npmignore 

Gruntfile layout module.exports = function(grunt) { grunt.initConfig({ /* configuration object */ }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks… // Register tasks from plug-ins grunt.registerTask('specs', ['jshint', 'jasmine:all']); grunt.registerTask… // Composite tasks from other tasks }; 

module.exports = function(grunt) { grunt.initConfig({ watch: { scripts: { files: [‘helloworld.js'], tasks: ['specs'] } }, jshint: { all: { options: { undef: true, eqeqeq: true }, files: { src: 'helloworld.js' } } }, jasmine: { all: { src: 'helloworld.js', options: { specs: 'helloworld.spec.js', outfile: 'specs.html', keepRunner: true } } }, }); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-jasmine'); grunt.registerTask('specs', ['jshint', 'jasmine:all']); grunt.registerTask('default', ['specs']); grunt.registerTask('dev', ['default', 'watch']); }; Example Gruntfile.js 

Simple example • npm init • vim package.json • npm install --save-dev grunt-contrib-jasmine grunt-contrib-jshint grunt-contrib-watch • vim .gitignore • touch .npmignore • vim Gruntfile.js • vim –O2 hello.spec.js hello.js • grunt • git add –A • git commit 

Tips & Ideas • “should exist” tests are particularly helpful – …at a module level – …when bootstrapping your project • Why not try: – Make a small Angular project – Use a different test, spy or assertion framework – Use a language that compiles to JavaScript 

Discussion • Feel free to comment or ask a question… • …or to leave  

A few links • Node: http://nodejs.org/ • npm: https://www.npmjs.org/ • Grunt: http://gruntjs.com/ • Example projects – Node native app https://github.com/Kazark/katasemeion – Node Angular JS project https://github.com/Kazark/conway-game-of-life- with-angular-js