JavaScript Power Tools

Marcello Teodori

marcello.teodori@jugmilano.it - JUG Milano

A few words about the speakerMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• longtime JUG Leader, now only from “remote”, for JUG Milano BTW did you subscribe to the mailing list? :D

• 15y of Java development, from mobile to web • now based in London, working as Senior Architect for Workshare, a

startup specialised in Document Collaboration and Enterprise Social Network solutions

• more twitterer: http://twitter.com/magomarcelo than blogger: http://magomarcelo.blogspot.com

From backend to full-stack

End of 2012: after many years of trusty web development with server side Java web frameworks, the startup I was working gets acquired and I find myself in wasteland… a place with no Java at all!!! The only common language we could speak was front-end development, it was really time to become a full stack developer. !In the meanwhile libraries like JQuery, Backbone, Bootstrap, Mustache/Handlebars and books like Object-Oriented JavaScript, JavaScript the Good Parts, JavaScript Design Patterns had changed my perception of what I could do with the language… but what about the tools?

Node.JS enables JavaScript CLI toolsMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

Node.JS - http://nodejs.org

What is Node.JSMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

Node.js is a platform built on Chrome's JavaScript runtime V8 for easily building fast, scalable network applications.

Can also be leveraged to

build and distribute

Command Line Tools

Discover and download new Node.JS packagesMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• command line interface: npm • descriptor: package.json • public registry: https://registry.npmjs.org • keyword search • registry software: couchdb + https://github.com/isaacs/npmjs.org • web interface: https://npmjs.org/

Bower, a JavaScript dependency management toolMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

http://bower.io

Whatever the language, here’s some dependency hell!Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano

Duplications!

Version?

Who owns the

assets?

Bower 101: install, .bowerc and bower.jsonMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

{ "directory": "app/bower_components"}

{ "name": "jspt-demo-app", "version": "0.0.0", "dependencies": { "jquery": "~1.10.2", "underscore": "~1.5.2", "backbone": "~1.1.0", "bootstrap": "~3.0.0", “my-lib”: “mteodori/mylib#develop”, “my-private-lib”: “git@server/repo.git#commitish”, "freewall": "*" }, "devDependencies": { "mocha": "~1.13.0", "sinon": "http://sinonjs.org/releases/sinon-1.7.3.js", "sinon-chai": "~2.4.0" }}

#2 .bowerrc

#3 bower.json#4 install

$ bower install

#1 tool install

$ npm -g install bower

Discover and download new JavaScript packagesMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

$ bower search <name>$ bower install —save <name>

Publish and consume your JavaScript packagesMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• package descriptor specification • search by name and keywords • embedded • server (registry)

• default: http://bower.heroku.com • implementation: https://github.com/bower/registry • API

• project dependencies configuration • name • shorthand on github: organisation/repository • git repo • url

• no authentication! but you can leverage git...

Grunt, the JavaScript task runnerMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

http://gruntjs.com

What is Grunt?Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• sponsored by bocoup • leverages npm to manages automatically their

installation as required • similar to Ant, Gradle, or Maven in the Java world or

Rake for Ruby

Grunt, the JavaScript task runner, collects a series of JavaScript tools within a user defined workflow

described in JavaScript itself.

Grunt 101: package.json, Gruntfile.js, installMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

{ "name": "jspt-demo-app", "version": "0.0.0", "dependencies": {} }, "devDependencies": { "grunt": "~0.4.1" }, "engines": { "node": ">=0.8.0" }}

#2 package.json

#3 Gruntfile.js

$ npm install

module.exports = function(grunt) {! grunt.initConfig({ pkg: grunt.file.readJSON('package.json') });! grunt.registerTask('default', function() { grunt.log.write(‘Hello from Grunt...').ok(); });!}

#4 install

#1 tool install

$ npm -g install grunt-cli

Grunt 101: Plugin, Task, Target and ConfigMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• plugin: grunt extension • task: a command provided by a plugin

=> grunt <task> • config: set of options to configure a task • target: multiple named set of options per task

=> call via: grunt <task:target>

Using Grunt at development timeMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• grunt-connect-plugin • grunt-connect-proxy • livereload • watch • CSS preprocessors like less/sass/stylus • javascript compilers like coffeescript • test runners like mocha • jshint • lesslint

Using Grunt at build and deploy timeMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• concat • cssmin • htmlmin • imagemin • uglify • rev • compress • phonegap

Plugin hunting!Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano

$ npm search grunt-plugin

$ npm install --save-dev <plugin-name>

contrib plugins are “officially maintained”

Yeoman, the JavaScript application scaffolding toolMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

http://yeoman.io

Start your project from a best practices templateMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

brought by Addy Osmani, Paul Irish and many more generators npm install -g generator-webapp => yo webapp meglio: npm install -g generator- generator-gruntplugin  ◦ generator-generator ◦ generator-jquery ◦ generator-backbone/generator-angular ◦ generator-stacked/generator-express • command line options and subgenerators ◦ yo backbone --test-framework=[mocha|jasmine] --template-framework=[lodash|handlebars|mustache] ◦ interactive options ◦ yo backbone # generates your application base and build workflow yo backbone:model blogyo backbone:collection blog yo backbone:router blog yo backbone:view blog => generates view and template using handlebarsgrunt server 

Search a template for your favourite JavaScript stackMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

$ npm search yeoman-generator

$ npm install -g <generator-name>

Build your own generatorMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

$ npm install -g generator-generator$ yo generator

The Yeoman workflowMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

from: http://yeoman.io/gettingstarted.html

Continuous Integration Ready!Marcello Teodori marcello.teodori@jugmilano.it - JUG Milano

1. being command line tools, they can execute on any server, even a CI server! 2. if you use Jenkins, lucky you! There’s a Jenkins NodeJS plugin to prepare the

environment with Grunt e Bower from its web interface without direct access to the server

3. mocha tests can produce JUnit report files via the xunit-file reporter, directly parseable by Jenkins

4. static analysis tools like JSHint, CSSLint and LessLint can produce reports in CheckStyle format, parseable via the Jenkins CheckStyle plugin

5. Deploy your “built” JavaScript application or library via publishing tags to git, or upload to an external server or CDN, or package as a WebJars to be consumed by a Java application, or an asset gem to be consumed by your Rails application, or…

Let’s hack together! A twitter wall demo appMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

Some useful referencesMarcello Teodori marcello.teodori@jugmilano.it - JUG Milano

• Net Tuts+ tutorials http://net.tutsplus.com/tutorials/javascript-ajax/building-apps-with-the-yeoman-workflow/

• “Developing Backbone.js Applications” by Addy Osmani – covers also Grunt, Bower and Yeoman

• example code for this presentation – custom Yeoman generator

https://github.com/mteodori/generator-jspt – twitter wall demo application

https://github.com/mteodori/jspt-demo-app