javascript power tools
DESCRIPTION
Questa presentazione descrive l’esperienza di uno sviluppatore Java che vuole affrontare lo sviluppo frontend di un’applicazione web moderna nel migliore dei modi senza rinunciare alle comodità cui è abituato. Vedremo una serie di strumenti, dei veri e propri JavaScript Power Tools come Bower per la gestione delle dipendenze, Grunt per le build e Yeoman per la gestione dei progetti, che permettono di creare applicazioni javascript ben strutturate e funzionali in modo semplice e rapido.TRANSCRIPT
![Page 2: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/2.jpg)
A few words about the speakerMarcello Teodori [email protected] - 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
![Page 3: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/3.jpg)
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?
![Page 4: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/4.jpg)
Node.JS enables JavaScript CLI toolsMarcello Teodori [email protected] - JUG Milano
Node.JS - http://nodejs.org
![Page 5: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/5.jpg)
What is Node.JSMarcello Teodori [email protected] - 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
![Page 6: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/6.jpg)
Discover and download new Node.JS packagesMarcello Teodori [email protected] - 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/
![Page 7: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/7.jpg)
Bower, a JavaScript dependency management toolMarcello Teodori [email protected] - JUG Milano
http://bower.io
![Page 8: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/8.jpg)
Whatever the language, here’s some dependency hell!Marcello Teodori [email protected] - JUG Milano
Duplications!
Version?
Who owns the
assets?
![Page 9: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/9.jpg)
Bower 101: install, .bowerc and bower.jsonMarcello Teodori [email protected] - 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
![Page 10: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/10.jpg)
Discover and download new JavaScript packagesMarcello Teodori [email protected] - JUG Milano
$ bower search <name>$ bower install —save <name>
![Page 11: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/11.jpg)
Publish and consume your JavaScript packagesMarcello Teodori [email protected] - 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...
![Page 13: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/13.jpg)
What is Grunt?Marcello Teodori [email protected] - 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.
![Page 14: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/14.jpg)
Grunt 101: package.json, Gruntfile.js, installMarcello Teodori [email protected] - 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
![Page 15: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/15.jpg)
Grunt 101: Plugin, Task, Target and ConfigMarcello Teodori [email protected] - 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>
![Page 16: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/16.jpg)
Using Grunt at development timeMarcello Teodori [email protected] - 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
![Page 17: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/17.jpg)
Using Grunt at build and deploy timeMarcello Teodori [email protected] - JUG Milano
• concat • cssmin • htmlmin • imagemin • uglify • rev • compress • phonegap
![Page 18: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/18.jpg)
Plugin hunting!Marcello Teodori [email protected] - JUG Milano
$ npm search grunt-plugin
$ npm install --save-dev <plugin-name>
contrib plugins are “officially maintained”
![Page 19: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/19.jpg)
Yeoman, the JavaScript application scaffolding toolMarcello Teodori [email protected] - JUG Milano
http://yeoman.io
![Page 20: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/20.jpg)
Start your project from a best practices templateMarcello Teodori [email protected] - 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
![Page 21: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/21.jpg)
Search a template for your favourite JavaScript stackMarcello Teodori [email protected] - JUG Milano
$ npm search yeoman-generator
$ npm install -g <generator-name>
![Page 22: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/22.jpg)
Build your own generatorMarcello Teodori [email protected] - JUG Milano
$ npm install -g generator-generator$ yo generator
![Page 23: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/23.jpg)
The Yeoman workflowMarcello Teodori [email protected] - JUG Milano
from: http://yeoman.io/gettingstarted.html
![Page 24: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/24.jpg)
Continuous Integration Ready!Marcello Teodori [email protected] - 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…
![Page 25: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/25.jpg)
Let’s hack together! A twitter wall demo appMarcello Teodori [email protected] - JUG Milano
![Page 26: JavaScript Power Tools](https://reader034.vdocuments.us/reader034/viewer/2022051314/54c739664a795927458b4582/html5/thumbnails/26.jpg)
Some useful referencesMarcello Teodori [email protected] - 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