JavaScript Power Tools

Marcello Teodori
JavaScript Power Tools

marcello.teodori@jugmilano.it - JUG Milano

A few words about the speaker
Marcello Teodori


• 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 tools
Marcello Teodori


Node.JS - http://nodejs.org

What is Node.JS
Marcello Teodori


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

to
be leveraged
Can also
ibute
ild and distr
bu
Tools
mmand Line
Co

Discover and download new Node.JS packages
Marcello Teodori

•
•
•
•
•
•


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 tool
Marcello Teodori


http://bower.io

Whatever the language, here’s some dependency hell!
Marcello Teodori


ions
Duplicat

!

Version
?
ns
Who ow
assets?

the

Bower 101: install, .bowerc and bower.json
Marcello Teodori

{

#1 tool install

"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"
}

$ npm -g install bower

#2 .bowerrc
{
"directory": "app/bower_components"
}
}

#3 bower.json

#4 install
$ bower install

Discover and download new JavaScript packages
Marcello Teodori


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

Publish and consume your JavaScript packages
Marcello Teodori

•
•
•
•


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 runner
Marcello Teodori

http://gruntjs.com


What is Grunt?
Marcello Teodori


Grunt, the JavaScript task runner, collects a series
of JavaScript tools within a user defined workflow
described in JavaScript itself.

• 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 101: package.json, Gruntfile.js, install
Marcello Teodori


#1 tool install
$ npm -g install grunt-cli
#2 package.json

module.exports = function(grunt) {

!
!

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

!

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

}

#3 Gruntfile.js

#4 install
$ npm install

Grunt 101: Plugin, Task, Target and Config
Marcello Teodori


• 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 time
Marcello Teodori

•
•
•
•
•
•
•
•
•


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 time
Marcello Teodori

•
•
•
•
•
•
•
•

concat
cssmin
htmlmin
imagemin
uglify
rev
compress
phonegap


Plugin hunting!
Marcello Teodori


$ npm search grunt-plugin

contr
“offic ib plugins
ially m
a
aintai re 
ned”

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

Yeoman, the JavaScript application scaffolding tool
Marcello Teodori

http://yeoman.io


Start your project from a best practices template
Marcello Teodori


brought by Addy Osmani, Paul Irish and many more
generators
npm install -g generator-webapp => yo webapp
meglio: npm install -g generatorgenerator-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 blog 
yo backbone:collection blog 
yo backbone:router blog 
yo backbone:view blog => generates view and template using handlebars 
grunt server

Search a template for your favourite JavaScript stack
Marcello Teodori


$ npm search yeoman-generator

$ npm install -g <generator-name>

Build your own generator
Marcello Teodori


$ npm install -g generator-generator
$ yo generator

The Yeoman workflow
Marcello Teodori


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

Continuous Integration Ready!
Marcello Teodori


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 app
Marcello Teodori


Some useful references
Marcello Teodori


• 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

JavaScript Power Tools

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie JavaScript Power Tools

Ähnlich wie JavaScript Power Tools (20)

Mehr von Codemotion

Mehr von Codemotion (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

JavaScript Power Tools