Node and Grunt

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

Transcript

1. Node and Grunt What they are, and how to set up a JavaScript project with them
2. Strategy • To get you started with setting up a basic project so that if you are interested, you can teach yourself more, hands-on
3. 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
4. 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.
5. 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
6. 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
7. 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
8. 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
9. 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
10. 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
11. 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)
12. { "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
13. 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
14. 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 };
15. 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
16. 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
17. 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
18. Discussion • Feel free to comment or ask a question… • …or to leave 
19. 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